Crea menús en WordPress con el bloque Navegación

Desde hace varias versiones WordPress está evolucionando en una dirección concreta. Lo que en un principio era una actualización del editor de entradas y páginas, poco a poco va abarcando más herramientas de WordPress. Si habéis probado el tema Twenty Twenty-Two, introducido en WordPress 5.9, habréis notado como la sección Apariencia ha cambiado bastante. Y que, entre otras pérdidas, ya no aparece la sección para crear menús en nuestra web. ¿Desde dónde los podemos crear?.

A partir de ahora vamos a crear nuestros menús de forma diferentes en todos los temas y plantillas creados pensando en el nuevo editor de WordPress. Quizás si estás usando un tema que no le afecte, y tendrás tu sección de Menú donde siempre. Pero poco a poco, todos los temas se irán actualizando, o usarás algún tema nuevo que use el nuevo editor de forma predeterminada. Por lo que nuestra mejor opción es saber desde ya como hacer esto. En nuestro caso, usaremos el tema Twenty Twenty-Two como ejemplo para trabajar, ya que lo tenemos todos a mano para usarlo y hacer nuestras pruebas.

Para crear menús, ahora usaremos un nuevo bloque llamado Navegación. Este es uno de los muchos bloques que se han ido añadiendo para complementar el nuevo editor de plantilla de WordPress. Eso si, estos bloques no son exclusivos del editor de plantillas, por lo que podemos usarlo tanto en el editor de entradas como en el de páginas sin problemas. Así que lo primero es saber como funciona este nuevo bloque Navegación y que nos va a permitir hacer, además de como podemos personalizarlo, y como gestionar si tenemos varios menús en nuestra web.

Conociendo el nuevo bloque Navegación

Hasta ahora, si habíamos creado un menú en WordPress, teníamos algo parecido a lo de la siguiente imagen.

Nuestro menú dentro de la sección Personalizar del panel de administración de WordPress. Si activamos el tema Twenty Twenty-Two, como hemos dicho antes, no tendremos estas opciones. Por tanto, vamos a irnos al editor Gutenberg y vamos a seleccionar el bloque Navegación dentro de los disponibles, ya sea explorando la lista de bloques o usando el buscador. Una vez seleccionado, tendremos algo así:

Una vez abierto, vemos como tenemos tres opciones. Si elegimos Seleccionar el menú, nos van a aparecer una lista con todos los menús que hayamos creado en nuestro WordPress. En mi caso, como tengo un menú creado de la forma antigua, me aparecerá en el desplegable dentro de Menús clásicos con el nombre que le haya dado.

Si clicamos en él, automáticamente aparecerá todos los elementos de nuestro menú clásico dentro del bloque que acabamos de crear. Una forma muy sencilla de pasar de los menús clásicos a los basados en bloque.

Vemos que hay otro menú llamado Navegación. Este es el menú que hemos creado al añadir el bloque Navegación. Más adelante veremos como poder cambiarle el nombre al menú para que tenga uno más adecuado a su contenido, y que nos resulte más sencillo localizarlo. La siguiente opción llamada Añadir todas las páginas, como bien dice su nombre, nos creará un menú con todas las páginas de nuestra web. Por último, tenemos la opción Iniciar vacío, que nos va a permitir crear un menú desde cero. Estas son las opciones básicas del bloque Navegación. Al final del artículo hablaremos sobre todos los ajustes que le podemos hacer cuando hablemos de como personalizarlo. Pero en primer lugar, vamos a ver como crear un nuevo menú desde el editor y añadir diferentes elementos.

Creando un nuevo menú desde cero

Como queremos aprender como funciona este bloque Navegación para crear un menú, nos pondremos en la situación de que no tenemos ningún menú creado anteriormente. Así que, haremos clic en Iniciar vacío, y nos encontraremos con esto:

Simplemente han desaparecido todos las opciones que teníamos, y ha aparecido un símbolo +, que nos ayudará a añadir los elementos de nuestro menú. Antes de seguir, un par de consejos. Cuando trabajemos con el nuevo editor, es recomendable tener abierto tanto la Vista de lista (panel izquierdo, se abre con el icono de las tres rayas), como los Ajustes del bloque (panel derecho, se abre con el icono del engranaje). Hago hincapié con la Vista de lista, ya que no solo nos va a permitir ver los diferentes bloques que hemos ido añadiendo, sino que nos va a facilitar mucho seleccionarlos y moverlos. Estas dos acciones también las podemos realizar directamente desde el propio panel central de edición, pero resulta mucho más ortopédico, y es más propenso a fallos o que no coloquemos un elemento en la posición exacta que queremos. Los que trabajáis con capas en programas como Photoshop o Illustrator seguro que estáis acostumbrados a un panel parecido.

Añade páginas y entradas de tu web

Vamos a añadir un primer elemento al nuevo menú. Empezaremos por una página de nuestra propia web. Si hacemos clic en el cuadrado negro con el símbolo + que nos ha aparecido, se nos abrirá un panel emergente con una lista de las últimas entradas/páginas de nuestra web. Y al lado de cada una de ellas, se nos muestra si es una entrada (post) o una página (page). Si no vemos la entrada o página que queremos insertar, siempre podemos hacer uso del buscador.

Una vez la tengamos localizada, solo tenemos que hacer clic en ella para que se añada al menú. Por supuesto, si queremos que la página que hayamos añadido tenga un nombre diferente en el menú que el que tiene la página, solo tendremos que modificarlo dentro del propio editor.

Muy importante saber que, cada vez que vayamos a añadir un nuevo elemento al menú, tener seleccionado el bloque Navegación. Esto lo vamos a comprobar fácilmente ya que estará seleccionado en la Vista de lista.

Añade URLs externas

Añadir un enlace externo es un proceso parecido al anterior. En este caso, vamos a escribir el enlace externo que queremos agregar a nuestro menú en el buscador, y aparecerá con la designación URL al lado. Si hacemos clic en él, ya lo tendremos dentro.

Por supuesto, aquí también podemos cambiar el nombre del elemento del menú, ya que por defecto veremos una URL no muy amigable visualmente. Esta ha sido mi elección.

Añade otros elementos

Ya hemos terminado de explicar como insertar enlaces básico, pero vamos a meternos en elementos más avanzados. Cuando hacemos clic en el botón para añadir elementos al menú, si hacemos scroll en el panel emergente veremos una sección llamada Transformar. Aquí hay varios bloques que podemos agregar, como son el título del sitio, iconos sociales o un buscador.

Cada uno de estos bloques tienen sus propias opciones. Uno de los más interesantes es el de Iconos sociales, ya que nos permitirá añadir enlaces dentro de él a cada una de las redes sociales que queramos dentro de la larga lista que nos ofrece WordPress. Además de poder personalizar esos iconos a nuestro gusto. Dentro del panel de ajustes de Iconos sociales, podemos cambiar el estilo del icono, su color, su color de fondo, el espaciado entre los iconos… Os animamos a explorar un poco y ver sus posibilidades.

Creando submenús

Por último, pero no por ello menos importante, vamos a ver como hacer submenús. Lo primero es seleccionar el elemento del menú que queremos que albergue este submenú. Si nos fijamos en la barra de herramientas, veremos un icono con tres rayas y una flecha curvada señalando hacia abajo. Clicando ahí crearemos el submenú.

Automáticamente, cambiará el icono del elemento en la Vista de lista. En mi ejemplo quiero crear el submenú dentro del elemento Blog que, como se ve en la imagen, ha cambiado su icono por el mismo que hemos seleccionado en la barra de herramientas. Una forma evidente de saber que elementos de nuestro menú albergan un submenú. Además, al tenerlo seleccionado, vemos como nos da la opción de añadir nuevos bloques o elementos.

Si hacemos clic en el símbolo + del elemento que hemos transformado en submenú, de nuevo tendremos la opción de añadir enlaces internos, externos u otros elementos, como hemos visto anteriormente.

Personalizando nuestro menú

Una vez terminada la parte en la que hemos añadido todos los elementos que van a formar parte de nuestro menú, vamos a empezar a darle estilo. La opción clásica es hacerlo mediante CSS, pero por suerte con el nuevo editor de WordPress, hay muchas partes de esta personalización que podemos hacer sin escribir ni una línea de código. Lo primero, es tener seleccionado el bloque Navegación y tener abierto sus ajustes en el panel derecho. Veamos cuales que podemos personalizar.

Disposición

Aquí podemos decidir la justificación que va a tener el menú (a izquierda, derecha, centro o espaciado), además si queremos que tenga una orientación horizontal o vertical. También nos permite elegir entre que el menú este siempre en una misma línea, o que pueda fluir en varias cuando le falte espacio.

Visualización

La sección de Superposición del menú nos habla del clásico menú hamburguesa, y nos concede la opción de activarlo siempre, solo cuando estemos en formato móvil, o que nunca aparezca.

Y relativo a los submenús, que se desplieguen al hacer clic o al hacer hover, y que se muestre o no la típica flecha que nos marca que un elemento alberga un submenú.

Color

Como su propio nombre indica, podemos cambiar el color del texto y del fondo tanto del menú como del submenú.

Tipografía

Por defecto, esta sección solo nos va a mostrar la opción de cambiar el tamaño del texto, eligiendo entre cuatro tamaños predeterminados, pero si hacemos clic en el icono de las dos rayas con puntos, podemos elegir el tamaño en px, em y rem.

Sin olvidarnos que tiene opciones ocultas que podemos pasarnos sin darnos cuenta. Junto al nombre de la sección Tipografía veremos que hay tres puntos. Haciendo clic en ellos, podemos ir activando las opciones que nos dejarán modificar la familia de la fuente, su apariencia o grosor, el alto de línea, y si queremos que todo se muestre tal como lo escribimos, siempre en mayúsculas o siempre en minúsculas.

Gestión de menús

Si desplegamos la última sección de los ajustes llamada Avanzado done, además del poder añadir una clase CSS personalizada como cualquier otro bloque, podemos cambiar el nombre del menú. Yo voy a modificar el mío y llamarlo Menú Silo.

Lo de cambiar el nombre puede resultar secundario, pero resulta muy importante si estamos trabajando en una web que contenga varios menús. Cada vez que creemos un nuevo menú, por defecto WordPress nos lo nombrará como Navegación, Navegación 2, Navegación 3… Por lo que llegaremos a un punto en el que no vamos a recordar cual menú es cual.

Si nos vamos a la barra superior del menú y hacemos clic en Seleccionar el menú, tendremos una lista de todos los menús que hemos ido creando. Muy útil ya que, si tenemos que insertar un menú creado anteriormente en una nueva página, solo habrá que insertar el bloque Navegación, elegir el menú que queramos de esta lista, y lo tendremos ya agregado.

Conclusiones

Los menús en WordPress ha cambiado. Hemos pasado de crearlos y gestionarlos desde una página propia, a hacerlo desde el propio editor. Esto nos da la ventaja de ver en directo como se va a ver en nuestra página, y poder realizar las modificaciones necesarias sin tener que estar yendo y viniendo para ver los cambios.

Además, gracias a la multitud de bloques disponibles, podemos añadir otro tipo de elementos que del modo antiguo eran más complejos de hacer o necesitábamos de la ayuda de plugins, como puedes ser insertar un buscador o enlaces a redes sociales.

Como siempre, esperamos que os haya servido de ayuda esta primera parte de nuestro tutorial. Y como ya sabéis, tenéis abiertos los comentarios para hacernos llegar vuestras dudas, sugerencias y experiencias sobre este tema.