Diseño Web

Código Worpdpress, Diseño Web, Plugins Wordpress

Woocommerce: desactivar el resto de métodos de envío si el envío gratuito está activado.

/

En el vídeo sobre la configuración de los métodos de envío de Woocommerce, os comentamos que el envío gratuito tiene un problema en la instalación por defecto. Cuando se activa el envío gratuito, aparece junto a todo el resto de métodos. Es decir, el cliente verá métodos de envío con coste, y el gratuito. Cosa que, obviamente, no es muy deseable. Porque algún cliente puede equivocarse y pagar cuando no es necesario (y luego quejarse). Hoy os explicamos cómo solucionarlo. Cómo desactivar el resto de métodos de envío si el envío gratuito está activado en Woocommerce.. Woocommerce no tiene esta opción por defecto. Pero si que dan la solución en este post. Puedes hacerlo con o sin plugin. Con plugin: puedes usar un plugin como este: https://wordpress.org/plugins/wc-hide-shipping-methods/. Pero recordad que cuando más añadas a tu web, más lenta y más problemas de seguridad. Sin plugin: nosotros recomendamos, cuando sea posible, resolver estos problemas con código. Se puede, como siempre, añadir el código en el fichero functions.php de tu tema hijo, o usando un plugin como Snippets (uno que sirve para añadir muchos fragmentos de código).Este es el código que podemos usar: En el enlace de Woocommerce que hemos dejado arriba, aparecen varias versiones del código para permitir recogida en local además de envío gratis, y cómo habilitarlo o deshabilitarlo según zonas. En este vídeo explicamos cómo funciona el código y cómo activarlo.

Diseño Web, Gestores de contenidos

Configurar gastos y métodos de envío en las tiendas online de Woocommerce.

/

Woocommerce es el plugin de tiendas online más usado en el CMS más usado del mundo, WordPress. Cuando alguien quiere crear una tienda online con este plugin, una de las primeras cosas que tiene que hacer es configurar los gastos y métodos de envío. Y no es muy intuitivo. En este artículo os lo explicamos. Cómo configurar gastos y métodos de envío en tu tienda de Woocommerce. En este vídeo os explicamos los pasos para configurar el envío en Woocommerce. En resumen: Define unas zonas de envío. Son los sitios que vas a querer poner un precio de envío o un modo de envío. Dentro de ellas define métodos de envío. Woomcere deja 3: precio fijo, envío gratuito o recogida en tienda. Para otras opciones tienes que instalar plugins adicionales. `Puede haber varios métodos de envío en una misma zona. Si la dirección de envío del cliente es de una zona que no tiene método de envío definido, no le dejará realizar el pedido. Woocommerce pone una zona para aquellas zonas no cubiertas por las que has creado. Tu decides si ponerle método de envío o no según quieras o no enviar fuera de tus zonas. Por defecto el envío gratuito, cuando se cumplen los requisitos se muestra junto al resto de envíos de esa zona. Como esto no es deseable, mañana os enseñamos a evitarlo. Las zonas y los métodos de envío tiene prioridad de arriba a abajo. Pon las que quieres que lea antes encima. Las clases de envío son etiquetas que se pueden poner en los productos para darles un coste adicional de envío. Se crean fuera pero se asignan en los productos. Hay que definir el sobrecoste de cada clase en cada método de envío de cada zona. Las clases admiten operaciones matemáticas en el cálculo del coste. Permite los operadores de cantidad, coste y porcentaje (pincha en la ? de al lado del coste de clase en un método de envío para ver la explicación. Si tienes impuestos, en la pestaña impuesto o en cada impuesto define si hay que aplicarlo al envío (en España el envío va con IVA). La semana que viene lo explicamos. Esperamos que este vídeo os sirva para explicarlo.

Diseño Web, Gestores de contenidos

Atributos y variaciones de productos en Woocommerce. Cómo poner tallas, colores etc en tu tienda online.

/

Estas son algunas de las preguntas recurrentes en clientes que tienen sus tiendas con Woocommerce: ¿Qué son los atributos en Woocommerce? ¿Cómo se crean productos variables? Como añadimos color, tallas etc en productos de Woocommerce? Hoy os intentamos resolver dichas preguntas. Cómo crear atributos y productos variables en Woocommerce. Los atributos en Woocommerce se pueden usar para dos cosas principalmente: Añadir etiquetas a los productos para luego poder filtrarlos en la tienda con esas etiquetas. Usar esos atributos para crear productos variables. Son variaciones del mismo producto con características diferentes que pueden tener stock diferente, precio diferente… En el vídeo os explicamos cómo añadir atributos a los productos, y cómo usarlos tanto para filtros como para crear productos con diferentes variaciones. Os dejamos varias notas: Los atributos pueden crearse a nivel de producto o nivel global (toda la tienda). Recomendamos lo segundo. Los atributos pueden marcarse para mostrarse o no en la tienda. Los atributos pueden marcarse como aptos para crear variaciones o no. Para crear variaciones el producto debe cambiarse a variable. Las variaciones puede crearse automáticamente o manualmente. Cada tienda es diferente, tendréis que decidirlo vosotros. Puedes luego ir a cada variación y cambiar todos los detalles: imagen, precio, inventario, descripción, tamaño, peso… Recordad que las variaciones tienen que tener precio y mostrar si están “en stock” o no para poder aparecer en la tienda. Aquí podéis verlo:

Diseño Web, Gestores de contenidos, Información Tecnica, Internet

Qué son los enlaces nofollow y dofollow y cómo se usan en WordPress

/

Los enlaces dofollow y nofollow son opciones que tenemos para categorizar los enlaces en nuestra págian web y poder indicarle a los robots de los buscadores si queremos que sigan esos enlaces o no. ¿Qué pasa cuando un robot sigue una enlace (interno o externo) en nuestra web? Dos cosas: los robots pueden indexar esa página, porque “aprenden” de ella. el que nuestra web enlace a otras les transfiere nuestra “autoridad”, nuestra importancia SEO (por poca que fuera). Puede no interesarnos que pasa alguna de las cosas anteriores. Es decir podemos no querer indexar una página (un Aviso Legal o un enlace de inicio de sesión) o podemos no querer transferir nuestra autoridad SEO a otra web (es una especie de regalo que le hacemos). Nosotros decidimos a quien asignar cualquiera de los dos privilegios. Lo que hay que tener claro es que todos los enlaces por defecto son dofollow. No hay que hacer nada para crear un enalce dofollow. Así que la herramienta que tenemos son los enlaces nofollow, que creamos poniendo rel=”nofollow” en el código del enlace. Pero, ¿cómo se hace eso en WordPress? En el siguiente vídeo os explicamos todo sobre estos tipos de enlace y cómo usarlos para las entradas, páginas, imágenes y menús de WordPress.

Código Worpdpress, Diseño Web, Gestores de contenidos, Trucos

Añadir un menú de inicio de sesión y cierre de sesión en WordPress.

/

Como prometimos en el pasado vídeo, y siguiendo el orden de “tutoriales” o trucos de WordPress, hoy queremos enseñar a crear unos elementos de menú de inicio de sesión y de cierre de sesión. Elementos de menú que, además van a desaparecer según tengamos la sesión iniciada o no. Es decir, si no hemos entrado con nuestro usuario, aparecerá el menú de inicio de sesión, pero no el de cierre, y si estamos con nuestro usuario iniciado, aparecerá el de cierre de sesión pero no el de inicio. Vamos a necesitar añadir unos códigos de CSS para que aparezcan y desaparezcan los menús, y un código de php para evitar que WordPress pida confirmación en el cierre de sesión. En varios pasos necesitaremos códigos o conceptos que hemos usado en artículos pasados. Cómo añadir menús de login y de logout en WordPress. Estos son los pasos: Lo primero que vamos a hacer es añadir unos menús personalizados: – Login o Iniciar sesión, con url: https://tudominio.es/wp-login.php. – Logout o cerrar sesión con url: https://tudominio.es/wp-login.php?action=logout A esos menús vamos a añadirles unas clases, para poder modificar su comportamiento por CSS. Para eso necesitaremos el artículo de opciones avanzadas de los menús de WordPress.En el vídeo, como ejemplos (puedes usar otros) pusimos: – A login la clase loggedok – A logout la clase loogedko. Vamos a añadir un código CSS para ocultar el menú de Login si la sesión ya está iniciada. Para ello vamos a usar este código: Para ocultar el menú de Logout si no tienes la sesión iniciada tienes dos opciones:A) Ocultar por defecto el menú y desocultarlo si estás registrado. Nota: como explicamos en el vídeo, debería funcionar sin important, pero en muchas plantillas no funciona. Si no funciona, no nos gusta tanto como la opción B, porque el uso de important en el CSS debe limitarse lo máximo posible. B) Usar el identificador not() de CSS para ver si no tiene la clase que pone WordPress cuando tiene la sesión iniciada. Con eso ya estaría, pero si pinchas en cerrar sesión, verás que WordPress pregunta al usuario si quiere cerrar dicha sesión. Esto no queda muy elegante. La razón es que, para no preguntarlo, WordPress necesita un código de sesión (wpnonce), que cambia cada vez y no podemos ponerlo estático en nuestra url. Así que vamos a poner el siguiente código en el functions.php de nuestro tema hijo o en nuestro plugin de Snippets: Este código comprueba si hay un cierre de sesión sin wpnonce y, si es así, cierra sesión y redirige a la página de Inicio. En este vídeo os explicamos todo:

Código Worpdpress, Diseño Web, Gestores de contenidos

Quitar o restringir el backend a ciertos roles de usuarios en WordPress.

/

Ayer compartimos un vídeo sobre cómo quitar la barra de administración para ciertos roles de usuarios de WordPress. Y prometimos subir este vídeo sobre cómo restringir el backend. Pues aquí lo tenéis. Cómo restringir el backend sólo a ciertos roles de usuarios de WordPress. El proceso es sencillo, al código de ayer añadimos el siguiente código: Como veis, y si leísteis el artículo de ayer, hemos usado el código que está comprobando las capacidades del usuario actual. En este caso miramos si puede editar páginas (admin o editor), pero podéis usar el del rol que queráis. Os dejamos aquí un listado de roles y capacidades. Con este código, sólo los administradores y editores, podrán acceder al backend. El resto de usuarios serán redirigidos a la página principal al registrarse. Os lo explicamos en este vídeo.

Código Worpdpress, Diseño Web, Gestores de contenidos, Trucos

Quitar la barra de administrador de WordPress según los roles de usuarios.

/

Cuando tienes una web que admite usuarios, algo muy solicitado es que ciertos roles de usuario no puedan ver la barra de administración. Hoy vamos a ver como hacerlo. Nota: es cierto que, en esas ocasiones, también solemos querer que esos roles no puedan acceder al backend. Mañana explicaremos cómo hacer esto. Lo hemos separado para simplificar, y porque no siempre se necesitan ambas cosas. Cómo quitar la barra de administrador de WordPress para ciertos roles de usuario. Lo vamos a hacer directamente con un código porque no creemos que sea necesario un plugin para esto. Recordamos que el código hay que ponerlo en un plugin de Snippets o en el fichero functions.php. En este código ponemos los roles que queremos que tengan la barra donde he marcado en azul. El código comprueba el rol del usuario y, si no es parte de esa lista, no muestra la barra. En este vídeo lo explicamos. Opción 2. En internet veréis otros códigos que miran las capacidades de los usuarios. Me parecen menos correctos y más difíciles porque tienes que conocer las capacidades de cada rol.. Pero os dejo un ejemplo que quita la barra para el administrador y para editores (que pueden editar páginas ) . Opción 3. También se puede “ocultar” con CSS. No lo recomendamos porque sólo la oculta, no la quita. Pero si no sirven las anteriores, puede ser útil. Añade esto en tu código de CSS. Quitar la barra de administración para un usuario específico. Lo dejamos al final, porque no suele ser frecuente. Pero si quieres quitarla sólo para un usuario, en su perfil, desde el backend, tienes una casilla que puedes desmarcar: Mostrar la barra de herramientas al ver el sitio.

Código Worpdpress, Diseño Web, Trucos

Añadir un icono de carrito en el menú de WordPress sin usar un plugin.

/

Algunas plantillas de WordPress incluyen icono de carrito en el menú de tu tienda de Woocommerce en WordPress.. Otras no. Y si no lo incluyen, muchos optan por usar plugins para añadirlo. Pero ya hemos dicho que no somos partidarios de instalar muchos plugins: son posibles vectores de ataque, y ralentizan la web. Siempre es mejor encontrar una solución sin plugin. Hoy os la dejamos. Cómo añadir el icono de carrito en un menú de WordPress. Aunque mucha gente no lo sabe, WordPress viene integrado con una serie (una librería) de iconos llamados Dashicons. Los carga “de serie”. Así que vamos a usarlos (al final os mostramos cómo hacerlo si quieres usar otra librería). El proceso es el siguiente: Vamos a copiar la url de tu carrito. La puedes encontrar en Woocommerce->Ajustes -> AVanzado. Copiala. Ve a la página de Dashicons (os la hemos dejado más arriba) y busca el icono del carrito. Lo tienes aquí. Pincha en Copy Html y copia el código que te da. Es el siguiente: Ve a Apariencia->Menus y crea un nuevo elemento de menú.personalizado. En la url pon la dirección de tu carrito. En Texto del enlace pon el código encima de estas líneas. Guarda el menú. Si ahora refrescas la página verás que tienes el carrito. Usar otra librería de iconos. Si, por alguna razón, no te funciona Dashicons o no quieres usarla, puedes usar otra librería de iconos. Investiga tu plantilla porque puede que incluya una (suelen hacerlo). Cómo poner cada icono depende de la librería. Si no, puedes instalar un plugin como Font Awesome para añadir dicha librería, y buscar y usar el icono de carrito de Font Awesome. Aquí tenéis un vídeo explicando el proceso: Hemos dicho sin plugins…pero si quieres uno puedes usar este.

Código Worpdpress, Diseño Web, Trucos

Enlazar el título de entradas de WordPress a urls externas.

/

Hace unos días un cliente nos pidió que, para ciertas categorías, las entradas pudieran redireccionar a direcciones (urls) externas. Esas entradas van a ser títulos de artículos de medios externos, Quieren que estén en su blog, y tener el listado de artículos y sus fechas, pero que, al pinchar en el título, te redireccione al artículo en el medio externo. Hoy os dejamos el código que creamos para el cliente, porque no hemos encontrado nada en Internet. Por si os es útil. Recordamos que, para poner el código en tu página, tienes que, o ponerlo en el archivo functions.php de tu tema hijo, o en un Snippet. La base es que, además del código, vamos a poner, en cada entrada que queremos redireccionar, un campo personalizado que vamos a llamar enlace (pero cuyo nombre podemos cambiar como veremos más abajo). Ahí pondremos el enlace externo de cada entrada. Código para enlazar el título de entradas con enlaces externos. Este es el código que usamos. Os explicamos el código: Podéis poner donde pone a,b,c los nombres de categorías, IDs slugs de cuyos posts queremos redireccionar las entradas. Podéis cambiar donde hemos puesto enlace el nombre del campo personalizado que vamos a crear para poner las direcciones externas. Una vez activad el código, tenemos que agregar un campo personalizado en cada entrada de esa categoría, llamado enlace, y ahí pondremos el enlace externo. Variantes del código. Si lo que queremos es sólo redireccionar uno o varios posts pero sin categoría podemos hacer lo siguiente: Aquí hay que sustituir las xx por los IDs de los enlaces que queremos redirigir. Y podemos poner tantos como queramos añadiendo ·los OR, || ( $post->ID == xx) Esperamos que el código os sea útil.

Diseño Web, Gestores de contenidos

Opciones avanzadas del menú de WordPress

/

Como parte de nuestros tutoriales de WordPress (con los que estamos haciendo un curso online basado en nuestra experiencia con las páginas web) hemos visto que necesitábamos explicar las opciones avanzadas del menú de WordPress. Así que os las dejamos aquí por si os vienen bien. Pocos usuarios conocen que existen estas opciones, y sin embargo tienen funcionalidades muy ´útiles para el usuario medio. Son las siguientes: Poner un atributo de título en el enlace. Hacer que se abre el enlace en una pestaña nueva (destino del enlace). Esto es muy útil y ya lo explicamos en este artículo. Puedes poner una clase CSS al elemento de menú. De nuevo algo muy útil que usaremos mucho en los próximos artículos/vídeos. Poner una etiqueta XFN al elemento. Esto es para expresar la relación que el enlace tiene con tu página. Usando el XTHML y su etiqueta rel. Más pensado para blogs. PERO tiene una utilidad muy interesante que es poner una etiqueta nofollow (ue los robots no sigan ese link) a ese enlace. En unos días os lo explicamos con más profundidad pero es muy interesante para el SEO. Añadir una descripción, interesante para temas de accesibilidad (lectores de texto etc) y por lo tanto también para el SEO. En este vídeo os explicamos: Cómo activar y qué son las opciones avanzadas del menú de WordPress.

Scroll al inicio