Cómo crear, editar y personalizar el menú de navegación de WordPress (temas clásicos y de bloques)

Los menús de navegación muestran tus páginas más importantes y proporcionan a los visitantes un acceso rápido, estén donde estén en tu sitio. La funcionalidad de menú predeterminada de WordPress es suficiente para la mayoría de los sitios web. Pero quizá te preguntes cómo personalizar el menú o crear uno más elaborado. 

Si utilizas un tema de bloques, puedes crear tu menú con el bloque Navegación. Esto te ofrece más opciones de personalización e incluso puedes crear menús completamente nuevos directamente en el editor.

Pero si sigues utilizando un tema clásico, el editor de menús tradicional te permite añadir nuevos elementos, crear menús desplegables e incluir barras de búsqueda y botones. 

En esta guía detallada, primero te mostraremos cómo crear y personalizar tu menú utilizando el editor de menús clásico de WordPress. Después, te guiaremos por el proceso para crear tu menú utilizando el bloque Navegación (para los sitios que utilizan un tema de bloques). 

Menús clásicos frente a navegación por bloques: ¿cuál deberías utilizar?

La elección entre la pantalla clásica Apariencia → Menús y el bloque Navegación del nuevo Editor del sitio depende de tu tema. Estas son las principales diferencias:

Parte 1: Crear menús con un tema clásico

Si todavía no has cambiado a un tema de bloques, aún puedes hacer muchas cosas interesantes para mejorar la experiencia del usuario con un menú. Vamos a verlo. 

Cómo encontrar el editor de menús de WordPress

Empecemos por encontrar el editor de menús tradicional de WordPress. Primero, inicia sesión en el panel de administración de tu WordPress y ve a Apariencia → Menús. Es posible que ya haya un menú configurado; puedes editarlo o crear uno nuevo.

También puedes editar tus menús desde la pantalla del Personalizador del tema. Esto te permite ver una vista previa en directo de tus cambios mientras trabajas. En la página Menús, haz clic en el botón Gestionar con vista previa en directo o ve a Apariencia → Personalizar y haz clic en la opción Menús.

Ambos métodos ofrecen prácticamente las mismas opciones, así que elige el que prefieras.

Cómo crear un menú personalizado en WordPress

Primero, aprendamos a crear un menú nuevo en WordPress si utilizas un tema clásico. Si ya tienes uno, solo tienes que hacer clic en el enlace Crear un menú nuevo situado cerca de la parte superior de la página.

Si todavía no has creado ningún menú, no tienes que hacer clic en nada: accederás directamente a la pantalla de creación de menús.

Por último, si estás en la pantalla de vista previa en directo, puedes hacer clic en el botón Crear un menú nuevo en cualquier momento.

Ponle a tu menú un nombre que describa su propósito y elige dónde debe aparecer en tu sitio. Cuando hayas completado estos sencillos requisitos, podrás empezar a desarrollar tu menú y añadir elementos.

Cómo editar un menú en WordPress

¿Necesitas editar un menú existente en un sitio de WordPress? Si solo tienes un menú, ve a la pantalla Apariencia → Menús y lo encontrarás allí mismo, listo para personalizarlo.

Si tienes varios menús, verás el menú desplegable Selecciona un menú para editarlo cerca de la parte superior de la página. Esto facilita cambiar la configuración del menú de navegación o alternar entre los distintos menús de tu sitio. Elige el que quieras y haz clic en Seleccionar para cargarlo.

Si utilizas el Personalizador del tema, verás una lista de todos tus menús existentes en la parte superior en cuanto abras la pantalla Menús. Solo tienes que hacer clic en el que quieras abrir.

Cómo añadir elementos a tu menú de WordPress

Ahora vamos a centrarnos en lo esencial para crear un menú con un tema clásico: añadir elementos y personalizar su funcionalidad. Quizá quieras crear un menú desplegable anidado, añadir determinadas páginas o entradas, o incorporar otros elementos a la barra de menús. 

Añadir una página o entrada a tu menú

Primero, querrás facilitar el acceso a tus páginas más importantes, así que vamos a añadir algunos enlaces a tu menú. Esta es una parte importante de la navegación de tu sitio y es muy fácil añadir nuevas entradas a un menú.

Mira el cuadro de la izquierda, donde deberías ver el cuadro Añadir elementos al menú con varias pestañas. Abre la pestaña Páginas que contiene tres categorías: Más recientes, Ver todo y Buscar.

La primera mostrará algunas de tus páginas más recientes para facilitar el acceso. Si tienes cientos de páginas en tu sitio, la pestaña Ver todo probablemente resulte un poco difícil de manejar. En su lugar, utiliza la pestaña Buscar para encontrar las que quieras añadir.

También puedes marcar la casilla Seleccionar todo situada en la parte inferior si quieres añadir todas las páginas mostradas a tu menú.

Cuando hayas seleccionado lo que quieres, haz clic en Añadir al menú para finalizar la selección. Tus nuevas páginas aparecerán ahora en la parte derecha.

Para las entradas del blog, el proceso es muy similar. Selecciona la pestaña Entradas y, como antes, elige entre tus entradas más recientes o busca las que quieras. Después, haz clic en Añadir al menú.

¿Y si quieres eliminar un elemento del menú que has añadido? Hay dos formas de hacerlo. En la sección Estructura del menú de la derecha, selecciona una de las páginas o entradas haciendo clic en la flecha de la derecha. Después, haz clic en el enlace rojo Eliminar.

También puedes eliminar varias páginas de una sola vez. Haz clic en Seleccionar en masa en la casilla y marca cada elemento del menú que quieras eliminar. Después, haz clic en Eliminar elementos seleccionados.

Por último, puedes cambiar el nombre de los elementos del menú para que aparezcan con un título diferente. Selecciona un elemento de página con la flecha desplegable y cambia la Etiqueta de navegación. Esto resulta útil si quieres que los elementos del menú tengan un título más corto para ahorrar espacio.

Añadir una categoría del blog al menú

¿Y si quieres enlazar desde tu blog a una página de categoría de nivel superior? Al fin y al cabo, quizá quieras facilitar a los visitantes el acceso a las páginas de categorías de nivel superior para animarlos a seguir leyendo.

Esto es muy parecido a añadir una entrada o una página, pero tienes que hacer clic en la pestaña desplegable Categorías. Después puedes elegir entre tus categorías más utilizadas, ver la lista completa o buscar las que quieras.

Cuando hayas terminado, haz clic en Añadir al menú, y aparecerá en el lateral igual que una entrada o una página.

Añadir un enlace personalizado al menú

¿Y si hay una página de tu sitio que no pertenece a ninguna de las otras categorías o quieres que tu menú enlace a un sitio externo? En ese caso, puedes añadir un enlace personalizado. Este puede enlazar a cualquier URL que quieras.

Haz clic en la pestaña Enlaces personalizados, introduce la URL, establece el texto del menú y haz clic en Añadir al menú.

Añadir al menú un enlace que se abra en una pestaña nueva

A veces quieres que un enlace del menú se abra en una pestaña nueva para que los visitantes puedan volver a tu sitio web y seguir navegando. Esto es especialmente útil si has añadido un enlace externo: si envías a los visitantes a otro sitio, no hay garantía de que regresen.

Esta es una opción oculta de la interfaz de menús. Tendrás que activarla haciendo clic en Opciones de pantalla en la parte superior de la pantalla y marcando la casilla Destino del enlace.

Ahora, cuando uses la flecha desplegable de un elemento del menú, verás una nueva casilla: Abrir el enlace en una pestaña nueva. Haz clic en ella y ya estará todo listo.

Añadir desde el menú un enlace a una sección de una página

A veces quieres enlazar a una sección concreta de una página. En ese caso, en lugar de usar el menú desplegable habitual de Entradas o Páginas, utiliza la sección Enlaces personalizados.

Primero, tienes que crear una URL personalizada que lleve a los visitantes a la sección correspondiente. Tendrás que crear lo que se denomina un «anclaje», que puedes crear en el editor de bloques. Después, añadirás el anclaje que has creado al final de la URL de tu sitio con el símbolo #. Por ejemplo, si tu anclaje es «create-a-page-jump», tu URL será https://example.com/#create-a-page-jump.

Pega esto en la barra de enlaces personalizados, establece su etiqueta y haz clic en Añadir al menú.

Añadir un elemento desplegable al menú

Anidar elementos es una parte importante de la funcionalidad de los menús. Así es como haces que determinados elementos del menú se desplieguen al pasar el cursor por encima. Puedes anidar elementos a la profundidad que quieras y crear submenús dentro de submenús de forma indefinida.

Hay dos formas de hacerlo. La primera opción consiste simplemente en hacer clic en el elemento que quieras anidar y arrastrarlo hacia la derecha hasta que las líneas de puntos también se desplacen hacia la derecha. Sigue haciéndolo para anidar más elementos.

La segunda forma consiste en abrir el elemento del menú que quieras mover y hacer clic en el enlace Debajo de [Nombre del elemento del menú].

Añadir un elemento al menú sin enlace

La mayoría de las veces querrás que los elementos del menú enlacen a una página. Sin embargo, a veces, por ejemplo al crear un menú desplegable, solo quieres que el enlace de nivel superior sea texto y nada más.

Para hacerlo, crea un enlace personalizado como de costumbre, pero en lugar de insertar un enlace, inserta el símbolo #. Después, ponle un título al elemento del menú como siempre y haz clic en Añadir al menú.

Puedes dejar el símbolo # si quieres, o abrir el nuevo elemento del menú, eliminar el símbolo y hacer clic en Guardar menú.

Aunque el elemento del menú siga pareciendo un enlace, no se podrá hacer clic en él. Si quieres, siempre puedes cambiar su estilo con CSS para que tenga otro aspecto. Más adelante te mostraremos cómo hacerlo.

Añadir un icono o una barra de búsqueda al menú

Si tu tema tiene un widget de cabecera, añadirle una barra de búsqueda es fácil. Solo tienes que ir a Apariencia → Widgets, hacer clic en el botón azul + en la esquina superior izquierda y arrastrar el widget de búsqueda a la zona de la cabecera.

Si esto no funciona, tendrás que cambiar a un tema que coloque una barra de búsqueda en la cabecera o usar un plugin. La mayoría de los plugins de búsqueda de WordPress más populares incluyen una opción para añadir una barra de búsqueda al menú de la cabecera.

Añadir una descripción a un elemento del menú

Aunque normalmente no es necesario, quizá quieras añadir una descripción a los elementos del menú. Tal vez quieras ofrecer una breve descripción del destino de este enlace cuando los visitantes hagan clic en él.

Primero, en la pantalla de Menús abre las Opciones de pantalla de la parte superior derecha y marca la casilla Descripción. Ahora encontrarás un cuadro de descripción cada vez que abras un elemento del menú con su flecha desplegable.

Escribe una descripción y asegúrate de hacer clic en Guardar menú. Cuando visites tu sitio, deberías ver la nueva descripción. Recuerda que no todos los temas admiten esta función.

Cómo activar tu menú de navegación de WordPress

Cuando hayas terminado de personalizar el menú y estés listo para mostrárselo al mundo, solo tienes que elegir una ubicación de visualización para él. Entonces aparecerá en tu sitio.

Por el contrario, si quieres trabajar en el menú en privado, no selecciones ninguna ubicación de visualización hasta que hayas terminado. Un menú sin ubicación de visualización es prácticamente invisible para todos los visitantes.

¿No sabes cómo establecer una ubicación de visualización? Vamos a verlo.

Cómo cambiar la posición de tu menú en WordPress

Si no te gusta dónde está ubicado el menú o no sabes cómo configurarlo para que se muestre donde quieres, es muy fácil cambiar la posición del menú en WordPress.

Hay tres formas de hacerlo: en primer lugar, en la pantalla Apariencia → Menús, en la pestaña predeterminada Editar menús, busca el área principal de edición de menús. Deberías ver una sección llamada Ajustes del menú. Después, busca Ubicación de visualización.

Ahora solo tienes que marcar las casillas donde quieras que aparezca el menú. Tendrás que visitar tu sitio para ver qué aspecto tiene el nuevo menú.

La segunda forma de cambiar la posición del menú en WordPress es hacer clic en la pestaña Gestionar ubicaciones, y luego asignar los menús que quieres que aparezcan en cada una. Esto es un poco más fácil de configurar si tienes varios menús.

Por último, puedes usar el Personalizador en directo. Abre Apariencia → Personalizar y haz clic en la pestaña Menús; después, selecciona el menú que quieras editar o haz clic en el botón Ver todas las ubicaciones. La ventaja es que puedes ver inmediatamente qué aspecto tendrán tus menús y dónde se encuentra cada opción de visualización.

Ten en cuenta que cada ubicación de visualización solo puede estar ocupada por un menú a la vez, aunque puedes asignar un mismo menú a varias ubicaciones de visualización.

Además, las ubicaciones de visualización dependen del tema. Si no tienes las que buscas, quizá tengas que cambiar a un tema nuevo.

Cómo usar varios menús en tu sitio de WordPress

No tienes por qué limitarte a un solo menú. Puedes crear tantos como espacio tengas para mostrar (¡y más!). Podrías tener un menú principal, un menú más compacto en la barra lateral, un menú independiente en el pie de página, etc. Todo depende del número de ubicaciones de menú que proporcione tu tema.

En cualquier caso, puedes crear un segundo menú haciendo clic en Crear un menú nuevo y seleccionando una ubicación de visualización independiente para él. Solo tienes que indicar el nombre y configurar sus páginas como hiciste con el primer menú, y repetir el proceso tantas veces como necesites.

La pantalla de vista previa en directo es aún más intuitiva: solo tienes que hacer clic en el botón Crear un menú nuevo y todos los menús que hayas creado aparecerán en un único lugar de fácil acceso.

Recuerda usar la pantalla Gestionar ubicaciones para asignar más fácilmente cada menú a una ubicación, ya que es mucho más sencillo que tener que seleccionar y configurar manualmente las opciones de cada menú.

Cómo personalizar el aspecto de tu menú usando CSS

Aunque WordPress ofrece algunas opciones básicas para que el menú funcione como quieres, en lo que respecta a su aspecto real, no ofrece muchas posibilidades. Pero si no te convence depender de los estilos de menú de tu tema, puedes tomar el control con CSS.

Aunque CSS puede ser difícil de aprender, no necesitas ser un experto para usarlo. Para hacer cambios básicos en el aspecto, solo tienes que saber qué cambiar y dónde colocarlo.

Aunque puedes editar directamente los archivos de tu tema, por lo general no se recomienda a menos que vayas a añadir mucho CSS, especialmente si no utilizas un tema hijo. En su lugar, puedes usar el cuadro CSS adicional en la pantalla Apariencia → Personalizar o la función CSS personalizado disponible en Jetpack.

También tienes que encontrar la clase de menú de tu tema. Si tu tema tiene varios menús, cada uno tendrá una clase diferente.

Por ejemplo, en el tema Twenty-Twenty de WordPress, la clase del menú principal es simplemente «.primary-menu».

Haz clic derecho en el menú y utiliza la herramienta Inspeccionar elemento para encontrar su clase.

Si alguno de los códigos de ejemplo no funciona, puede que tu tema esté imponiendo un estilo determinado, fijando el tamaño de la fuente, el color, etc. Puedes sobrescribirlo usando la etiqueta!important, pero intenta hacerlo con moderación. Si tienes conocimientos de CSS, puede ser mejor crear un tema hijo y editar directamente la hoja de estilos.

Cómo aplicar estilos a un solo elemento del menú

Puede que quieras cambiar un solo elemento del menú en lugar de todos a la vez. Para ello, ve a la página Apariencia → Menús, abre Opciones de pantalla y activa Clases CSS. Edita un elemento del menú y asígnale una clase CSS; después, sustituye «.primary-menu» en los ejemplos de código que aparecen a continuación por la clase CSS personalizada.

Así que, si asignas la clase «home-menu» al enlace de la página de inicio, sustituye «.primary-menu» por «.home-menu».

Cómo cambiar el tamaño de fuente del menú

Si tu menú resulta un poco demasiado llamativo o cuesta leerlo, prueba a cambiar el tamaño de fuente. Usa este código para hacerlo:

.primary-menu {
font-size: 30px;
}

Solo tienes que cambiar «30px» por el tamaño que quieras.

Cómo cambiar la combinación de colores del menú

Una solicitud habitual de los usuarios de WordPress es cambiar el color de los enlaces de su menú o incluso añadir un color de fondo.

Primero, vamos a cambiar el color de la fuente. Usa el siguiente código:

.primary-menu li a {
color: #000000;
}

Esto hará que los enlaces del menú sean negros. Sustituye el código hexadecimal de color anterior; puedes usar un sitio de códigos de color para crear fácilmente el código hexadecimal del color que quieras. 

¿Y el color de fondo? Prueba esto para obtener un fondo verde azulado:

.primary-menu {
background-color: #00ffff;
}

Cómo cambiar los efectos al pasar el cursor por el menú

Un efecto sofisticado al pasar el cursor puede mejorar sutilmente el diseño, pero esta parte puede resultar algo más complicada. Hay muchos efectos al pasar el cursor que podrías implementar, pero hagamos uno sencillo: cambiar el color de la fuente al pasar el cursor sobre un elemento del menú.

.primary-menu li.menu-item a:hover {
color: #DEB0F1;
}

Ahora, si pasas el cursor sobre un enlace del menú, se volverá de color lavanda.

Todavía puedes experimentar más: prueba a usar las propiedades de color de fondo, opacidad, borde/radio del borde y transición.

Cómo hacer que tu menú de WordPress sea fijo

Los menús «fijos» siguen al visitante mientras se desplaza, lo que significa que no tiene que volver a desplazarse hasta arriba para acceder al menú de navegación. Puede resultar algo más cómodo y animarle a seguir navegando.

La forma de hacerlo es con la etiqueta «position:fixed», pero probablemente tendrás que añadir algo más para que funcione correctamente.

Lo siguiente creará un menú de navegación flotante básico:

.primary-menu {
position: fixed;
top:0;
right:0;
}

Pero quizá quieras utilizar las propiedades CSS de fondo, altura, anchura, borde, relleno y posición (superior, inferior, izquierda o derecha) para crear un menú fijo que sea algo más que texto flotante. Aquí tienes un ejemplo sencillo:

.primary-menu {
position: fixed;
top:0;
right:0;
background:#000000;
height:50px;
width:100%;
border-bottom: 2px solid #F7156B;
padding-top:10px;
padding-right:30px;
}

Cómo añadir un botón a tu menú

Aunque es posible añadir botones a tu menú mediante plugins, vamos a intentar añadir uno sencillo con CSS. Primero, tendrás que establecer una clase CSS personalizada para el elemento de menú del botón, a menos que quieras que todos los elementos del menú tengan este estilo.

Ahora prueba este código:

.menu-button {
    background: #000000;
    padding: 5px 10px 5px 10px;
}

Si quieres redondear las esquinas del botón, prueba a añadir esta línea de código encima del corchete de cierre:

border-radius: 5px;

Parte 2: Crear menús con el editor de bloques (FSE)

En este punto, deberías saber cómo crear y editar menús con el editor de menús predeterminado de WordPress. Pero si utilizas un tema de bloques en lugar de un tema clásico, puedes editar el menú con el bloque Navegación. 

Cómo crear y editar un menú con el bloque Navegación

En esta sección, hablaremos más sobre esta función y te mostraremos cómo utilizarla para crear menús.

¿Qué es el bloque Navegación?

El bloque Navegación se lanzó con WordPress 5.9. Esta versión de WordPress introdujo el Editor del sitio, que es la herramienta principal para editar temas basados en bloques.

Como su nombre indica, los temas de bloques están compuestos íntegramente por bloques de WordPress. Esto te permite editar los diseños de la misma forma que personalizas las entradas y páginas con el editor de bloques. 

Esto aporta un mayor nivel de flexibilidad a la hora de personalizar el sitio. Por ejemplo, puedes crear y editar plantillas, partes de plantillas como pies de página y cabeceras, patrones y mucho más.

Algunas de las funciones disponibles no son muy diferentes de las del editor de menús predeterminado que utilizas para los temas clásicos. Puedes seguir añadiendo enlaces de menú a páginas y entradas. Y también puedes insertar submenús si tienes mucho contenido en tu sitio.

La naturaleza de la edición basada en bloques permite añadir prácticamente cualquier bloque dentro del bloque Navegación. Por ejemplo, puedes incluir logotipos, imágenes, datos de contacto, iconos sociales y barras de búsqueda.

Aunque el Editor del sitio ofrece más opciones de personalización, el bloque Navegación todavía tiene algunas limitaciones. Por ejemplo, no podrás crear megamenús sin utilizar un plugin específico.

¿Cómo sé si tengo el bloque Navegación?

Como hemos mencionado antes, el bloque Navegación solo está disponible para temas basados en bloques. 

Estos temas están creados íntegramente con bloques de WordPress. Esto te proporciona un mayor control sobre el aspecto de tu sitio, sin necesidad de depender de herramientas externas ni de plugins. 

Solo tendrás acceso al bloque Navegación si tienes activado en tu sitio uno de estos temas de bloques. Puedes comprobarlo yendo a Apariencia en tu panel de administración.

Si ves la opción Menús, generalmente significa que estás utilizando un tema clásico y tendrás que editar los menús de navegación mediante el método anterior. Pero si ves la opción Editor, utilizas un tema de bloques con acceso al bloque Navegación.

Cómo acceder al bloque Navegación

Hay varias formas de acceder al bloque Navegación si utilizas un tema basado en bloques. 

Puedes abrir el Editor del sitio yendo a Apariencia → Editor. Aquí puedes elegir la página, el patrón o la plantilla que quieras modificar. 

En este caso, tendrás que hacer clic en la opción Navegación de la parte superior.

A continuación, selecciona el icono del lápiz para abrir y editar el bloque.

Ten en cuenta que, como el Editor del sitio es más flexible que el Personalizador, no importa realmente qué aspecto del sitio web estés editando. Solo tienes que hacer clic en los elementos del menú y verás la opción Seleccionar bloque principal: Navegación.

Muchos temas de bloques incluyen sus propios paneles o ajustes del tema. Por ejemplo, el tema EarthTones te permite acceder a la opción Ajustes del tema cuando vas a Apariencia.

Si haces clic en ella, accederás a una página donde podrás realizar cambios en el diseño. Aquí encontrarás la opción Añadir menús que te lleva directamente al Editor del sitio (y al bloque Navegación).

Cómo crear un menú con el bloque Navegación

Si activas un tema de bloques en un sitio existente, el menú de navegación normalmente se generará utilizando el menú existente que creaste con el editor de menús predeterminado de WordPress. A veces, tu sitio web puede heredar el menú disponible con el tema de bloques.

Dicho esto, si quieres crear un menú nuevo o estás creando tu sitio por primera vez, puedes hacerlo en el Editor del sitio. Solo tienes que abrir el editor, seleccionar el bloque Navegación y eliminar el diseño existente si quieres empezar desde cero. 

Normalmente, la página estará dividida en columnas y filas, como las entradas y páginas que creas con el editor de bloques. Por tanto, al pasar el ratón por la página, verás varios lugares donde puedes añadir bloques nuevos.

Como alternativa, puedes añadir columnas y filas nuevas si no puedes añadir un menú en el lugar que quieres. Lo mejor es añadir un bloque Navegación en una posición fija, como el pie de página, la barra lateral o la cabecera. 

Haz clic en el icono + para añadir un bloque nuevo. Busca «Navegación» y arrastra el bloque hasta el lugar correspondiente.

Algunos elementos del menú pueden aparecer al instante, pero puedes cambiarlos haciendo clic en el elemento correspondiente.

Aquí puedes sustituir la etiqueta del menú, introducir una URL nueva y añadir una descripción mediante los ajustes de Bloque que aparecen a la derecha de la pantalla. Si cambias a la pestaña Estilos, también puedes ajustar el tamaño y las dimensiones de la tipografía.

Además, puedes añadir nuevos elementos de menú haciendo clic en el icono + dentro del bloque Navegación. También puedes crear submenús, cambiar el orden de las opciones del menú y mucho más. En la siguiente sección te mostraremos cómo hacer cada una de estas cosas. 

Cómo aplicar estilos a tu menú con el bloque Navegación

Hay varias formas de personalizar un menú que crees en el Editor del sitio. En esta sección, te mostraremos cómo añadir nuevos elementos, reordenarlos, cambiar los colores y mucho más.

Cómo añadir nuevos elementos de menú al bloque Navegación

En primer lugar, quizá quieras añadir nuevas páginas, entradas o incluso enlaces personalizados a tu menú de navegación. Por suerte, es muy sencillo hacerlo con el Editor del sitio.

Asegúrate de haber seleccionado el bloque Navegación dentro del editor. Deberías poder ver el icono + que te permite añadir nuevos bloques dentro de otros bloques, filas y columnas. Solo tienes que hacer clic en este icono.

Después, puedes buscar páginas existentes de tu sitio o introducir una URL personalizada. Supongamos que quieres añadir un enlace a la página de tu blog. Solo tienes que encontrar la página en la lista o buscar «blog».

Al hacer clic en él, la página se añadirá automáticamente a tu bloque Navegación. Si quieres, puedes configurar el enlace para que se abra en una pestaña nueva cuando los visitantes hagan clic en él. En los ajustes del bloque de la derecha, puedes modificar la etiqueta, añadir una descripción y cambiar el estilo del elemento de menú para que encaje bien con las opciones existentes.

Cómo añadir enlaces de submenú dentro del bloque Navegación

Si tu sitio web tiene muchas páginas, puede ser útil crear submenús (o menús desplegables). Estos permiten a los visitantes desplazarse por tu sitio con más facilidad. Tomemos el elemento del menú del blog que acabamos de añadir.

Puede ser útil añadir submenús que dirijan a los visitantes a categorías concretas de las entradas del blog que más les interesen. Si aún no has configurado categorías para tus entradas, puedes hacerlo desde Entradas → Categorías.

Al crear una categoría nueva, también puedes introducir un slug personalizado que funcionará como enlace de tu elemento de submenú. Así que, en el editor, selecciona el bloque Navegación y ve a la opción Blog que acabamos de añadir.

En la barra de herramientas, haz clic en el icono Añadir submenú.

Aparecerá una pequeña flecha junto al elemento de menú Blog que indica a los visitantes que es un menú desplegable. Ahora, haz clic en Añadir enlace.

Al igual que antes, puedes buscar páginas o introducir una URL personalizada. Como tus categorías de entradas están configuradas con un enlace permanente, también puedes buscarlas aquí.

Cuando hayas añadido el primer enlace, pulsa la tecla Escape para añadir más elementos a tu submenú de Blog.

A continuación, repite el proceso hasta que hayas añadido todas tus categorías al bloque Navegación.

Si quieres ir un paso más allá, incluso puedes crear submenús para tus elementos de submenú. Supongamos que tus recetas están organizadas en subcategorías como postres, bebidas y desayunos. También es posible que tus entradas de viajes estén organizadas por destino.

Para configurarlo, selecciona el bloque Navegación y localiza los ajustes del bloque de la derecha.

Solo tienes que hacer clic en los tres puntos situados junto al elemento de submenú correspondiente y seleccionar Añadir enlace de submenú.

A continuación, repite el proceso que hemos descrito en esta sección.

Cómo cambiar el orden de los elementos de menú en el bloque Navegación

Aunque te hemos mostrado cómo añadir nuevos elementos de menú al bloque Navegación, quizá quieras cambiar el orden en el que aparecen.

Selecciona la opción Blog que acabamos de añadir. Quizá quieras colocarla justo después del enlace de menú Inicio.

Para configurarlo, solo tienes que hacer clic en el bloque Navegación y seleccionar el elemento de menú Blog. Si no seleccionas el enlace de menú concreto, moverás todo el bloque Navegación en su lugar.

Cuando hayas seleccionado la opción correcta, deberían aparecer dos flechas en la barra de herramientas del bloque.

Ahora bien, como la opción Blog está al final, no podrás seleccionar la flecha derecha porque no hay ningún lugar al que moverla. Pero si haces clic en la flecha izquierda, el elemento de menú debería moverse un lugar hacia la izquierda:

Como puedes ver, la opción Blog ha intercambiado su posición con el enlace Contacto. Puedes hacer clic en la flecha una vez más para moverla completamente a la izquierda (y sustituir la opción actual de Inicio).

Si quieres reordenar los elementos de tu submenú, solo tienes que seleccionar el elemento correspondiente. En la barra de herramientas, en lugar de ver flechas izquierda y derecha, deberías ver flechas para mover los elementos hacia arriba y hacia abajo.

Solo tienes que hacer clic en ellas para reorganizar la apariencia de tu submenú.

Cómo añadir bloques adicionales al bloque Navegación

Como hemos explicado, una de las mejores características del bloque Navegación es que te permite incluir distintos elementos, además de simples enlaces.

Asegúrate de que esté seleccionado el bloque Navegación. A la derecha de la página verás una vista de lista. Haz clic en el icono + situado en la parte inferior para añadir un bloque nuevo.

Después, busca un bloque como lo harías normalmente. Vamos a seleccionar Iconos sociales. 

Enseguida verás que el bloque se añade a la vista de lista de tu menú. El cambio también se reflejará en el bloque Navegación del editor.

Al volver al editor, si haces clic en los iconos sociales, verás un pequeño icono + que te permite añadir los enlaces que necesites.

Una vez que hagas clic en el icono +, puedes añadir un enlace personalizado o explorar la variedad de widgets compatibles con WordPress, como Instagram y TikTok.

Cuando el bloque Iconos sociales está seleccionado, puedes añadir más iconos al bloque.

Mientras tanto, cuando selecciones un icono concreto, como el bloque de Instagram, puedes añadir el enlace a tu página de redes sociales.

También puedes añadir etiquetas en los ajustes del bloque para ayudar a los usuarios de lectores de pantalla. Además, puedes cambiar la posición de los iconos mediante las flechas de la barra de herramientas superior.

Este es solo uno de los muchos bloques que puedes añadir al menú de navegación. También puedes añadir el logotipo de tu empresa, una barra de búsqueda, una lista de páginas web importantes, botones y mucho más.

Cómo cambiar los colores, las fuentes y la alineación del bloque Navegación

A estas alturas, ya tienes todos los elementos de menú, submenús y widgets adicionales que quieres incluir en el bloque Navegación. Pero quizá quieras personalizar el aspecto del bloque. Esto puede implicar cambiar los colores, las fuentes y la alineación.

Para hacerlo, selecciona el bloque Navegación en el Editor del sitio. En los ajustes de Bloque, a la derecha de la página, verás la vista de lista de tu menú. Cambia a la pestaña de Ajustes.

Aquí puedes cambiar la orientación de los elementos de menú para que se muestren verticalmente en lugar de horizontalmente (lo que resulta útil si estás creando un menú en la barra lateral de tu sitio).

También puedes configurar algunos ajustes importantes del menú móvil. Asegúrate de que la opción Móvil esté resaltada en la sección Menú superpuesto. Después, puedes seleccionar un icono nuevo para mostrar. 

Además, puedes definir si los submenús se muestran cuando los visitantes pasan el cursor sobre el elemento de menú (mediante el conmutador Mostrar flecha) o hacer que las opciones se expandan al hacer clic. 

Ahora, pasemos a la pestaña de Estilos.

La primera opción permite elegir un color para el texto del bloque Navegación. También puedes aplicar un color de fondo y determinar los colores del texto y del fondo de los submenús.

Más abajo puedes ajustar el tamaño del texto. Si haces clic en los tres puntos de la sección de tipografía, verás algunos ajustes adicionales. 

Por ejemplo, puedes seleccionar una familia tipográfica nueva, modificar el aspecto (negrita y cursiva), cambiar el uso de mayúsculas y minúsculas, la altura de línea, el espaciado y mucho más.

Más abajo, en la sección Dimensiones, puedes aumentar el espacio entre los elementos de menú mediante la barra de Espaciado del bloque. Cuando lo tengas todo listo, solo tienes que guardar y previsualizar el bloque Navegación.

Preguntas frecuentes

Para una función tan sencilla, los menús pueden llegar a ser bastante complicados cuando te adentras en sus posibilidades. Terminemos con algunas preguntas frecuentes sobre los menús, por si se nos ha olvidado algo.

¿Puedo eliminar o cambiar el nombre de un menú de WordPress?

Tema clásico

Puedes crear tantos menús como quieras en WordPress y eliminarlos sin ningún problema. Solo tienes que abrir la pantalla Apariencia → Menús y hacer clic en el texto rojo Eliminar menú.

Aparecerá una ventana emergente que te pedirá confirmación. Haz clic en Aceptar y el menú desaparecerá para siempre.

Si solo quieres cambiar el nombre de un menú, ábrelo y modifica el campo Nombre del menú, después haz clic en el botón Guardar menú. ¡Así de fácil!

Tema de bloques

Para eliminar un menú, ve a Apariencia → Editor → Navegación. Haz clic en los puntos suspensivos verticales de la esquina superior derecha y selecciona Cambiar nombre o Eliminar. 

¿Puedo añadir etiquetas a un menú de WordPress?

Tema clásico

Puedes añadir categorías a tu menú de WordPress, pero ¿qué ocurre con las etiquetas? Buenas noticias: esta función está integrada en los menús. Solo tienes que activarla.

Primero, asegúrate de estar en la pantalla Apariencia → Menús, después haz clic en Opciones de pantalla en la esquina superior derecha. En la sección Elementos de pantalla verás una fila de opciones, todas marcadas salvo una: Etiquetas. Selecciónala ahora.

Aparecerá un nuevo menú debajo de la opción Categorías en la sección Añadir elementos al menú. Puedes buscar o seleccionar las etiquetas que quieras y añadirlas a tu menú.

Tema de bloques

En el bloque de navegación, haz clic en + para añadir un enlace nuevo. Después, puedes buscar una etiqueta concreta o escribir la URL de esa etiqueta. 

¿Puedo duplicar un menú en WordPress?

Si quieres trabajar en un menú sin que los cambios se publiquen de inmediato para tus visitantes, la posibilidad de duplicarlo puede resultarte muy útil.

Tema clásico

WordPress no incluye esta función de forma predeterminada, pero puedes hacerlo con un sencillo plugin llamado Duplicate Menu. Instálalo desde la pantalla Plugins → Añadir nuevo y verás una página nueva en la pestaña Apariencia: Duplicar menú.

Ve allí y encontrarás una pantalla muy sencilla que te pedirá que pongas un nombre al menú duplicado. Después, haz clic en Duplicar menú.

Solo tardará un momento. Después podrás ir directamente al menú duplicado. Todo será igual, excepto las ubicaciones de visualización, que estarán vacías porque dos menús no pueden ocupar el mismo espacio.

Ningún visitante podrá ver el menú nuevo hasta que le asignes una ubicación de visualización o lo sustituyas por el menú antiguo. Puedes trabajar sin preocuparte de estropear el sitio visible.

Tema de bloques

Ve a Apariencia → Editor → Navegación, selecciona los tres puntos verticales y haz clic en «Duplicar».

¿Puedo añadir una imagen a un menú?

De forma predeterminada, no es posible añadir una imagen a tu menú, pero un plugin llamado Menu Image soluciona ese problema.

Instálalo desde Plugins → Añadir nuevo y observa la nueva opción Imagen de menú en la barra lateral. Aquí puedes configurar los tamaños de las imágenes del menú. De vuelta en Apariencia → Menús, abre un elemento del menú y haz clic en el nuevo botón Añadir imagen/icono.

Ajusta la configuración como prefieras. Haz clic en Imagen para subir una imagen o Icono para elegir entre los iconos. Verás una vista previa antes de guardar.

¿Puedo añadir un megamenú en WordPress?

Si quieres un menú con muchísimos enlaces, el diseño predeterminado acabará pareciendo muy recargado y poco profesional. En su lugar, deberías crear un megamenú para personalizarlo de forma mucho más ordenada.

Por desgracia, WordPress no admite megamenús, así que tendrás que instalar un plugin como Max Mega Menu.

Instálalo desde Plugins → Añadir nuevo, y verás una nueva opción de Mega Menú cerca de la parte inferior de la barra lateral.

Para configurarlo, ve a Mega Menú → Ubicaciones de menú y marca Activado para activarlo. Después puedes cambiar las animaciones al pasar el cursor y el comportamiento del menú, e incluso personalizar un tema en la pestaña Temas del menú.

También puedes acceder a algunas funciones básicas de Mega Menú desde la pantalla Apariencia → Menús, donde encontrarás una nueva pestaña de Configuración de Max Mega Menú.

¿Puedo añadir un evento onclick de JavaScript a mi menú?

Puedes añadir JavaScript a tu sitio de WordPress editando los archivos de tu tema o instalando un plugin como Simple Custom CSS and JS.

Nota: Si decides editar directamente el archivo functions.php, primero debes crear un tema hijo. Consulta cómo crear un tema hijo de WordPress. Si tu tema se actualiza, perderás todos tus scripts personalizados a menos que uses un tema hijo.

Si no sabes cómo seleccionar un elemento concreto del menú, ve a la página Apariencia → Menús, abre Opciones de pantalla y activa Clases CSS. Añade una clase al elemento del menú y úsala como selector en el evento onclick.

Si utilizas el plugin Mega Menu, también tendrás que ir a Mega Menú → Ubicaciones de menú, seleccionar el menú al que quieres aplicar la acción, hacer clic en Avanzado y desactivar la opción Desvincular eventos de JavaScript correspondiente. Ten cuidado al hacerlo, ya que puede causar conflictos.

¿Qué ocurre con tu menú si cambias de tema?

Puede que te preocupe un poco cambiar a un tema nuevo si has dedicado mucho tiempo a organizar tu menú. Por suerte, al cambiar de tema el menú se conservará intacto, tanto si utilizas un tema clásico como un tema de bloques, así que no hay ningún peligro en hacerlo.

Si tu menú antiguo tiene todas sus ubicaciones de visualización antiguas sin asignar, tendrás que volver a configurarlo. Solo tienes que ir a Apariencia → Menús y a la pestaña Gestionar ubicaciones, y después reasignar los menús a los lugares que les corresponden.

¿Dónde se encuentran los menús de navegación en la base de datos de WordPress?

Tema clásico

Si por algún motivo necesitas editar tus menús personalizados en la base de datos, puedes encontrarlos en la tabla wp_posts, dentro del campo menu_order. Los menús de navegación se crean como un tipo de contenido personalizado, por eso puedes encontrarlos ahí.

Tema de bloques

Al utilizar el bloque Navegación, los menús se almacenan en wp_posts mediante el tipo de contenido wp_navigation.

¿Cómo puedo hacer que mi menú de navegación de WordPress se quede fijo arriba?

Para que tu menú se quede fijo, tienes que utilizar un pequeño fragmento de código CSS personalizado. Primero, busca el selector CSS único del contenedor principal de navegación de tu menú.

Puedes hacerlo con la herramienta Inspeccionar de tu navegador. Después, ve al Personalizador de WordPress en Apariencia → Personalizar → CSS adicional. Añade el selector de tu menú y aplica las propiedades position: sticky; y top: 0;. Esto indica al navegador que mantenga el menú fijo en la parte superior de la ventana gráfica mientras el usuario se desplaza hacia abajo por la página. Recuerda añadir un color de fondo al menú para que el texto no se desplace por detrás.

¿Cuál es la diferencia entre un menú clásico y un menú de navegación de bloques?

Un menú clásico es la forma tradicional de gestionar la navegación a través de la pantalla Apariencia → Menús del panel de administración de WordPress. Es la opción más adecuada para temas antiguos y ofrece una interfaz estructurada basada en listas.

Un menú de navegación de bloques es el método moderno que se utiliza en los temas de bloques y el Editor del sitio. Te permite crear y diseñar visualmente tu menú directamente en la interfaz visible de tu sitio. La navegación mediante bloques es más flexible porque puedes añadir al menú no solo enlaces, sino también botones, barras de búsqueda y otros bloques, sin necesidad de código adicional.

¿Cuál es la mejor forma de estructurar un menú de navegación para ofrecer una buena experiencia de usuario?

Para ofrecer una buena experiencia de usuario, mantén la navegación principal sencilla y clara. Limita el menú de nivel superior a un máximo de siete elementos. Así evitarás saturar a quienes visiten tu sitio.

Utiliza palabras sencillas y descriptivas para las etiquetas, como «Servicios» o «Contacto», en lugar de términos confusos o jerga interna. Coloca las páginas más importantes al principio del menú (a la izquierda) y los elementos menos relevantes, como «Contacto», al final (a la derecha). Un menú bien organizado ayuda a los usuarios a encontrar rápidamente lo que necesitan, lo que mejora su experiencia en tu sitio.

¿Cómo añado iconos de redes sociales al menú de mi WordPress?

Puedes añadir iconos de redes sociales a tu menú de dos formas principales. La primera consiste en utilizar un plugin diseñado específicamente para añadir iconos sociales. Estos plugins suelen ofrecer opciones sencillas para colocar iconos en la navegación de la cabecera o del pie de página.

El segundo método consiste en añadir los iconos manualmente. En el editor de menús, crea un nuevo «Enlace personalizado» para cada perfil social. En el campo «Etiqueta de navegación», en lugar de texto, insertarás una etiqueta HTML para el icono o una clase de fuente de iconos, como las de Font Awesome. Esto requiere unos conocimientos básicos de HTML.

¿Puedo tener un menú de navegación diferente en distintas páginas de mi sitio?

Sí, puedes mostrar menús diferentes en distintas páginas. Aunque WordPress no ofrece esta función de forma predeterminada, puedes conseguirlo con un plugin. Plugins como «Conditional Menus» te permiten establecer reglas para decidir dónde aparece cada menú.

Por ejemplo, puedes crear un menú para la sección de tu blog y otro completamente distinto para las páginas de tu tienda. Solo tienes que crear tus distintos menús en Apariencia → Menús y utilizar después los ajustes del plugin para asignar cada uno a páginas, entradas, categorías u otras áreas específicas de tu sitio web según las condiciones que hayas definido.

¿Cómo hago que mi menú de navegación sea accesible para los lectores de pantalla?

Para que tu menú sea accesible, céntrate en una estructura clara y en etiquetas descriptivas. Asegúrate de que el texto de cada enlace describa con precisión su destino. En los menús desplegables, utiliza los atributos ARIA adecuados en el código de tu tema para indicar a los lectores de pantalla que un elemento del menú tiene un submenú y si está abierto o cerrado.

Si utilizas iconos sin texto, como el icono de un menú de hamburguesa, debes incluir texto solo para lectores de pantalla que describa su función, como «Abrir el menú principal». La mayoría de los temas de WordPress modernos y bien programados gestionan automáticamente estos requisitos técnicos de accesibilidad.

Un menú de navegación completamente nuevo

WordPress te permite crear y personalizar menús de navegación para tu sitio sin tener que instalar un plugin ni utilizar código. A medida que tu sitio web aumenta su tráfico, resulta aún más importante disponer de un menú optimizado que ayude a los visitantes a orientarse.

Hay distintas formas de modificar el menú de navegación de WordPress. Si utilizas un tema clásico, puedes aprovechar la potencia del editor de menús integrado. Si tienes un tema de bloques, el bloque de navegación te ofrece más opciones de personalización y diseño.

Antes de hacer cambios importantes en tu web, querrás hacer una copia de seguridad de tu contenido por si algo sale mal. Con Jetpack VaultPress Backup, obtendrás copias de seguridad en la nube en tiempo real, restauraciones sencillas y un registro de actividad de 30 días. ¡Empieza hoy mismo!