Resumen: Cómo personalizar tu menú de WordPress
Hay 4 maneras de personalizar tu menú de WordPress, dependiendo de tu tema y de cuánto control necesites.
- Apariencia → Menús – añade, reordena y elimina elementos del menú en temas clásicos
- SeedProd – control total del diseño sobre colores, fuentes y diseño, además de encabezados para todo el sitio
- Editor de Sitios de WordPress – opción integrada para temas de bloques
- Código personalizado – añade nuevas ubicaciones de menú a tu tema
Tu menú te parece bien. Pero los visitantes siguen aterrizando en las páginas equivocadas, o se rinden y se van.
Quizás los enlaces no apuntan a donde deberían. Quizás el estilo predeterminado se funde con el fondo y no coincide con tu marca. O acabas de publicar una nueva página y no sabes cómo añadirla al menú sin romper el diseño.
He pasado más de 15 años trabajando con WordPress, y los menús son una de esas cosas que suenan sencillas hasta que intentas cambiar uno. En esta guía, te mostraré cómo editar tu menú de WordPress (añadir, reordenar y eliminar elementos) y cómo personalizar su apariencia, utilizando 4 métodos.
La forma más rápida de personalizar tu menú de WordPress es a través de Apariencia → Menús en tu panel. Allí puedes añadir páginas, reordenar elementos, crear desplegables y establecer una ubicación de visualización. Para un control total del diseño sobre fuentes, colores y diseño, utiliza el constructor de arrastrar y soltar de SeedProd. Para temas de bloques, utiliza el Editor de Sitios de WordPress.
Aquí tienes una comparación rápida de las opciones principales:
| Característica | Editor integrado | SeedProd | Editor de Sitios |
|---|---|---|---|
| Edición visual de arrastrar y soltar | No | Sí | Parcialmente |
| Funciona con tu tema | Temas clásicos | Cualquiera (Theme Builder reemplaza tu tema) | Solo temas de bloques |
| Soporte para menús desplegables (submenús) | Sí | Sí (a través de la opción Menú de WordPress) | Sí |
| Estiliza fuentes y colores sin CSS | Raramente | Sí | Sí |
| Gratis de usar | Sí (integrado) | De pago (Pro) | Sí (integrado) |
- ¿Cómo personalizo un menú de WordPress usando el editor predeterminado?
- ¿Cómo personalizo mi menú de WordPress con un constructor de páginas?
- ¿Cómo personalizo un menú usando el Editor de Sitios de WordPress?
- ¿Cómo añado un menú personalizado en WordPress sin un plugin?
- Preguntas Frecuentes
- Más consejos de navegación en WordPress
¿Cómo personalizo un menú de WordPress usando el editor predeterminado?
La forma más fácil de empezar es con el editor de menús integrado en Apariencia → Menús. Funciona con temas clásicos y la mayoría de temas no de bloques, y no necesitas plugins adicionales.
He usado este editor durante años, y sigue siendo la forma más rápida de construir una estructura de navegación básica.
Nota: Si no ves Apariencia → Menús en tu panel de control, tu sitio está ejecutando un tema de bloques (como Twenty Twenty-Five). Salta al método del Editor de sitio en su lugar.
Paso 1. Crear un nuevo menú
Ve a Apariencia → Menús desde tu panel de control de WordPress. Introduce un nombre para el menú en la parte superior, como "Menú Principal", y haz clic en Crear Menú.
Si ya tienes un menú, selecciónalo del menú desplegable en la parte superior. De esta manera, estarás editando el menú correcto, no creando accidentalmente uno nuevo.
Paso 2. Añadir páginas, entradas o enlaces personalizados
A la izquierda, marca las páginas o entradas que deseas agregar y haz clic en Añadir al menú. También puedes incluir categorías, etiquetas o cualquier URL con texto de enlace personalizado expandiendo los paneles de la izquierda.
Paso 3. Reordenar elementos y crear menús desplegables
Después de agregar elementos, arrástralos y suéltalos en el orden que desees. Los elementos en la parte superior de la lista aparecen primero en tu menú.
Para crear un menú desplegable, arrastra un elemento del menú ligeramente hacia la derecha, debajo de otro elemento. Se indentará, que es como WordPress lo reconoce como un submenú. El elemento principal se convierte en el enlace de nivel superior, y el elemento indentado aparece en el menú desplegable cuando un visitante pasa el ratón sobre él.
Paso 4. Eliminar elementos del menú
Para eliminar un elemento, haz clic en la flecha junto a él para expandir su configuración, luego haz clic en Eliminar. Esto lo saca del menú de navegación sin eliminar la página de tu sitio.
Paso 5. Asignar una ubicación de visualización
Desplázate hacia abajo hasta Ajustes del menú y marca una ubicación de visualización.
Las opciones varían según el tema y pueden incluir:
- Menú principal
- Menú secundario
- Menú fuera de pantalla
- Menú de cuenta de usuario
- Menú del pie de página
Paso 6. Guardar el menú
Haz clic en Guardar Menú y tu menú aparecerá en la ubicación que seleccionaste.
Este método maneja la estructura y el orden, pero ofrece un control de estilo limitado. Para un control total del diseño de fuentes, colores y disposición, prueba el método SeedProd a continuación.
¿Cómo personalizo mi menú de WordPress con un constructor de páginas?
Para un mayor control sobre la apariencia de tu menú, un constructor de páginas es el camino a seguir. Usaré SeedProd en este ejemplo, pero principios similares se aplican a cualquier otro constructor de páginas.
SeedProd es un creador de sitios web de arrastrar y soltar para WordPress que te brinda control visual completo sobre tu navegación sin tocar código. Ves cada cambio en vivo a medida que lo realizas: fuentes, colores, enlaces de menú, botones y diseño se ajustan en tiempo real.
Con SeedProd, puedes crear páginas personalizadas, menús y temas completos en un solo lugar. Incluso puedes usarlo para agregar menús personalizados al pie de página, encabezado, barra lateral y contenido de página de tu sitio web.
A continuación, usaré el Theme Builder para editar la barra de navegación de todo el sitio que aparece en cada página. Si solo necesitas un menú en una página independiente, puedes crear una página de destino en su lugar y arrastrar el mismo bloque Nav Menu a su encabezado.
Paso 1. Instalar SeedProd
Primero, descarga el plugin SeedProd e instálalo y actívalo en tu sitio de WordPress.
Para obtener ayuda con este paso, puedes seguir nuestra guía sobre cómo instalar SeedProd.
Luego, ve a SeedProd » Ajustes, pega tu clave de licencia y haz clic en Verificar clave para desbloquear la función Theme Builder.
Paso 2. Abrir el Theme Builder y elegir una plantilla
Ve a SeedProd » Theme Builder en tu panel de control de WordPress para comenzar a crear tu tema y menú de navegación personalizados.
La forma más rápida de configurar tu navegación es comenzar con una plantilla de tema de WordPress prefabricada. Cada plantilla incluye todas las partes de un sitio (encabezado, pie de página, página de inicio y blog), por lo que solo necesitas personalizar el diseño.
Desde el panel del Theme Builder, haz clic en Temas para abrir la galería de plantillas. Puedes previsualizar diseños en una nueva pestaña y elegir uno que se ajuste a tu negocio.
Para este tutorial, usaré el tema Car Maintenance, pero puedes elegir cualquier plantilla. Haz clic en la marca de verificación naranja para importarla a tu sitio.
Una vez importado, SeedProd crea automáticamente la estructura de tu sitio, incluyendo el encabezado, el pie de página y las páginas del blog. Ahora puedes abrir cualquier parte en el editor de arrastrar y soltar para empezar a personalizar.
Paso 3. Personalizar la Plantilla de Encabezado
Tu barra de navegación se encuentra dentro de la plantilla del encabezado. Los temas predefinidos de SeedProd suelen añadir una automáticamente, así que todo lo que necesitas hacer es abrir el encabezado y personalizarlo.
Para editar tu encabezado, pasa el ratón por encima de la plantilla de Encabezado en el Theme Builder y haz clic en Editar diseño. Esto abre el editor de arrastrar y soltar en vivo.
Haz clic en cualquier elemento de la vista previa para editarlo. El panel de ajustes aparece a la izquierda, donde puedes cambiar el texto, el estilo y la funcionalidad.
Por ejemplo, haz clic en el bloque del logo para eliminar el logo de marcador de posición y subir el tuyo desde la biblioteca de medios de WordPress.
También puedes arrastrar nuevos bloques, como iconos de redes sociales, una barra de búsqueda o botones personalizados, al encabezado para expandir tu barra de navegación.
Con los elementos básicos del encabezado cubiertos, estás listo para editar el menú de navegación en sí en el siguiente paso.
Paso 4. Editar el bloque de menú de navegación
SeedProd utiliza un bloque de Menú de Navegación para mostrar la navegación de tu sitio. Este bloque te ofrece dos formas de gestionar menús: una opción sencilla para enlaces rápidos o una opción de Menú de WordPress para un control avanzado.
Opción 1: Menú Sencillo
Añade enlaces directamente dentro del constructor a cualquier página, publicación, categoría, etiqueta o URL externa. Es rápido de configurar pero no admite menús desplegables ni menús de WordPress existentes.
Puedes estilizar el menú Simple con opciones de alineación, tamaño de fuente, espaciado y divisores. En la pestaña Avanzado, alterna entre diseños horizontales o verticales y ajusta la tipografía, los colores, las sombras del texto, los colores al pasar el ratón y los bordes.
Opción 2: Menú de WordPress
Selecciona un menú que ya hayas creado en el editor de menús de WordPress desde el desplegable. Esta opción soporta menús desplegables y navegación móvil, e hereda la flexibilidad de los ajustes integrados de Apariencia » Menús de WordPress.
También verás un enlace rápido a la página predeterminada de menús de WordPress, donde puedes ajustar la estructura de tu menú. Al igual que con el menú Simple, la pestaña Avanzado te permite personalizar fuentes, colores, sombras, visibilidad por dispositivo y más.
Incluso puedes mostrar tu menú en un diseño vertical u horizontal. El diseño vertical funciona bien para áreas de widgets de barra lateral y ubicaciones de menú en el pie de página.
Cómo añadir un botón de menú en WordPress
Un botón de menú es una excelente manera de resaltar acciones como "Registrarse" o "Empezar". En SeedProd, puedes añadir uno con el bloque Botón.
Desde la barra lateral izquierda, arrastra el bloque Botón a tu encabezado. Luego, personaliza el texto de la llamada a la acción, el enlace y el estilo directamente en el panel de configuración.
Consejo profesional: Elimina cualquier elemento que no necesites pasando el cursor sobre él y haciendo clic en el icono de la papelera.
Cuando tu menú tenga el aspecto deseado, haz clic en Guardar en la esquina superior derecha y cierra el editor para volver al panel del Theme Builder.
Consejo de conversión: Tu barra de navegación no tiene por qué ser solo enlaces. Añadir un botón "Pedir presupuesto" o "Reservar demo" que enlace a una página de destino dedicada convierte tu encabezado en una herramienta de conversión. He visto sitios duplicar sus envíos de formularios de contacto solo por hacer visible esa llamada a la acción en cada página.
Paso 5. Publicar tu tema personalizado
Después de editar tus plantillas de menú y encabezado, estarás listo para publicar los cambios. Busca el interruptor Habilitar tema SeedProd en la página del Constructor de Temas y ponlo en la posición "Activado".
Ahora ve a tu página de inicio para ver tu nuevo menú de navegación personalizado en vivo en tu sitio.
¿Cómo personalizo un menú usando el Editor de Sitios de WordPress?
Los dos primeros métodos funcionan para cualquier sitio web, independientemente del tema que utilices. Sin embargo, si estás utilizando un tema de WordPress basado en bloques, como Twenty Twenty-Five, es posible que prefieras usar el editor de sitios de WordPress para personalizar tu menú.
Ten en cuenta: este método no funciona con todos los temas ni te permite personalizar todas las partes del menú.
Para abrir el editor de sitios, navega a Apariencia » Editor desde tu panel de WordPress.
En la siguiente pantalla, haz clic en la pestaña Patrones. En WordPress 6.5 y versiones posteriores, busca en Patrones → Partes de Plantilla si no ves la opción Encabezado inmediatamente.
Desde allí, haz clic en la opción Encabezado y elige tu plantilla de Encabezado.
Aquí, puedes arrastrar y soltar para reorganizar la posición del menú o eliminar elementos del menú.
También puedes hacer clic en el icono del lápiz para editar el estilo del menú.
Por ejemplo, puedes ajustar el color de fondo del menú, las fuentes, el relleno, los márgenes, los bordes y más.
Si te desplazas hacia abajo hasta la pestaña Avanzado, puedes introducir clases CSS personalizadas.
Para añadir otra opción de menú, como un botón de encabezado, haz clic en el icono Añadir bloque.
Ahora puedes buscar un bloque y hacer clic en él para añadirlo a tu menú y personalizarlo como cualquier otro bloque de WordPress.
Cuando estés satisfecho con la configuración y personalización del menú, haz clic en el botón Guardar.
Ahora puedes visitar tu sitio para ver tu menú personalizado.
¿Cómo añado un menú personalizado en WordPress sin un plugin?
Si no quieres configurar un plugin de constructor de páginas y no tienes un tema de bloques de WordPress, siempre puedes usar código para añadir un menú de navegación personalizado.
Para ello, te recomiendo usar un plugin de fragmentos de código de WordPress como WPCode. Es la forma más segura y sencilla de añadir código personalizado a WordPress sin editar los archivos principales de WordPress, como tu archivo functions.php.
Para hacer esto, instala el plugin gratuito WPCode, luego ve a Fragmentos de código » Añadir fragmento desde tu panel de WordPress.
En esta página, verás fragmentos predefinidos que puedes añadir a tu sitio con unos pocos clics.
Para este tutorial, quiero crear mi propio fragmento, así que pasa el ratón sobre 'Añadir tu código personalizado' y haz clic en el botón Usar fragmento.
Ahora introduce un título para tu fragmento, abre el menú desplegable "Tipo de código" y haz clic en Fragmento de PHP.
A continuación, pega el siguiente fragmento en el editor de código:
function wpb_custom_new_menu() {
register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );Este fragmento añade una nueva ubicación de menú a tu tema, "Mi Menú Personalizado".
Una vez que lo hayas hecho, desplázate hacia abajo hasta las opciones de inserción y elige el método "Insertar automáticamente" para añadir el fragmento en todo tu sitio.
Desde allí, abre el menú desplegable "Ubicación" y haz clic en Ejecutar en todas partes.
Ahora puedes desplazarte hasta la parte superior de la pantalla y hacer clic en el interruptor "Inactivo" para cambiarlo a "Activo".
Finalmente, haz clic en Guardar para activar el fragmento.
Ahora, ve a Apariencia » Menús y mira el área de "Ubicación de visualización".
Deberías ver una nueva opción "Mi Menú Personalizado" en esta área donde puedes añadir elementos de menú.
El siguiente paso es añadir tu menú personalizado a tu tema de WordPress.
Puedes mostrar un menú de navegación personalizado en cualquier lugar de tu sitio añadiendo código al archivo de plantilla de tu tema.
Simplemente ve a Apariencia » Editor de archivos de tema.
Luego, en el menú de la derecha, busca la plantilla donde quieres añadir el menú, como el encabezado de tu sitio web.
Ahora necesitarás añadir una función wp_nav_menu y especificar el nombre de tu menú personalizado. Por ejemplo, en el siguiente fragmento de código, estoy añadiendo Mi Menú Personalizado al encabezado del tema:
wp_nav_menu( array( 'theme_location'=>'my-custom-menu', 'container_class'=>'custom-menu-class' ) );Después de añadir el código, haz clic en el botón Actualizar archivo para guardar tus cambios.
Ahora, si visitas tu sitio, verás el menú personalizado en acción, sin embargo, notarás que aparece en una simple lista con viñetas.
Puedes estilizar el menú para que coincida mejor con tu tema de WordPress o tu marca añadiendo código CSS personalizado a tu sitio.
Para hacer esto, ve a Apariencia » Personalizar y haz clic en CSS adicional en el personalizador de WordPress.
Esto abre un editor donde puedes escribir tu CSS personalizado.
Ahora puedes estilizar tu menú usando la clase CSS que añadiste a la plantilla de tu tema. En mi ejemplo, es .custom_menu_class.
En el siguiente código, estoy añadiendo márgenes y relleno, estableciendo el color del texto en negro y organizando el menú en un diseño horizontal:
div.custom-menu-class ul {
margin:20px 0px 20px 0px;
list-style-type: none;
list-style: none;
list-style-image: none;
text-align:right;
display:inline-block;
}
div.custom-menu-class li {
padding: 0px 20px 0px 0px;
display: inline-block;
}
div.custom-menu-class a {
color:#000;
}El personalizador de WordPress se actualiza automáticamente para que puedas ver cómo queda el menú con el nuevo estilo. Si estás satisfecho con los cambios, entonces Publica para hacerlos efectivos.
Preguntas Frecuentes
¿Cómo personalizo mi menú de navegación de WordPress?
La forma más rápida es ir a Apariencia → Menús en tu panel de WordPress. Añade las páginas o publicaciones que quieras, asigna el menú a una ubicación de visualización como Menú principal y haz clic en Guardar menú. Para un mayor control de diseño sobre fuentes, colores y diseño, utiliza el constructor de arrastrar y soltar de SeedProd o el Editor de Sitios de WordPress para temas de bloques.
¿Cómo edito el menú de navegación en un sitio web de WordPress?
Ve a Apariencia → Menús en tu panel de WordPress y selecciona el menú que deseas editar. Añade o elimina elementos, reordénalos arrastrando y haz clic en Guardar menú. Editar un menú no afecta a tus páginas o publicaciones, solo controla qué enlaces aparecen en tu navegación. Si estás utilizando un tema de bloques, usa el Editor del Sitio de WordPress en Apariencia → Editor para editar el bloque de navegación directamente.
¿Por qué no encuentro la opción Menús en Apariencia en WordPress?
Si no ves Menús en Apariencia, tu sitio está ejecutando un tema de bloques (como Twenty Twenty-Four o Twenty Twenty-Five). Los temas de bloques gestionan la navegación a través del Editor del Sitio, no de la pantalla clásica de Menús. Ve a Apariencia → Editor, luego busca la sección Navegación para editar el menú de tu sitio. Alternativamente, SeedProd funciona con cualquier tema y te da control visual completo sobre tu navegación sin el Editor del Sitio.
¿Puedo personalizar un menú de WordPress sin un plugin?
Sí. WordPress incluye un editor de menús integrado en Apariencia → Menús que funciona sin necesidad de plugins. Para temas de bloques, utiliza el Editor del Sitio de WordPress. Para añadir una ubicación de menú personalizada, usa un fragmento de código PHP con un plugin de código como WPCode. La desventaja es que el estilo se limita a lo que tu tema soporte, por lo que si deseas cambiar fuentes, colores o diseño sin escribir CSS, un constructor visual como SeedProd es el camino más fácil.
¿Cómo añado un menú desplegable en WordPress?
En Apariencia → Menús, arrastra un elemento del menú ligeramente hacia la derecha debajo de un elemento padre. WordPress lo indentará y lo tratará como un desplegable. Puedes anidar hasta tres niveles de profundidad. Para controlar el estilo visual del desplegable, el bloque de Menú de Navegación de SeedProd incluye efectos de pasar el ratón, colores y opciones de diseño integrados.
¿Cómo hago que mi menú de WordPress sea fijo (fijo al desplazarse)?
Una barra de navegación fija permanece visible mientras los visitantes se desplazan por la página. En SeedProd, abre la plantilla de Encabezado en el Theme Builder, haz clic en la fila del encabezado y busca la opción Encabezado Fijo en el panel de configuración de la izquierda. Actívala y guarda. Para el editor de menús integrado de WordPress, el comportamiento fijo depende de tu tema. Muchos temas incluyen una opción de encabezado fijo en el Personalizador (Apariencia → Personalizar). Si el tuyo no lo tiene, necesitarás un plugin o CSS personalizado para añadirlo.
Más consejos de navegación en WordPress
Si deseas un control total del diseño de tu navegación de WordPress, SeedProd facilita la creación de menús, encabezados y diseños personalizados sin tocar código. Obtén SeedProd Ahora
- Cómo editar menús móviles en WordPress (Guía para principiantes)
- Cómo añadir un icono de carrito de compras de WooCommerce en los menús
- Cómo crear una página de destino sin navegación (forma fácil)
¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.
