Hoy sacamos la nueva web de un cliente: Escuela de Bonsai Online. Un sitio web que está pensado para proveer toda la formación posible sobre el mundo del bonsai. Talleres, video tutoriales, tienda con material, cursos… Como veis la web es visualmente muy atractiva, siguiendo los parámetros de la marca, con las vertientes más importantes de la misma en la portada, y mucho contenido extra en los diferentes apartados. Esperemos la disfrutéis.
Cuando tienes una página con WooCommerce, y añades el plugin más conocido de SEO, el Yoast SEO, lo más seguro es que veas que tu backend de productos se descoloque. Se ven nombres a los lados y cada fila es mucho más alta que antes.. Lo que está pasando es que Yoast SEO añade unas columnas a un, ya por sí lleno, listado de productos. Y como no cabe bien se descoloca. Cuando queremos solucionarlo, siempre pensamos en cosas complejas como Snippets, funciones o trucos CSS. Pero es mucho más sencillo. Aquí os dejamos cómo solucionarlo.
Las webs multilingües son muy habituales hoy en día y, para nosotros, el mejor plugin para ello es WPML. Es de pago, si, pero no es excesivo y el plugin es potentísimo. Una de las cuestiones que nos salió hace poco con una web de este estilo, con varios idiomas, era cómo ocultar contenido para ciertos de ellos. Es decir, mostrar algo para unos idiomas y ocultarlo para otros. WPML permite definir widgets según idioma, pero hay ciertos componentes que o no son compatibles, o no se puede hacer ese cambio. Así que la opción es o quitarlo por Snippet, o quitarlo por CSS. Hoy os enseñaremos a hacerlo de las dos maneras Ocultar contenido con un Snippet. Podemos añadir el siguiente código en functions.php del tema hijo o en un Snippet para mostrar el código según el idioma. Ocultar contenido por CSS según el idioma. Para ello vamos a usar el siguiente código: html[lang=”código idioma”] claseoid {display:none;}Por ejemplo html[lang=”en-US”] #Footer .widgets_wrapper {display:none;}
Muchos de los ataques a páginas web son por scripts o robots que primero “inspeccionan” la web para ver sus vulnerabilidades. Preguntan cosas como la versión del gestor de contenidos, versión de php etc. Están buscando agujeros de seguridad, y ocurre constántemente. Por esto nos gusta este firewall que hemos encontrado para .htacess (Apache). El creador ha recopilado una serie de peticiones o queries que son maliciosas y con contenido potencialmente dañino (como eval(, base64_ ..), y ha creado una lista para que podamos bloquearlas. Lo interesante es que este bloqueo se realiza a nivel de servidor, antes del acceso a la página. Así que, al bloquear estos intentos de acceso, también mejora el rendimiento de la misma. nG Firewall, como decimos, es una lista de queries maliciosas que, en el momento de escribir el artículo está en su versión 6G. La manera de implementarlo en cualquier web es sencillo, añade la lista de exclusiones que da a tu fichero .htaccess. El Apache, al leerlas, se encargará de bloquear estos accesos indebidos.La lista está dividida en secciones, y puedes añadir todas, o sólo alguna de las secciones (son independientes). Aunque están muy probadas, mira el artículo de tu nG antes sobre las notas de implementación y su sección de troubleshooting. # 6G:[QUERY STRING] # 6G:[REQUEST METHOD]# 6G:[REFERRER] # 6G:[REQUEST STRING] # 6G:[USER AGENT] # 6G:[IP ADDRESS] Firewall ligero para WordPress: BBQ: Block Bad Queries Si tienes WordPress, es más fácil implementar este firewall. Puede servir tanto como capa añadida de seguridad a lo que tengas de firewall, o como solución ligera y sencilla para aquellos a los que el alojamiento o los conocimientos no les deje usar soluciones más complejas. BBQ: Block Bad Queries implementa el firewall nG, con añadidos que te permite gestionarlo de modo gráfico. Un plugin muy interesante a tener muy en cuenta.
Nos han pedido recientemente, que el enlace de algunos de los productos de su tienda WooCommerce, vaya directamente a una página externa.WooCoomerce tiene algo parecido, los productos externos o de afiliados, pero para ir al enlace tienes que entrar en el producto. La idea es que al pinchar en la imagen de cualquier página donde esté listado el producto, esta te lleve al enlace externo. Cómo enlazar productos de WooCommerce con páginas externas. El proceso consta de dos pasos. Lo primero es que, en nuestra solución (mencionaremos otras) creemos los productos como externos con la opción de producto de WooCommerce y pongamos ahí la url.Nos ha parecido más sencillo y cómodo para los usuarios así. La segunda es crear un Snippet (como siempre puedes editar functions.php de tu tema hijo también) que detecte si son productos externos y cambie la url por la personalizada. Os dejamos este posible código: add_filter( ‘woocommerce_loop_product_link’, ‘cambiar_permalink_prod_externo’, 99, 2 ); function cambiar_permalink_prod_externo ( $link, $product ) {$this_product_id = $product->get_id();if ($product->is_type( ‘external’ ))$link = $product->add_to_cart_url();return $link;} Este Snippet podemos modificarlo de muchas maneras: Cambiar el enlace sólo para unos artículos (ponemos como ejemplo un enlace interno): if( $this_product_id=== 25 ) $link= ‘/enlaceinterno’;return$link; Poniendo un campo personalizado en el producto, por ejemplo con ACF, y su valor como URL. Espero que os sirva. Mejora 2021. Un cliente nos pidió que los enlaces externos se abrieran en una nueva pestaña. Aquí tenéis la modificación.
Prestashop tiene unas medidas básicas de seguridad, como ponerle un nombre aleatorio a la carpeta de administrador (adminXXXX). Pero si quieres asegurar algo más tu tienda, puedes añadir otra capa de seguridad: una contraseña adicional.Con el método de este artículo, cuando un usuario intente entrar en la dirección https.//tudominio.com/adminXXX el navegador mostrará una ventana emergente pidiendo un usuario y contraseña que es independiente de la web, se configura en el servidor. Así que, aunque te hayan descubierto los datos de usuario y contraseña de la web (de alguna otra manera), no podrían entrar en tu backend. Cómo proteger la carpeta de administrador. El proceso es el siguiente: Creamos un fichero llamado .htpasswd en algún lugar de nuestro servidor (fuera de las carpetas de la web es mejor, para que no puedan descubrirlo hackeando la web. El contenido está encriptado, lo podemos crear con una web como esta (o esta). Sólo copiamos el contenido que nos da al final, tras poner el usuario, la contraseña y dar a Create .htpasswd file. Una vez generado el fichero, vamos a la carpeta de administrador del Prestashop y creamos un fichero llamado .htaccess con el siguiente contenido.AuthType Basic AuthName “Acceso restringido con contraseña” AuthUserFile /home/user/.htpasswds/public_html/wp-admin/.htpasswd require valid-user AuthUserFile tiene la ruta del fichero .htpasswd Es importante que el usuario web tiene que poder leer el fichero htpasswd. Comprueba los permisos de htacess y htpassd si tienes errores. Ahora cuando intentes entrar te pedirá una contraseña previa. Buen método para mejorar la seguridad de tu Prestashop. Cuando hagas esto puede dejar de funcionar alguna función de tu web dependiendo de si esta requiere un fichero en ese directorio (no debiera pero cada web es diferente). Si es así, sólo hay que excluirlo. También por .htaccess podemos limitar el acceso sólo a una IP (o denegar otras). Por ejemplo: order deny,allow allow from XXX.XXX.XXX.XXX (tu ip) deny from all
Tras probar muchos, llevamos unos días usando este plugin gratuito de WordPress y, la verdad, estamos muy contentos con todas sus opciones. Simple Membership es el típico plugin para gestión de “membresías“. Es decir para crear contenido protegido para ciertos usuarios dependiendo de su nivel de suscripción. El plugin te permite crear “niveles de membresía” y gestionar que algunas sean gratuitas y otras de pago. Pero tiene muchísimas opciones adicionales como: Poder mandar correo de confirmación. Registro de usuarios en el propio plugin independiente (o sincronizable) de WordPress. Pagos recurrentes y únicos por Paypal o Stripe. Registro de pagos en el propio plugin. API para desarrolladores Widget para barras laterales. Shortcodes generales y para tipos de membresía. Caducidad de las membresías. Protección de contenido personalizable en cada entrada (incluso tipos custom), categoría o página. Pero también permite proteger por defecto todas las categorías, incluso aquellas que crean otros plugins. Registro en el panel del contenido protegido. Plugin gratuito para redirigir tras el login. Plugin de pago para configurar el formulario de registro. Muchos otros plugins gratis y de pago. Integración por plugin con MailChimp. WooCommerce, reCaptcha y mucho más. Una documentación útil con muchas soluciones que demandamos los usuarios. Muchas opciones de configuración de urls, redirecciones e e-mails a clientes. La verdad es que todos lo que hemos pedido de este plugin lo hemos podido solucionar sin desarrollos extra y, como mucho, adquiriendo plugins de pago (se lo merecen). Una gran opción si quieres un sitio con registro de usuarios y contenido restringido en varios niveles.
Desde que salió la nueva RGPD, los expertos han ido variando los criterios que debemos implementar en los formularios de la web. Nosotros, nos guiamos por ellos y aquí vamos indicando cómo implementar sus indicaciones. En este caso hablamos de guardar el registro de las aceptaciones de la política de privacidad para cada usuario. Como técnicamente no se puede enviar el formulario sin aceptar dichas condiciones, al principio muchos no lo consideraban importante. Pero ahora muchos creen que sí. Y nosotros, ante la duda, preferimos cumplir todos los requisitos. Mejor prevenir que curar.Así que tenemos que guardar un registro de que el usuario haya aceptado la política de privacidad al enviar el correo. Os indicamos ´como hacerlo con Contact Form 7 (el más usado) en WordPress. Cómo guardar el registro del apartado de la casilla de aceptación con Contact Form 7. Hay dos maneras de realizar esto (se pueden implementar ambas). Opción 1. En Contact Form 7 podemos hacer fácilmente que el correo que nos llegue incluya el resultado de la casilla de aceptación.Esto implicaría guardar los correos como registro de aceptación en nuestro buzón, o en psts. Pero es una forma sencilla y para muchos muy cómoda. También indicado cuando el que va a recibir los e-mails es un departamento distinto del que gestiona la página web.Os indicamos cómo hacerlo en este vídeo. Opción 2. Para muchos es mejor guardar este registro en la base de datos, en el backend de WordPress y poder comprobarlo rápidamente ahí. Para ello lo mejor es instalar un plugin que te guarde un registro de los envíos de los formularios, junto a esa casilla de aceptación. Os recomendamos alguno, antes de elegir cual, comprobad hace cuando se ha actualizado y si es compatible con vuestra versión de WordPress. Tiene la ventaja de sencillez y poder exportar los resultados a un Excel. Contact Form 7 Database Addon. Muy usado desde hace años. En ocasiones ha tenido problemas con WordPress pero como todos los plugins veteranos. En estos momentos está activo y muy actualizado. Flamingo. Ya hablamos de él hace tiempo. El favorito de muchos, aunque en el momento de escribir este artículo, incomprensiblemente lleva 9 meses sin actualizar. Advanced Contact form 7 DB: lleva menos tiempo pero con buen número de descargas, actualizado y buena puntuación. Contact Form Submissions: durante mucho tiempo uno de los más usados. Pero lleva 1 año sin actualizar, si no se actualiza no recomiendo instalarlo.
La semana pasada descubrimos este truco muy útil para los que hacemos páginas web. Se pueden ocultar elementos, o modificarlos, para usuarios registrados mediante CSS. Esto permite que añadamos capas o avisos sólo para usuarios no registrados, cambiar el color de ciertos elementos para usuarios que están “logados” y una infinidad de aplicaciones y personalizaciones. ¿Cómo? Muy sencillo, WordPress añade una clase a todos los elementos, al principio del contenido cuando se ha iniciado sesión en una página. Así que sólo tenemos que poner esa clase delante de la clase que queremos afectar. Por ejemplo si tenemos una capa con clase avisoregistro, podemos ocultarla para usuarios registrados así: .logged-in .avisoregistro {display:none;} Obviamente si es un id se puede hacer igual. Nosotros lo hemos usado para, por ejemplo, ocultar pop ups de registro para usuario que han iniciado sesión. Para hacer lo contrario, es decir ocultar cosas si no ha iniciado sesión, podemos poner: boddy:not(.logged-in) .avisoregistro {display:none;} Es decir, si el cuerpo no tiene la clase logged-in, no muestres esa clase de avisoregistro.
Cuando implementas una tienda online, una de las cosas que la gente quiere es un filtro de productos. Es algo que queda muy bien, y da mucha usabilidad a la página.Los clientes pueden filtrar por precio, tipo de producto, color etc. Esto, en las nuevas versiones de Prestashop, es de pago. Pero, afortunadamente, en WooCommerce hay plugins gratuitos. Os dejamos unos cuantos (y así los tenemos nosotros de referencia para nuestros proyectos). WOOF – Products Filter for WooCommerce. Buen plugin que permite filtrar por categorías, atributos, etiquetas de productos, taxonomías personalizadas y precio. Tiene una API, puedes usar shortcodes en Widgets y ver una demo aquí. YITH WooCommerce Ajax Product Filter : YITH dispone de varios plugins gratuitos para WooCommerce muy útiles e interesantes. Este es uno de ellos. Podéis ver una demo aquí y la documentación aquí. Premmerce Product Filter for WooCommerce: Otra buena opción. Aquí tienes la demo. Advanced AJAX Product Filters: La demo aquí. Con estos plugins tenéis varios para probar y diseñar un buen filtro de productos.
