Cómo añadir 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 imagen de marca / marca, e impulsar las conversiones. Y hemos visto que cuando se hace bien, un menú de navegación único puede ayudar a aumentar la participación y mantener a la gente en su sitio por más tiempo.

El problema es que todos los temas de WordPress han establecido ubicaciones en las que se puede mostrar un menú de navegación, por lo que cambiarlo puede ser complicado. Esto es especialmente cierto si eres principiante porque modificar archivos de temas es un proceso delicado.

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

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

En este artículo, te mostraremos cómo añadir 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 mejor se adapte a tus necesidades.

¿Por qué añadir 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 su sitio web. Facilitan a los visitantes la búsqueda de contenidos interesantes, lo que puede aumentar las páginas vistas y reducir la tasa de rebote en WordPress.

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

Para ver dónde puedes mostrar los menús en tu tema de WordPress actual, simplemente dirígete a Apariencia ” Menús y luego echa un vistazo a la sección ‘Ubicación de la pantalla’.

La siguiente imagen muestra las ubicaciones que son compatibles con el tema Astra WordPress.

A veces, es posible que desee mostrar un menú en un área que no aparece como “Mostrar ubicación” en su tema.

Con esto en mente, echemos un vistazo a cómo añadir un menú de navegación personalizado a cualquier área de tu tema de WordPress. Simplemente usa los enlaces rápidos de abajo para saltar al método que prefieras:

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

Si utiliza un tema de bloques como ThemeIsle Hestia Pro, puede añadir un menú de navegación personalizado utilizando la edición completa del sitio (FSE) y el editor de bloques.

Para más detalles, puede consultar nuestro artículo sobre los mejores temas de WordPress para la edición completa del sitio.

Este método no funciona con todos los temas, y no te permite personalizar cada parte del menú. Si quieres añadir un menú completamente personalizado a cualquier tema de WordPress, te recomendamos que utilices un plugin maquetador de páginas.

Si utilizas un tema basado en bloques, dirígete a Apariencia “ Editor.

Por defecto, el editor de sitio completo muestra la plantilla de inicio de su tema, pero puede añadir un menú de navegación a cualquier área.

Para ver todas las opciones disponibles, seleccione “Plantillas”, “Patrones” o “Páginas”.

Ahora puede hacer clic en la plantilla, en la parte de la plantilla o en la página en la que desee añadir un menú de navegación personalizado.

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

El siguiente paso es añadir un bloque de navegación a la zona en la que desea mostrar el menú.

En la esquina superior izquierda, haga clic en el botón azul “+”.

Ahora, escribe “Navegación” en la barra de búsqueda.

Cuando aparezca el bloque “Navegación”, simplemente arrástrelo y suéltelo en su estructura / disposición / diseño / plantilla.

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

Si ya ha creado el menú que desea mostrar, haga clic para seleccionar el bloque Navegación. En el menú de la derecha, haz clic en el icono de tres puntos situado junto a “Menú”.

A continuación, puede elegir un menú en el desplegable.

Otra opción es crear un menú dentro del editor del sitio completo añadiendo páginas, entradas, enlaces personalizados y mucho más. Para añadir elementos al nuevo menú, basta con hacer clic en el icono “+”.

Esto abre un mensaje / ventana emergente donde puedes añadir cualquier entrada o página y decidir si estos enlaces deben abrirse en una pestaña nueva.

También puedes añadir una barra de búsqueda al menú de WordPress, añadir iconos de medios sociales y mucho más. En la ventana emergente, simplemente escriba el bloque que desea añadir al menú y seleccione la opción correcta cuando aparezca.

A continuación, puede configurar este bloque mediante los ajustes de la minibarra de herramientas y el menú de la derecha. Repita estos pasos para añadir más elementos al menú.

Cuando estés satisfecho con el aspecto del menú, sólo tienes que hacer clic en el botón “Guardar”.

Su sitio utilizará ahora la nueva plantilla y los visitantes podrán interactuar con su menú de navegación personalizado.

Método 2: Usar un plugin maquetador de páginas (funciona con todos los temas)

El editor de sitios completo te permite añadir menús a temas basados en bloques. Sin embargo, si quieres añadir un menú avanzado y totalmente personalizable a cualquier tema de WordPress, entonces necesitarás un plugin maquetador de páginas.

SeedProd es el mejor plugin maquetador de páginas de WordPress del mercado que le permite personalizar cada parte de su menú de navegación.

Tenemos una amplia experiencia en el uso de esta herramienta para construir menús de navegación personalizados, páginas de destino, y mucho más. Para más detalles, compruebe nuestra completa reseña / valoración de SeedProd.

Cuando se trata de páginas, SeedProd viene con más de 350 plantillas de diseño profesional que puede utilizar como punto de partida. Después de elegir una plantilla, puede añadir un menú de navegación personalizado a su sitio utilizando el bloque Nav Menu de SeedProd.

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

Después de activar el plugin, SeedProd le pedirá su clave de licencia.

Puede encontrar esta información en su cuenta del sitio web de SeedProd. Tras introducir la clave, haga clic en el botón “Verificar clave”.

Una vez hecho esto, vaya a SeedProd ” Páginas de destino y haga clic en el botón “Añadir nueva página de destino”.

Ahora puede elegir una plantilla para su 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 las de ” coming soon” y las de “lead squeeze”. Incluso puedes utilizar las plantillas de SeedProd para mejorar tu página 404.

Para ver más de cerca cualquier diseño, sólo tiene que pasar el ratón por encima de esa plantilla y luego hacer clic en el icono de la lupa.

Cuando encuentre un diseño que desee utilizar, haga clic en “Elegir esta plantilla”.

Estamos utilizando la plantilla ‘Black Friday Sales Page’ en todas nuestras imágenes, pero puedes utilizar cualquier plantilla que desees.

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

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

Tras introducir esta información, haga 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 del núcleo de todas las disposiciones de página de SeedProd.

Para personalizar un bloque, basta con hacer clic para seleccionarlo en el editor de páginas.

La barra de herramientas de la izquierda mostrará ahora todos los ajustes de ese bloque. Por ejemplo, en la imagen siguiente, estamos cambiando el texto dentro de un bloque “Titular”.

Puede dar formato al texto, cambiar su alineación, añadir enlaces, etc., utilizando los ajustes del menú de la izquierda.

Si seleccionas la pestaña “Avanzado”, tendrás acceso a más ajustes. Por ejemplo, puedes hacer que el bloque destaque añadiendo sombras y animaciones CSS.

Para añadir nuevos bloques a su diseño, sólo tiene que buscar cualquier bloque en el menú de la izquierda y arrastrarlo a la página. Si desea borrar un bloque, haga clic para seleccionarlo y utilice el icono de la papelera.

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

Esto crea un menú de navegación con un único elemento / artículo por defecto ‘Acerca de’.

Ahora puede crear un nuevo menú dentro del editor SeedProd o elegir un menú que ya haya creado en el escritorio de WordPress.

Para mostrar un menú que hayas creado anteriormente, sigue adelante y haz clic en el botón ‘Menú WordPress’. Ahora puedes abrir el menú desplegable ‘Menús’ y elegir cualquier opción de la lista.

Después, puedes cambiar el tamaño de la fuente, la alineación del texto, etc., utilizando los ajustes del menú de la izquierda.

Si desea crear un nuevo menú dentro de SeedProd, seleccione el botón “Simple”.

A continuación, haga clic para ampliar el elemento / artículo “Acerca de” que SeedProd crea por defecto.

Esto abre algunos controles donde puede cambiar el texto y añadir la URL a la que enlazará el elemento / artículo del menú.

Por defecto, el enlace será ‘dofollow’ y se abrirá en la misma ventana del navegador / explorador. Puede cambiar estos ajustes utilizando las casillas de verificación de la sección “Enlace URL”.

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

Para añadir más elementos al menú, basta con hacer clic en el botón “Añadir nuevo elemento”.

A continuación, puede personalizar cada uno de estos elementos siguiendo el mismo proceso descrito anteriormente.

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

Incluso puede crear un separador, que aparecerá entre cada elemento del menú.

Después, ve a la pestaña “Avanzado”. Aquí puedes cambiar los colores del menú, el espaciado, la tipografía y otras opciones avanzadas.

A medida que realice cambios, la vista previa en directo se actualizará automáticamente, de modo que podrá probar distintos ajustes para ver qué queda bien en su 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 los ordenadores de sobremesa.

Teniendo esto en cuenta, es posible que desee crear un menú separado para mostrar en los dispositivos móviles. Por ejemplo, puede utilizar una estructura / disposición / diseño / plantilla vertical para que los usuarios móviles no tengan que desplazarse lateralmente. También puede mostrar menos enlaces en los teléfonos inteligentes y las tabletas.

Para crear un menú preparado para dispositivos móviles, basta con diseñar el menú siguiendo el mismo proceso descrito anteriormente. A continuación, seleccione la pestaña “Avanzado” y haga clic para ampliar la sección “Visibilidad de dispositivos”.

Ahora puede conmutar el carrusel / control deslizante “Ocultar en el escritorio”.

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

Cuando esté satisfecho con el aspecto de su menú personalizado, es hora de publicarlo.

Basta con hacer clic en la flecha desplegable situada junto a “Guardar” y seleccionar “Publicar”.

Ahora, si visita su blog de WordPress, verá 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 establecer un plugin maquetador de páginas, puedes añadir un menú de navegación personalizado utilizando código. A menudo encontrarás guías con instrucciones sobre cómo añadir 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 su código podría causar una serie de errores comunes de WordPress o incluso romper su sitio por completo. También perderás el código personalizado cuando actualices tu tema de WordPress.

Por eso recomendamos usar WPCode. Es la forma más fácil y segura de añadir código personalizado en WordPress sin tener que editar ningún archivo del núcleo de WordPress.

Lo primero que tienes que 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.

Una vez activado, vaya a Fragmentos de código “ Añadir fragmento en su escritorio de WordPress.

Aquí verás todos los fragmentos de código ya preparados que puedes añadir a tu sitio. Entre ellos se incluye un fragmento que te permite desactivar completamente los comentarios, subir tipos de archivo que WordPress no suele soportar, desactivar páginas de adjuntos y mucho más.

Para crear su propio fragmento de código, pase el cursor por encima de “Añada su código personalizado” y haga clic en “Usar fragmento de código”.

Para empezar, introduzca un título para el fragmento de código personalizado. Puede ser cualquier cosa que le ayude a identificar el fragmento en su escritorio de WordPress.

A continuación, abra el menú desplegable “Tipo de código” y seleccione “Fragmento de código PHP”.

Una vez hecho esto, basta con pegar el siguiente fragmento de código 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 añadirá una nueva ubicación de menú a tu tema llamada ‘Mi menú personalizado’. Para utilizar un nombre diferente, simplemente retoque el fragmento de código.

Si desea añadir más de un menú de navegación personalizado a su tema, sólo tiene que añadir una línea adicional al fragmento de código.

Por ejemplo, aquí estamos añadiendo 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, desplázate hasta las opciones de ‘Inserción’. Si aún no está seleccionada, elige el método ‘Auto Insertar’ para que WPCode añada el fragmento de código en todo tu sitio.

A continuación, abre el menú desplegable “Ubicación” y haz clic en “Ejecutar en todas partes”.

A continuación, desplázate a la parte superior de la pantalla y haz clic en el conmutador “Inactivo” para que cambie a “Activo”.

Por último, haz clic en “Guardar” para activar este fragmento de código.

Después, vaya a Apariencia ” Menús y busque en el área ‘Ubicación de la pantalla’.

Ahora debería ver una nueva opción “Mi menú personalizado”.

Ahora puede seguir adelante y añadir algunos elementos de menú a la nueva ubicación. Para obtener más información, consulte nuestra guía paso a paso sobre cómo añadir menús de navegación para principiantes.

Cuando esté satisfecho con su menú, el siguiente paso es añadirlo a su tema de WordPress.

Añadir el menú de navegación personalizado a su tema de WordPress

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

Puede añadir el menú de navegación personalizado a cualquier lugar añadiendo algo de código al archivo de plantilla de su tema.

En su escritorio de WordPress, vaya a Apariencia ” Editor de archivos de temas.

En el menú de la derecha, elija la plantilla en la que desea añadir el menú. Por ejemplo, si quieres mostrar el menú de navegación personalizado en la cabecera de tu sitio web, lo normal es que selecciones el archivo header.php.

Si necesita ayuda para encontrar el archivo de plantilla adecuado, consulte nuestra guía sobre cómo encontrar los archivos que debe editar en su tema de WordPress.

Después de seleccionar el archivo, tendrá que añadir una función wp_nav_menu y especificar el nombre de su menú personalizado.

Por ejemplo, en el siguiente fragmento de código, estamos añadiendo ‘Mi menú personalizado’ a la cabecera del tema:

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

Tras añadir el código, haga clic en el botón “Actualizar archivo” para guardar los cambios.

Ahora, si visita su sitio, verá el menú personalizado en acción.

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

Puede personalizar el menú de navegación para que se adapte mejor a su tema de WordPress o a la imagen de marca de su empresa añadiendo código CSS personalizado a su sitio.

Para ello, vaya a Apariencia ” Personalizar.

En el Personalizador de temas de WordPress, haga clic en “CSS adicional”.

Se abrirá un pequeño editor de código en el que podrás introducir código CSS.

Ahora puedes dar estilo a tu menú usando la clase CSS que has añadido a la plantilla de tu tema. En nuestro ejemplo, es .custom_menu_class.

En el siguiente código, añadimos márgenes y relleno, establecemos el color del texto en negro y disponemos los elementos del menú en una disposición 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á satisfecho con el aspecto del menú, haga clic en “Publicar” para aplicar los cambios.

Para obtener más información, consulte nuestra guía sobre cómo aplicar estilo a los menús de navegación de WordPress.

Guías para expertos: Haga más con los menús de navegación de WordPress

Con WordPress, puedes crear todo tipo de menús útiles y atractivos. Con esto en mente, aquí tienes algunas guías de expertos que te ayudarán a sacar aún más partido a tus menús de navegación:

• Cómo añadir iconos de imagen con menús de navegación en WordPress
• Cómo añadir lógica condicional a los menús en WordPress (paso a paso)
• Cómo añadir descripciones de menú en sus temas de WordPress
• Cómo añadir un menú adaptable a pantalla completa en WordPress
• Cómo añadir un Mega Menú a su sitio WordPress (Paso a Paso)

Esperamos que esta guía te haya ayudado a aprender cómo añadir un menú de navegación personalizado en WordPress. Puede que también quieras ver nuestras guías sobre cómo añadir un botón en el menú de cabecera de WordPress o cómo resaltar un elemento / artículo del menú en WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.