Cómo agregar menús de navegación personalizados en temas de WordPress

En WPBeginner, hemos ayudado a innumerables lectores a personalizar sus sitios de WordPress para mejorar la experiencia del usuario, impulsar la marca y generar conversiones. Y hemos visto que, cuando se hace correctamente, un menú de navegación único puede ayudar a aumentar la participación y mantener a las personas en su sitio por más tiempo.

El problema es que todos los temas de WordPress tienen ubicaciones preestablecidas donde puedes mostrar un menú de navegación, por lo que cambiar esto puede ser complicado. Esto es especialmente cierto si eres principiante, ya que modificar los archivos del tema es un proceso delicado.

Cuando usas un tema de bloques, puedes hacerlo con el Editor de Sitio Completo. Pero, en nuestra experiencia, hay mejores opciones que funcionarán para todo tipo de temas.

Por ejemplo, si deseas personalizaciones avanzadas, puedes usar un potente constructor de páginas como SeedProd. O, si buscas una forma sencilla de usar código personalizado, WPCode es, con diferencia, la mejor opción.

En este artículo, te mostraremos cómo agregar un menú de navegación personalizado a cualquier área de tu tema de WordPress. Te guiaremos a través de 3 opciones diferentes para que puedas elegir el tutorial que sea adecuado para tus necesidades.

¿Por qué agregar menús de navegación personalizados en temas de WordPress?

Un menú de navegación es una lista de enlaces que apuntan a áreas importantes de tu sitio web. Hacen que sea fácil para los visitantes encontrar contenido interesante, lo que puede aumentar las visitas a la página y reducir la tasa de rebote en WordPress.

La ubicación exacta de tu menú variará según tu tema de WordPress. La mayoría de los temas tienen varias opciones, por lo que puedes crear diferentes menús y mostrarlos en distintas ubicaciones.

Para ver dónde puedes mostrar menús en tu tema actual de WordPress, simplemente dirígete a Apariencia » Menús y luego revisa la sección 'Ubicación de visualización'.

La siguiente imagen muestra las ubicaciones que soporta el tema de WordPress Astra.

A veces, es posible que desees mostrar un menú en un área que no esté listada como 'Ubicación de visualización' en tu tema.

Teniendo esto en cuenta, veamos cómo agregar un menú de navegación personalizado a cualquier área de tu tema de WordPress. Simplemente usa los enlaces rápidos a continuación para saltar al método que prefieras:

• Método 1: Usando el Editor de Sitio Completo (Solo Temas Basados en Bloques)
• Método 2: Usando un Plugin Constructor de Páginas (Funciona Con Todos los Temas)
• Method 3: Create a Custom Navigation Menu in WordPress Using Code (Advanced)

Método 1: Usando el Editor de Sitio Completo (Solo Temas Basados en Bloques)

Si estás usando un tema de bloques como ThemeIsle Hestia Pro, entonces puedes agregar un menú de navegación personalizado usando la Edición de Sitio Completo (FSE) y el editor de bloques.

Para más detalles, puedes ver nuestro artículo sobre los mejores temas de edición de sitio completo de WordPress.

Este método no funciona con todos los temas y no te permite personalizar cada parte del menú. Si deseas agregar un menú completamente personalizado a cualquier tema de WordPress, te recomendamos usar en su lugar un constructor de páginas.

Si estás usando un tema basado en bloques, dirígete a Apariencia » Editor.

Por defecto, el editor de sitio completo muestra la plantilla de inicio de tu tema, pero puedes agregar un menú de navegación a cualquier área.

Para ver todas las opciones disponibles, simplemente selecciona 'Plantillas', 'Patrones' o 'Páginas'.

Ahora puedes hacer clic en la plantilla, parte de plantilla o página donde deseas agregar un menú de navegación personalizado.

WordPress ahora mostrará una vista previa del diseño. Para editar esta plantilla, haz clic en el pequeño ícono del lápiz.

El siguiente paso es agregar un bloque de Navegación al área donde deseas mostrar tu menú.

En la esquina superior izquierda, haz clic en el botón azul con el símbolo ‘+’.

Ahora, escribe ‘Navegación’ en la barra de búsqueda.

Cuando aparezca el bloque ‘Navegación’, simplemente arrástralo y suéltalo en tu diseño.

A continuación, haz clic para seleccionar el bloque de Navegación.

Si ya creaste el menú que deseas mostrar, haz clic para seleccionar el bloque de Navegación. En el menú de la derecha, haz clic en el ícono de tres puntos junto a 'Menú'.

Luego puedes elegir un menú del menú desplegable.

Otra opción es crear un menú dentro del editor de sitio completo agregando páginas, entradas, enlaces personalizados y más. Para agregar elementos al nuevo menú, simplemente haz clic en el ícono '+'.

Esto abre una ventana emergente donde agregas cualquier entrada o página y decides si estos enlaces deben abrirse en una nueva pestaña.

También puedes agregar una barra de búsqueda al menú de WordPress, agregar íconos de redes sociales y más. En la ventana emergente, simplemente escribe el bloque que deseas agregar al menú y selecciona la opción correcta cuando aparezca.

Luego puedes configurar este bloque usando la configuración en la mini barra de herramientas y el menú de la derecha. Simplemente repite estos pasos para agregar más elementos al menú.

Cuando estés satisfecho con cómo se ve el menú, simplemente haz clic en el botón 'Guardar'.

Tu sitio ahora estará usando la nueva plantilla, y los visitantes podrán interactuar con tu menú de navegación personalizado.

Método 2: Usando un Plugin Constructor de Páginas (Funciona Con Todos los Temas)

El editor de sitio completo te permite agregar menús a temas basados en bloques. Sin embargo, si deseas agregar un menú avanzado y completamente personalizable a cualquier tema de WordPress, necesitarás un plugin de constructor de páginas.

SeedProd es el mejor plugin constructor de páginas de WordPress del mercado que te permite personalizar cada parte de tu menú de navegación.

Tenemos una amplia experiencia utilizando esta herramienta para crear menús de navegación personalizados, páginas de destino y mucho más. Para más detalles, consulta nuestra reseña completa de SeedProd.

En cuanto a páginas, SeedProd viene con más de 350 plantillas diseñadas profesionalmente que puedes usar como punto de partida. Después de elegir una plantilla, puedes agregar un menú de navegación personalizado a tu sitio usando el bloque Nav Menu listo para usar de SeedProd.

Primero, necesitas instalar y activar el plugin SeedProd. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Después de activar el plugin, SeedProd te pedirá tu clave de licencia.

Puedes encontrar esta información en tu cuenta en el sitio web de SeedProd. Después de ingresar la clave, haz clic en el botón ‘Verificar clave’.

Una vez que hayas hecho eso, ve a SeedProd » Páginas de destino y haz clic en el botón 'Agregar nueva página de destino'.

Ahora puedes elegir una plantilla para tu página personalizada.

Para ayudarte a encontrar el diseño adecuado, todas las plantillas de SeedProd están organizadas en diferentes tipos de campañas, como próximamente y campañas de captación de leads. Incluso puedes usar las plantillas de SeedProd para mejorar tu página 404.

Para ver de cerca cualquier diseño, simplemente pasa el cursor del ratón sobre esa plantilla y luego haz clic en el icono de la lupa.

Cuando encuentres un diseño que quieras usar, haz clic en ‘Elegir esta plantilla’.

Estamos usando la plantilla ‘Página de ventas Black Friday’ en todas nuestras imágenes, pero puedes usar la plantilla que desees.

Después de elegir una plantilla, escribe un nombre para esa página personalizada. SeedProd creará automáticamente una URL basada en el título de la página, pero puedes cambiar esta URL por lo que quieras.

Por ejemplo, podrías agregar palabras clave relevantes para ayudar a los motores de búsqueda a entender de qué trata la página. Esto puede mejorar tu SEO de WordPress y ayudar al motor de búsqueda a mostrar la página a personas que buscan contenido como el tuyo.

Después de ingresar esta información, haz clic en el botón ‘Guardar y empezar a editar la página’.

La mayoría de las plantillas ya contienen algunos bloques, que son los componentes principales de todos los diseños de página de SeedProd.

Para personalizar un bloque, simplemente haz clic para seleccionarlo en el editor de páginas.

La barra de herramientas de la izquierda ahora mostrará todas las configuraciones de ese bloque. Por ejemplo, en la imagen de abajo, estamos cambiando el texto dentro de un bloque de ‘Encabezado’.

Puedes formatear el texto, cambiar su alineación, agregar enlaces y más usando las configuraciones en el menú de la izquierda.

Si seleccionas la pestaña ‘Avanzado’, tendrás acceso a aún más configuraciones. Por ejemplo, puedes hacer que el bloque destaque realmente agregando sombras de caja y animaciones CSS.

Para agregar nuevos bloques a tu diseño, simplemente busca cualquier bloque en el menú de la izquierda y arrástralo a la página. Si quieres eliminar un bloque, haz clic para seleccionarlo y luego usa el ícono del bote de basura.

Como queremos crear un menú de navegación personalizado, arrastra un bloque de ‘Menú de Navegación’ a la página.

Esto crea un menú de navegación con un solo elemento predeterminado de ‘Acerca de’.

Ahora puedes crear un nuevo menú dentro del editor de SeedProd o elegir un menú que ya hayas creado en el panel de WordPress.

Para mostrar un menú que hayas creado previamente, haz clic en el botón ‘WordPress Menu’. Ahora puedes abrir el menú desplegable ‘Menus’ y elegir cualquier opción de la lista.

Después de eso, puedes cambiar el tamaño de fuente, la alineación del texto y más usando la configuración en el menú de la izquierda.

Si prefieres crear un nuevo menú dentro de SeedProd, selecciona el botón ‘Simple’.

Luego, haz clic para expandir el elemento ‘About’ que SeedProd crea por defecto.

Esto abre algunos controles donde puedes cambiar el texto y agregar la URL a la que se enlazará el elemento del menú.

Por defecto, el enlace será ‘dofollow’ y se abrirá en la misma ventana del navegador. Puedes cambiar estas configuraciones usando las casillas de verificación en la sección ‘URL Link’.

En la siguiente imagen, estamos creando un enlace ‘nofollow’ que se abrirá en una nueva ventana. Para más información sobre este tema, por favor consulta nuestra guía para principiantes sobre enlaces nofollow.

Para agregar más elementos al menú, simplemente haz clic en el botón ‘Add New Item’.

Luego puedes personalizar cada uno de estos elementos siguiendo el mismo proceso descrito anteriormente.

El menú de la izquierda también tiene configuraciones que cambian el tamaño de fuente y la alineación del texto.

Incluso puedes crear un divisor, que aparecerá entre cada elemento del menú.

Después de eso, ve y cambia a la pestaña ‘Advanced’. Aquí, puedes cambiar los colores, el espaciado, la tipografía y otras opciones avanzadas del menú.

A medida que realices cambios, la vista previa en vivo se actualizará automáticamente, para que puedas probar diferentes configuraciones y ver qué se ve bien en tu diseño.

Por defecto, SeedProd muestra el mismo menú en dispositivos móviles y de escritorio. Sin embargo, los dispositivos móviles suelen tener pantallas mucho más pequeñas en comparación con las computadoras de escritorio.

Teniendo esto en cuenta, es posible que desees crear un menú separado para mostrar en dispositivos móviles. Por ejemplo, podrías usar un diseño vertical para que los usuarios móviles no necesiten desplazarse horizontalmente. También podrías querer mostrar menos enlaces en teléfonos inteligentes y tabletas.

Para crear un menú listo para móviles, simplemente diseña el menú siguiendo el mismo proceso descrito anteriormente. Luego, selecciona la pestaña 'Avanzado' y haz clic para expandir la sección 'Visibilidad del dispositivo'.

Ahora puedes activar el control deslizante 'Ocultar en escritorio'.

Ahora, SeedProd solo mostrará este menú a los usuarios móviles.

Cuando estés contento con cómo se ve tu menú personalizado, es hora de publicarlo.

Simplemente haz clic en la flecha desplegable junto a 'Guardar' y luego selecciona 'Publicar'.

Ahora, si visitas tu blog de WordPress, verás el menú de navegación personalizado en acción.

Método 3: Crear un menú de navegación personalizado en WordPress usando código (Avanzado)

Si no quieres configurar un plugin de constructor de páginas, puedes agregar un menú de navegación personalizado usando código. A menudo encontrarás guías con instrucciones sobre cómo agregar fragmentos de código personalizados al archivo functions.php de tu tema.

Sin embargo, no recomendamos este método, ya que incluso un pequeño error en tu código podría causar una serie de errores comunes de WordPress o incluso romper tu sitio por completo. También perderás el código personalizado cuando actualices tu tema de WordPress.

Es por eso que recomendamos usar WPCode. Es la forma más fácil y segura de agregar código personalizado en WordPress sin tener que editar ningún archivo principal de WordPress.

Lo primero que necesitas hacer es instalar y activar el plugin gratuito WPCode. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, ve a Fragmentos de código » Agregar fragmento en tu panel de WordPress.

Aquí, verás todos los fragmentos prefabricados que puedes agregar a tu sitio.  Estos incluyen un fragmento que te permite deshabilitar completamente los comentarios, cargar tipos de archivo que WordPress normalmente no admite, deshabilitar las páginas de adjuntos, y mucho más.

Para crear tu propio fragmento, coloca el cursor sobre ‘Agregar tu código personalizado (Nuevo fragmento)’ y luego haz clic en el botón ‘+ Agregar fragmento personalizado’.

A continuación, debes elegir un tipo de código de la lista de opciones que aparecen en la pantalla. Para este tutorial, selecciona ‘Fragmento PHP’ como tipo de código.

Ahora serás dirigido a la página Crear fragmento personalizado.

Para empezar, ingresa un título para el fragmento de código personalizado. Puede ser cualquier cosa que te ayude a identificar el fragmento en tu panel de WordPress.

Una vez que hayas hecho eso, simplemente 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' );

Esto agregará una nueva ubicación de menú a tu tema llamada ‘Mi Menú Personalizado’. Para usar un nombre diferente, simplemente ajusta el fragmento de código.

Si deseas agregar más de un menú de navegación personalizado a tu tema, simplemente agrega una línea adicional al fragmento de código.

Por ejemplo, aquí estamos agregando dos nuevas ubicaciones de menú a nuestro tema, llamadas ‘Mi Menú Personalizado’ y ‘Menú Extra’:

function wpb_custom_new_menu() {
  register_nav_menus(
    array(
      'my-custom-menu' => __( 'My Custom Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'wpb_custom_new_menu' );

Después de eso, desplázate hasta las opciones de ‘Inserción’. Si no está seleccionado, elige el método ‘Insertar automáticamente’ para que WPCode inserte el fragmento en todo tu sitio.

Luego, abre el menú desplegable ‘Ubicación’ y haz clic en ‘Ejecutar en todas partes’.

Ahora, estás listo para desplazarte hasta la parte superior de la pantalla y hacer clic en el interruptor ‘Inactivo’ para que cambie a ‘Activo’.

Finalmente, haz clic en ‘Guardar’ para que este fragmento se active.

Después de eso, ve a Apariencia » Menús y mira el área de ‘Ubicación de visualización’.

Ahora deberías ver una nueva opción de ‘Mi Menú Personalizado’.

Ahora puedes proceder a agregar algunos elementos al menú en la nueva ubicación. Para más información, por favor consulta nuestra guía paso a paso sobre cómo agregar menús de navegación para principiantes.

Cuando estés satisfecho con tu menú, el siguiente paso es agregarlo a tu tema de WordPress.

Agregar el menú de navegación personalizado a tu tema de WordPress

La mayoría de los sitios web muestran el menú de navegación directamente debajo de la sección del encabezado. Esto significa que el menú es una de las primeras cosas que ven los visitantes, junto con el logo del sitio o el título.

Puedes agregar el menú de navegación personalizado a cualquier ubicación agregando algo de código al archivo de plantilla de tu tema.

En tu panel de WordPress, ve a Apariencia » Editor de archivos de tema.

En el menú de la derecha, elige la plantilla donde deseas agregar el menú. Por ejemplo, si deseas mostrar el menú de navegación personalizado en el encabezado de tu sitio web, entonces normalmente seleccionarás el archivo header.php.

Para obtener ayuda para encontrar el archivo de plantilla correcto, consulta nuestra guía sobre cómo encontrar qué archivos editar en tu tema de WordPress.

Después de seleccionar el archivo, deberás agregar una función wp_nav_menu y especificar el nombre de tu menú personalizado.

Por ejemplo, en el siguiente fragmento de código, estamos agregando 'Mi Menú Personalizado' al encabezado del tema:

wp_nav_menu( array( 'theme_location'=>'my-custom-menu', 'container_class'=>'custom-menu-class' ) );

Después de agregar 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.

Por defecto, tu menú aparecerá como una lista simple con viñetas.

Puedes estilizar el menú de navegación personalizado para que coincida mejor con tu tema de WordPress o la marca de tu empresa agregando código CSS personalizado a tu sitio.

Para hacer esto, ve a Apariencia » Personalizar.

En el personalizador de temas de WordPress, haz clic en 'CSS adicional'.

Esto abre un pequeño editor de código donde puedes escribir algo de CSS.

Ahora puedes estilizar tu menú usando la clase CSS que agregaste a la plantilla de tu tema. En nuestro ejemplo, esta es .custom_menu_class.

En el siguiente código, estamos agregando márgenes y relleno, estableciendo el color del texto en negro y organizando los elementos del 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 actualizará automáticamente.

Ahora mostrará cómo se verá el menú con el nuevo estilo.

Si estás contento con cómo se ve el menú, haz clic en 'Publicar' para que tus cambios se hagan en vivo.

Para más información, por favor consulta nuestra guía sobre cómo estilizar menús de navegación de WordPress.

Guías de Expertos: Haz Más Con los Menús de Navegación de WordPress

Con WordPress, puedes crear todo tipo de menús útiles y atractivos. Teniendo esto en cuenta, aquí tienes algunas guías de expertos para ayudarte a sacar aún más provecho de tus menús de navegación:

• Cómo Agregar Iconos de Imagen Con Menús de Navegación en WordPress
• Cómo agregar lógica condicional a los menús en WordPress (paso a paso)
• Cómo agregar descripciones de menú en tus temas de WordPress
• Cómo agregar un menú adaptable de pantalla completa en WordPress
• Cómo agregar un menú mega en tu sitio de WordPress (paso a paso)

Esperamos que esta guía definitiva te haya ayudado a aprender cómo agregar un menú de navegación personalizado en WordPress. También puedes consultar nuestras guías sobre cómo agregar un botón en tu menú de encabezado de WordPress o cómo resaltar un elemento del menú en WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.