miércoles, 30 de noviembre de 2016

Buenos días , aquí tienes tu dosis diaria de WordPress ☕ 

                                                           

Tu dosis diaria de WordPress

Datos y productos de ejemplo en WooCommerce

Cuando creas una nueva tienda online con WooCommerce, antes de configurarlo siempre es conveniente crear productos para comprobar como se visualizará cada tipo de producto o incluso probar las pasarelas de pago.

Vale que puedes crear varios artículos pero tienes que perder un tiempo precioso buscando imágenes, inventándote textos, etc. Pero lo que no sabe mucha gente es que el propio plugin WooCommerce incluye datos de ejemplo para hacer pruebas en tu recién instalada tienda online.

Para obtenerlos tienes que descargar WooCommerce desde el directorio oficial de plugins de WordPress.org. Lo sé, ya lo has instalado, pero hazme caso y descárgalo en tu ordenador.

descargar-woocommerce

Una vez descargado descomprime el zip y se creará la carpeta woocommerce.

carpeta-woocommerce-descargada

Ábrela y verás una carpeta llamada dummy-data, en la que hay 4 archivos, y el que nos interesa es el llamado dummy-data.xml.

carpeta-dummy-data-woocommerce

Ese archivo es el que contiene datos de ejemplo.

Ahora ve a Herramientas -> Importar del escritorio de tu WordPress y ejecuta el importador de WordPress.

herramientas-importar-productos-de-tienda

Instálalo y ejecuta el importador.

instalando-importador-wordpress ejecutar-importador-productos-de-tienda

Una vez activo simplemente elige el archivo dummy-data.xml

subir-dummy-data-xml cargar-dummy-data-xml

Pulsa el botón "Subir archivo e importar" y el importador te mostrará una ventana de confirmación. En la misma puedes importar el usuario wooteam, crear uno nuevo o asignar los datos importados a un autor existente, pero lo más importante es que marques la casilla para que descargue e importe los archivos adjuntos.

importando-dummy-data-woocommerce

Una vez importados los datos tendrás todo lo siguiente:

  • 23 productos de todo tipo (simples, variables, externos, etc.)
  • Productos con descuento
  • Un atributo con varias opciones.
  • Valoraciones aprobadas y sin aprobar
  • Categorías de productos
Productos importados Valoraciones importadas Categorías importadas Atributos importados

Y lo mejor de todo es que estarán disponibles en tu tienda para que puedas comprobar cómo se visualizan los productos de todo tipo con tu tema y ajustes.

Tienda con productos importados Producto importado

Lo mejor de los productos de prueba es que puedes revisarlos para ver cómo se crean y configuran antes de crear los tuyos.

Una vez hagas tus pruebas solo tienes que borrar los productos, categorías y atributos (las valoraciones se borran al borrar los productos) y empezar a crear tus propios productos.

Sigue leyendo…
2016-11-30  • Fernando

Si quieres saber más sobre lo que ofrecemos en Ayuda WordPress echa un vistazo a los siguientes enlaces …  

Curso de WordPress presencial en Madrid

Hosting especializado WordPress
100% fiable

TU EXPERTO WORDPRESS ONLINE

FORMACIÓN WORDPRESS ONLINE

Facebook Twitter Google Youtube

Ayuda WordPress

Recibes este correo electrónico porque estás registrado en nuestro sitio o has realizado compras.

Darme de Baja

martes, 29 de noviembre de 2016

Buenos días , aquí tienes tu dosis diaria de WordPress ☕ 

                                                           

Tu dosis diaria de WordPress

Cómo añadir el CIF/NIF/NIE en WooCommerce

WooCommerce, al ser un plugin global, inicialmente no contempla peculiaridades de cada país, como es el caso de la inclusión de un campo específico para el CIF/NIF/NIE español, pero se puede añadir fácilmente.

nif

Añadir campo CIF/NIF/NIE con código

Para que WooCommerce incluya un nuevo campo en el que introducir el CIF/NIF/NIE debes añadirlo, para lo que deberás incluir el siguiente código en el archivo functions.php del tema hijo activo o en tu propio plugin de funciones.

/* * AÑADIR CAMPO NIF/CIF EN EL FORMULARIO DE PAGO */ function woo_custom_field_checkout($checkout) {   echo '<div id="additional_checkout_field">';   woocommerce_form_field( 'nif', array( // Identificador del campo      'type'          => 'text',     'class'         => array('my-field-class form-row-wide'),     'required'      => true,            // ¿El campo es obligatorio 'true' o 'false'?     'label'       => __('NIF / CIF'),   // Nombre del campo      'placeholder'   => __('Ej: 12345678X'), // Texto de apoyo que se muestra dentro del campo   ), $checkout->get_value( 'nif' ));    // Identificador del campo    echo '</div>';  } add_action( 'woocommerce_after_checkout_billing_form', 'woo_custom_field_checkout' ); /* * INCLUYE NIF/CIF  EN LOS DETALLES DEL PEDIDO CON EL NUEVO CAMPO */ function woo_custom_field_checkout_update_order($order_id) {   if ( ! empty( $_POST['nif'] ) ) {     update_post_meta( $order_id, 'NIF', sanitize_text_field( $_POST['nif'] ) );   } } add_action( 'woocommerce_checkout_update_order_meta', 'woo_custom_field_checkout_update_order' ); /* * MUESTRA EL VALOR DEL CAMPO NIF/CIF LA PÁGINA DE MODIFICACIÓN DEL PEDIDO */ function woo_custom_field_checkout_edit_order($order){   echo '<p><strong>'.__('NIF').':</strong> ' . get_post_meta( $order->id, 'NIF', true ) . '</p>'; } add_action( 'woocommerce_admin_order_data_after_billing_address', 'woo_custom_field_checkout_edit_order', 10, 1 ); /* * INCLUYE EL CAMPO NIF/CIF EN EL CORREO ELECTRÓNICO DE AVISO A TU CLIENTE */ function woo_custom_field_checkout_email($keys) {   $keys[] = 'NIF';   return  $keys; } add_filter('woocommerce_email_order_meta_keys', 'woo_custom_field_checkout_email');

Como verás, el código incluye todo lo necesario:

  1. Que el campo NIF/CIF/NIE aparezca en la página de pago
  2. Hace que el campo sea obligatorio (lo puedes cambiar) y lo comprueba
  3. Muestra un texto de ejemplo (placeholder)
  4. Que el campo NIF/CIF/NIE se muestre y pueda cambiarse en la página de modificación de pedido
  5. Que el campo NIF/CIF/NIE se muestre en el correo electrónico de confirmación del pedido que WooCommerce envía al cliente

Añadir campo de CIF/NIF/NIE con plugin

Ahora bien, si prefieres usar un plugin te recomiendo WooCommerce Checkout Manager.

Una vez instalado y activo añade un menú propio llamado WooCheckout desde el que puedes decidir qué campos aparecerán en la página de pago, e incluso añadir nuevos, tanto al finalizar compra como si quieres que también aparezcan en el pedido, lo que tiene toda la lógica.

Solo tienes que ir a la pestaña Billing y Agregar un nuevo campo.

nuevo-campo-nif-cif-woocommerce-con-plugin

Es importante que conozcas las siguientes opciones de esta pantalla:

  • Required: Si marcas la casilla lo haces obligagtorio
  • Position: Puedes elegir si va a ocupar todo el ancho de la zona de datos de pago (wide) o si compartirá fila con otro campo, para lo que deberías decidir si va a la izquierda (left) o a la derecha (right)
  • Clear: Si marcas la casilla el campo aparece vacío, en caso contrario se muestra el marcador de posición (placeholder)
  • Etiqueta: El texto visible en la página de pago
  • Marcador de posición (placeholder): Si no activaste la casilla Clear se mostrará un texto de ejemplo, que pongas aquí.
  • Elija el tipo de: Tipo de campo
  • Abreviatura: El identificador único del campo
  • X: Este campo tan poco descriptivo es muy importante pues si marcas la casilla creas el campo pero no se verá en la página de pago; sirve fundamentalmente para la otra gran utilidad de este plugin, que es ocultar campos por defecto de WooCommerce.

Si quieres, también puede añadirse a las notas de envío, en la sección Shipping.

nuevo-campo-nif-cif-woocommerce-en-los-envios-con-plugin

Y los campos a decidir son los mismos que para la página de pago.

Nada más. Hace poco me preguntaba un alumno de los cursos de WordPress si no se podía añadir un cálculo o comprobador automático de la letra del CIF pero creo que esto es una barbaridad incluirlo, pues suelen ser códigos PHP demasiado complejos para la utilidad real.

Sigue leyendo…
2016-11-29  • Fernando

Si quieres saber más sobre lo que ofrecemos en Ayuda WordPress echa un vistazo a los siguientes enlaces …  

Curso de WordPress presencial en Madrid

Hosting especializado WordPress
100% fiable

TU EXPERTO WORDPRESS ONLINE

FORMACIÓN WORDPRESS ONLINE

Facebook Twitter Google Youtube

Ayuda WordPress

Recibes este correo electrónico porque estás registrado en nuestro sitio o has realizado compras.

Darme de Baja

lunes, 28 de noviembre de 2016

Buenos días , aquí tienes tu dosis diaria de WordPress ☕ 

                                                           

Tu dosis diaria de WordPress

Cómo insertar vídeos de Facebook en WordPress

Es innegable que Facebook es la red social más visitada en todo el mundo, y entre todo lo que se publica lo que más éxito tiene siempre son los vídeos, así que puede tener sentido compartir este tipo de contenidos también en tu WordPress ¿no?

Además, que es muy fácil.

Insertar un vídeo de Facebook en WordPress

El primer paso es identificar el vídeo, y para obtener el código de inserción debes desplegar la flechita en la parte superior derecha de la actualización donde esté publicado.

abrir-video-fb-para-insertar

A continuación se abre una ventana emergente donde tienes el código para insertar el vídeo, simplemente cópialo.

codigo-insertar-video-facebook-en-wordpress

Ahora ve a tu editor de WordPress y en la pestaña HTML pega el código copiado.

insertando-video-fb-en-wordpress

Y ya podrás pasar a la pestaña Visual para comprobar que el vídeo se ve y se puede reproducir.

video-facebook-insertado-en-entrada-wordpress

Solo te quedaría publicar la entrada para que el vídeo esté visible y se pueda reproducir.

video-facebook-en-entrada-wordpress

Y lo verías como aquí abajo…

Si quieres puedes personalizar el aspecto del vídeo simplemente modificando parámetros del código iframe que te ofrece Facebook, estos:

  • Ancho del reproductor: cambia el número de píxeles del width.
  • Altura del reproductor: cambia el número de píxeles del height.
  • Permitir o no pantalla completa: puedes cambiar el valor allowfullscreen entre true (permitir) o false (no permitir).
  • Mostrar también el texto de la publicación o solo el vídeo: simplemente pon el valor showtext en true (mostrar) o false (no mostrar)
  • Marco del vídeo: puedes decidir si se mostrará un marco como borde del vídeo poniendo el parámetro frameborder en 0 (no mostrar) o eligiendo un número mayor (1, 2, etc) para mostrarlo más o menos ancho.
  • Transparencia: el vídeo puede tener un fondo a su alrededor o que sea transparente, simplemente elige si el parámetro allowTransparency estará en true (transparente, lo que mejor se adapta a todo diseño) o false.

Cómo hacer que se reproduzca automáticamente un vídeo de Facebook en WordPress

Ahora bien, una de las mejores cosas de los vídeos en Facebook es que se reproducen automáticamente, y si quieres que también sea así en tu WordPress se insertan de otro modo bastante diferente.

Lo primero es insertar la llamada al JavaScript de Facebook para reproducir vídeos automáticamente, esta:

<!-- Load Facebook SDK for JavaScript -->   <div id="fb-root"></div>   <script>(function(d, s, id) {     var js, fjs = d.getElementsByTagName(s)[0];     if (d.getElementById(id)) return;     js = d.createElement(s); js.id = id;     js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";     fjs.parentNode.insertBefore(js, fjs);   }(document, 'script', 'facebook-jssdk'));</script>

Siempre comprueba antes en esta página el código, porque a veces lo cambian.

Copia el código y sitúalo en la cabecera de tu tema antes del cierre </body>, al principio del archivo header.php o casi al final del archivo footer.php. Por supuesto, mejor hazlo en el tema hijo, copiando antes el archivo.

insertar-sdk-facebook-body-wordpress

Guarda los cambios y ya tienes el primer paso hecho. Ahora toca insertar el código del vídeo, que no se hace igual que como hemos visto antes.

Ve al vídeo de Facebook y localiza la URL del vídeo que quieres insertar haciendo clic derecho sobre el vídeo y eligiendo la opción de Show video URL.

Clic derecho Copiar URL del vídeo

Ahora que ya tienes la URL lo insertarás en tu entrada de WordPress con un código así:

<div class="fb-video"   data-href="URL_DEL_VIDEO_AQUI"   data-width="500"   data-allowfullscreen="true"></div>

Sustituyendo la URL del vídeo en la línea data-href, por supuesto, por ejemplo:

<div class="fb-video"   data-href="https://www.facebook.com/david.blancosanchez.965/videos/687382688105966/"   data-width="500"   data-allowfullscreen="true"></div>

Como verás, aquí también hay otros parámetros, los que puedes usar son los siguientes:

  • data-href: simplemente la URL del vídeo.
  • data-widht: el ancho del reproductor.
  • data-allowfullscreen: si permitirás el vídeo a pantalla completa (true) o no (false)
  • data-autoplay: si el vídeo se reproducirá automáticamente (true) o no (false).
  • data-show-text: si se mostrará el texto de la publicación del vídeo (true) o no (false)
  • data-show-caption: si se mostrará el pié de vídeo (true), que solo se ve en ordenador, no en móviles, o no (false).

Como ves hay dos maneras de insertar vídeos en las publicaciones de tu web WordPress, el rápido (arriba) y el modo con reproducción automática, que requiere modificar la cabecera de tu tema. La decisión es tuya.

Sigue leyendo…
2016-11-28  • Fernando

Si quieres saber más sobre lo que ofrecemos en Ayuda WordPress echa un vistazo a los siguientes enlaces …  

Curso de WordPress presencial en Madrid

Hosting especializado WordPress
100% fiable

TU EXPERTO WORDPRESS ONLINE

FORMACIÓN WORDPRESS ONLINE

Facebook Twitter Google Youtube

Ayuda WordPress

Recibes este correo electrónico porque estás registrado en nuestro sitio o has realizado compras.

Darme de Baja

Seguidores

Archivo del blog