Cómo desactivar o cambiar el nivel del medidor de fortaleza de las contraseñas de WooCommerce

Igual no lo sabías, pero WooCommerce tiene una herramienta que fuerza a los usuarios a usar contraseñas fuertes.

No es un sistema de seguridad perfecto pero funciona para la mayoría de los usuarios.

¿Por qué podría querer desactivar el medidor de fortaleza de las contraseñas?

Bueno, se me ocurren varios motivos…

Uno de ellos es el rendimiento. El JavaScript requerido para que funcione el medidor de fortaleza de las contraseñas de WooCommerce pesa nada menos que 400 Kb, y eso que te quitas de la carga de todas tus páginas.

Por otra parte, ¿quién decide cuán fuertes deben ser las contraseñas de tu tienda online, WordPress o tú?

Pues eso.

Vale, quiero desactivar el medidor de fortaleza de contraseñas o cambiarle el nivel de exigencia, ¿se puede?

Pues claro, como todo en WordPress … y WooCommerce.

Aquí tienes unos bonitos códigos, que casi se explican solos…

Cómo desactivar el medidor de fortaleza de contraseñas de WooCommerce

/* Desactivar comprobador de fortaleza de contraseña WC */
function ayudawp_quitar_comprobar_clave() {
if ( wp_script_is( 'wc-password-strength-meter', 'enqueued' ) ) {
wp_dequeue_script( 'wc-password-strength-meter' );
}
} 
add_action( 'wp_print_scripts', 'ayudawp_quitar_comprobar_clave', 100 );

Añadiendo este código al final del archivo functions.php del tema activo o a tu plugin de personalizaciones se desactiva totalmente el medidor de fortaleza de las contraseñas, del todo.


Cómo personalizar el nivel de exigencia en las contraseñas del medidor de fortaleza de WooCommerce

/* Cambiar nivel de fortaleza de contraseñas en WooCommerce */
/* Ajustes de fortaleza
* 4 = Fuerte
* 3 = Medio (por defecto) 
* 2 = Débil pero algo más fuerte 
* 1 = Débil
* 0 = Muy débil / cualquier cosa
*/
add_filter( 'woocommerce_min_password_strength', 'ayudawp_cambiar_nivel_claves_wc' );
function ayudawp_cambiar_nivel_claves_wc( $strength ) {
return 4;
}

Este otro código te permitirá cambiar el nivel de exigencia de fortaleza en las contraseñas y, como indico en los comentarios del código, puedes cambiarlo de 0 a 4, por niveles de fortaleza.

Al contrario de lo que puedas creer, no so lo sirve para rebajar la exigencia de fortaleza, pues el nivel de WooCommerce por defecto es el 3, y puedes exigir contraseñas aún más fuertes cambiando al nivel 4, como en el código de ejemplo.

Y… nada más. Espero que estos trucos te sean útiles alguna vez 🙂

La entrada Cómo desactivar o cambiar el nivel del medidor de fortaleza de las contraseñas de WooCommerce la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

Cómo desactivar el CSS de Jetpack

No estoy en contra de Jetpack. Como todo plugin WordPress tiene sus ventajas y sus inconvenientes, y yo mismo lo uso aquí en Ayuda WordPress y otros sitios, pues hay módulos que son realmente buenos, incluso mejores que plugins especializados.

Ahora bien, tampoco es perfecto, y uno de sus defectos es que no discrimina qué módulos están activos a la hora de cargar el CSS necesario.

Jetpack no carga el CSS necesario para cada módulo por separado, sino que carga una gran hoja de estilos concatenada con los estilos que pueda necesitar cualquier módulo.

La idea de partida es buena, sobre todo si usas varios módulos, pues en vez de lanzar varios archivos CSS solo carga uno, reduciendo la cantidad de peticiones que debe realizar el navegador.

Pero, por otra parte, como contrapartida, se carga mucho más CSS del necesario, la petición resulta en una respuesta de un archivo más pesado y, sobre todo, si no usas ningún módulo que requiera CSS, estás cargando estilos que no necesitas en absoluto.

Por ejemplo, si solo usas Jetpack para las estadísticas, herramientas de seguridad u optimización, no necesitas cargar nada de CSS en portada, pero Jetpack cargará el CSS igualmente.

¿Tiene solución?

Pues sí, hay un gancho oficial de Jetpack que te permite desactivar totalmente la carga del CSS de Jetpack en la web.

Solo tienes que añadir el siguiente código al archivo functions.php del tema activo o a tu plugin de utilidades:

/* Desactivar CSS de Jetpack */
add_filter( 'jetpack_implode_frontend_css', '__return_false', 99 );

Nota: Este gancho de filtro desactiva completamente el CSS de Jetpack, así que si usas algún módulo que deba mostrar algo en la web (entradas relacionadas, iconos sociales, etc.) no apliques esta optimización.

La entrada Cómo desactivar el CSS de Jetpack la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

Cómo crear un botón de llamada a la acción (CTA) en los menús de Divi

¿Te gustaría resaltar algún elemento de tu menú de navegación con Divi? Vas a ver qué cosa más sencilla de hacer y el fantástico resultado…

La idea es destacar uno de los elementos de tu menú de navegación para convertirlo en un botón que atraiga atención, que llame a la acción. O sea, algo así…

Lo vamos a conseguir en solo 2 pasos, y menos de 5 minutos.

Añade un poco de CSS adicional

El primer paso es crear el código CSS que hará la magia. Para ello, como siempre, iremos a la sección CSS adicional del personalizador de WordPress, o sea, en:

Apariencia → Personalizar → CSS adicional

Una vez ahí añade el siguiente CSS:

/* Menú Divi con CTA normal */ 
@media (min-width: 980px) {
.ctamenu {
padding: 0!important;
border-radius: 30px; /* cambiar redondeado del botón */
border: solid 2px #1f769d; /* cambiar el color del borde */
transition: 0.3s;
background-color: #1f769d; /* cambiar el color de fondo */
}
.ctamenu a{
color: #f4f4f4!important; /* cambiar el color del texto del botón */
padding: 10px 15px 10px 15px!important; /* cambiar espacios de relleno del botón */
}

/* Menú Divi con CTA al pasar el cursor */
#top-menu-nav .ctamenu a:hover {
opacity: 1;
}
.ctamenu:hover {
border: solid 2px #fe8400; /* cambiar el color del borde al pasar el cursor */
background: #fe8400; /* cambiar el color de fondo al pasar el cursor */
}
}

Como se indica en los comentarios del código, puedes cambiar el aspecto a tu gusto (colores, espacios, aspecto del botón, etc.). Juega un poco con los valores cuando hayas realizado el siguiente paso…

Añade el identificador CSS al menú

Una vez creado el CSS tenemos que decidir a qué elemento de nuestro menú vamos a aplicarlo.

Sin salir del personalizador de WordPress ve a la sección de menús y, antes de nada, asegúrate de que estará visible la caja en la que añadir clases CSS.

Esto se hace en el icono del rodamiento que hay en la sección de menús del personalizador, marcando la opción de «Clases CSS»

A continuación edita tu menú de navegación y abre el elemento que quieras personalizar, añadiendo en la caja de «Clases CSS» la que creamos en el código, que es ctamenu, como en la siguiente captura:

Cuando guardes los cambios tendrás un menú en Divi en el que habrá  uno de sus elementos resaltado, convertido en un bonito menú que cambia de color al pasar el cursor, pero sobre todo que servirá como CTA, para atraer clics y llevar a tus visitantes a donde quieras orientarles.

Chulo ¿eh?

La entrada Cómo crear un botón de llamada a la acción (CTA) en los menús de Divi la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.