Descubre cómo puedes personalizar el menú hamburguesa que se suele mostrar en móviles mediante código.
El bloque de navegación es el responsable de mostrar el menú en los temas de bloques de WordPress (o temas clásicos que hayan dado soporte). Una de las opciones que permite es mostrar un menú hamburguesa para móviles (y también en escritorio si así lo quieres).
La pega es que solo ofrece dos iconos.
Por suerte, gracias a los estilos de bloques puedes mostrar el icono que quieras.
Vamos a ver cómo:
Snippet para personalizar el icono del menú hamburguesa de WordPress
Asegúrate de que estás usando un tema de bloques (por ejemplo el Twenty Twenty-Five) o que, si estás usando un tema clásico, has dado soporte a las partes de plantilla y tienes una cabecera definida.
A continuación añade el siguiente snippet al fichero functions.php o a tu plugin de funcionalidades:
Para ver este código y los otros 2107 snippets de esta web,
identifícate o suscríbete aquí.
En estos snippets de código utilizas la función register_block_style para registrar nuevos estilos para el bloque de navegación, de forma que cuando tengas el bloque seleccionado te aparecerán los estilos extra:
En todos ellos ocultamos el SVG que añade el bloque nativo (ya que todavía no permite sustituirlo) para añadir el nuevo icono usando el pseudo-selector ::before.
En en los dos primeros usamos solo CSS para crear los 3 puntos (en horizontal o vertical) y en el tercero añadimos un SVG personalizado. Así quedaría en la parte frontal:
Ya ves que con un poco de código puedes ofrecer al cliente opciones extra de personalización del menú móvil. Y estos son unos pocos ejemplos de lo que puedes conseguir.
Conclusiones
Gracias a los estilos de bloques puedes personalizar el bloque de navegación de WordPress para que muestre el icono que tú quieras en móvil (o escritorio si así lo eliges).
Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.
Todo ventajas de ser suscriptor. 😉
