En nuestro blog, una de las entradas más populares com más de 55k visitas es la Gestión de menús en WordPress que escribí en 2018. Y como uno de los cambios más radicales que nos ha llegado con la edición de bloques de WordPress es el de la construcción de menús, me ha parecido interesante crear una nueva entrada en la que explicar cómo podemos crear menús con la Edición Completa del Sitio (o Full Site Editing, en inglés).
Para ello, veamos si somos capaces de crear el menú que tenemos en nuestra página principal en Nelio que tiene el siguiente aspecto:
Para ello, en una instalación en local con WordPress 6.0.2, he instalado el tema Twenty Twenty-Three versión 1.0 y también he instalado el plugin de Gutenberg, necesario para este tema.
Tabla de contenidos
El editor de plantillas
Si queremos crear o editar un menú en WordPress, lo primero que debemos saber es dónde hay que hacerlo. Los menús en la Edición Completa del sitio ya no son elementos que se tratan por separado (lo mismo ocurre con los widgets) y ya no existe la pestaña de Menús en Apariencia. Ahora los menús están incorporados en la edición de las plantillas del tema. Por lo tanto, para crear o editar un nuevo menú, lo que debes hacer es ir al editor del tema y para ello tienes tres opciones:
- hacer clic en la opción Apariencia » Editor que encuentras en la barra lateral izquierda,
- hacer clic en Editar sitio que encuentras en el menú superior cuando visualizas cualquier página estando logueado, o
- ir directamente a la página de temas y hacer clic en el botón de Personalizar el tema que tienes activo.
En ese momento se te abrirá el editor de la plantilla de tema de la página principal, que es bastante parecido al editor de bloques que ya conoces pero con algunas diferencias que te comento más adelante. La plantilla del tema, por lo tanto, también se crea a partir de bloques de forma parecida a la creación de páginas.
En el menú superior encontrarás, primero, a la izquierda, el logo del sitio (por defecto, el de WordPress) para alternar la navegación. Si haces clic en él verás que te muestra las plantillas y partes de plantilla que componen el sitio, y también te permite volver al Escritorio para que puedas volver a editar tus páginas y entradas.
En la pestaña Plantillas podrás ver todas las plantillas que incluye el tema de tu sitio, y en la pestaña Partes de Plantilla podrás ver un subconjunto de bloques que forman parte de algunas plantillas y que nos interesa tener agrupados de forma diferenciada ya que se usan reiteradamente en más de una, como puede ser la cabecera o el pie de página.
Los botones y opciones que tienes a la derecha del logo son los que ya conoces del editor de páginas, para añadir bloques, editarlos o seleccionarlos, deshacer o rehacer cambios y ver la estructura de bloques que forman la plantilla.
En medio encontramos el nombre de la plantilla que estamos editando y un desplegable que te muestra las partes de plantilla que se incluyen en dicha plantilla (esta información, como puedes ver en la primera imagen, también la tienes en la barra lateral derecha). También tienes la opción de ir a ver el listado de plantillas que ya hemos visto antes por si quieres editar cualquier otra plantilla.
Y finalmente, en la parte derecha del menú, adicionalmente a los botones de ver la configuración y las opciones de visualización que ya teníamos en el editor de bloques, nos aparecen dos botones más. El primero es el botón para personalizar el estilo de bloques específicos para todo el sitio. De esta forma aquí puedes definir estilos para los bloques a nivel global, y luego, en cada página de forma independiente también puedes cambiarlos como te interese. Y, a continuación, tenemos el botón que muestra las pestañas del menú de navegación de la plantilla que estás editando. En este caso, la plantilla Home que nos viene por defecto con el tema Twenty Twenty-Three no incluye ningún enlace de menú de navegación.
Creando una nueva cabecera
Ahora que ya nos hemos hecho una idea general de dónde tenemos las cosas para crear y editar plantillas, veamos cómo creamos un nuevo menú. Como ya hemos comentado, el tema Twenty Twenty-Three incluye en la plantilla Home un menú muy minimalista.
Si vamos a ver el contenido actual de la plantilla Home haciendo clic en Ver lista, vemos que está formado por 3 elementos (Header, Group, y Footer) de los cuales dos, el Header y Footer son partes de plantilla.
Borrado de cabecera por defecto
Si editamos directamente el contenido de este Header, al ser una parte de plantilla que se utiliza en otras plantillas, los cambios realizados se aplicarán en todas las páginas que utilizan dicha parte de plantilla.
Como queremos que este menú sea exclusivo de la página principal, empezamos borrando esta parte de plantilla. Para ello, selecciona el bloque de la cabecera, haz clic a los tres puntitos que encuentras a la derecha de edición del bloque y selecciona la opción de Borrar Cabecera. Al borrarla, la cabecera que teníamos, al ser parte de plantilla, seguirá disponible en las otras plantillas que la estén usando.
Usar un patrón para crear nueva cabecera
A continuación, igual que hacemos cuando queremos añadir un bloque en una página, le das al botón + de añadir bloque, y dispondrás de un conjunto de bloques y patrones entre los que elegir. Para nuestro ejemplo he seleccionado, entre los patrones de cabecera que hay disponibles, el patrón de «Simple header with background color».
Una vez copiado el patrón, podemos ver la lista de bloques que lo componen: un grupo que contiene otro grupo y este a su vez contiene una fila que contiene una fila con el logo y título del sitio, y un bloque de navegación, con la lista de páginas que tengo en mi sitio que, en este caso, sólo tengo la Sample Page.
Edición del logo del sitio
A continuación vamos a hacer los cambios necesarios en esta cabecera para que tenga el aspecto que buscamos.
Empezamos cambiando el color de fondo del grupo que contiene toda la cabecera. Para ello, en las propiedades del grupo que tienes en la barra lateral derecha sólo debes cambiar el color de fondo.
A continuación, hacemos clic en el bloque de logo, seleccionamos de la biblioteca de medios nuestro logo y borramos el nombre del título del sitio.
Edición del menú de navegación
Vamos ahora a crear lo que es propiamente el menú de navegación. Actualmente, tenemos el bloque de lista de páginas que, al ser mi sitio nuevo sólo tengo la Sample Page.
Propiedades del menú de navegación
Antes de preocuparnos por el contenido de este menú, veamos qué propiedades se pueden modificar del propio menú. Éstas las encuentras en la barra lateral derecha.
Como puedes ver en la imagen anterior, puedes indicar su justificación y orientación, cuándo y cómo debe verse colapsado (si haces clic en la caja de Display, te muestra varias opciones de visualización). Para mostrar los submenús, puedes indicar si éstos sólo se muestran al hacer clic y si debe mostrarse una flecha hacia abajo.
Sobre los colores del menú de navegación, puedes indicar el texto y fondo del menú principal y de los submenús. También puedes indicar la tipografía y tamaño del texto del menú y el espaciado entre las distintas pestañas del menú.
En nuestro ejemplo, el texto principal es de color blanco, y el texto de los submenús debe ser el mismo azúl que el color de fondo del menú. Para el tamaño he indicado medio y para el espaciado entre bloques, 30.
Edición del contenido del menú
Antes de editar el contenido del menú, creamos el conjunto de páginas en mi sitio para poder enlazar el menú con las mismas. Ahora vemos que el menú de navegación muestra todas las páginas recién creadas.
A continuación,al intentar editar cualquiera de los elementos del menú de navegación, lo primero que nos aparece es una ventana emergente para convertir la lista de páginas a enlaces de páginas.
Le damos al clic y ya tenemos nuestra lista de páginas como enlaces editables. Ahora, puedes, añadir, editar (cambiar el nombre visualizado o su enlace) o eliminar enlaces cómo quieras.
Cuando añades cualquier enlace, este puede ser de una página existente en tu sitio o de cualquier otra URL que quieras indicar. De esta forma, crear los distintos elementos de nuestro menú de navegación es muy fácil.
Además puedes añadir un submenú en el que puedes ir añadiendo las pestañas que quieras.
Si quieres, podrías perfectamente añadir submenús adicionales con más pestañas.
Añadir un buscador
Finalmente, nos queda añadir el buscador. En este caso, debes insertar un bloque de tipo buscador, en el que puedes añadirle una etiqueta, un placeholder, y una lupa. Este es un bloque que consta de un campo donde el usuario debe insertar las palabras a buscar, y una lupa o etiqueta en la que hacer clic para realizar la búsqueda.
Además en la barra lateral derecha, podemos modificar algunas propiedades del buscador: su anchura, el color de texto y fondo, si queremos que tenga un borde y el radio del borde del campo para insertar la búsqueda.
Últimos ajustes y visualización
Finalmente, para que todo el grupo se muestre en la parte superior de nuestra página, deberás indicar en el grupo que lo contiene que no tiene ningún padding, y ya está. Ya hemos creado un menú bastante parecido al de la página principal de nuestra web.
Consideraciones adicionales
Como has podido ver, la única limitación con la que nos hemos encontrado para crear el menú que tenemos en Nelio es con el bloque buscador. Nosotros en nuestra web sólo mostramos el campo de búsqueda al hacer clic en la lupa, funcionalidad que no existe en este bloque.
Finalmente añadir que en esta entrada hemos visto cómo crear un menú de la página principal. Pero también es muy fácil crear un menú para todas las páginas que correspondan a un determinado producto. Para ello, sólo debes crear una plantilla para ese conjunto de páginas y personalizar el menú en la misma.
Espero que esta entrada te haya sido útil, pero no dudes en añadir un comentario más abajo si tienes cualquier pregunta.
Imagen destacáda de Igor Miske en Unsplash.
Deja una respuesta