15 mejores tutoriales para dominar los menús de navegación de WordPress

¿Estás buscando los mejores tutoriales para trabajar con los menús de navegación de WordPress? Los menús de navegación de WordPress le permiten personalizar y administrar fácilmente los menús en su sitio web. En este artículo, le mostraremos los mejores tutoriales para dominar los menús de navegación de WordPress.

Los mejores tutoriales para dominar los menús de navegación de WordPress

Como se trata de un artículo extenso, hemos agregado una lista de contenidos para facilitar la navegación.

  1. Comenzando con los menús de navegación de WordPress
  2. Agregar iconos de redes sociales a los menús de WordPress
  3. Mostrar diferentes menús para usuarios registrados en WordPress
  4. Agregar lógica condicional a los menús de navegación
  5. Estilo de los menús de navegación de WordPress
  6. Agregar iconos de imagen con menús de navegación en WordPress
  7. Agregar menús de navegación personalizados en WordPress
  8. Agregar menú del panel de diapositivas en temas de WordPress
  9. Crear un menú de WordPress receptivo listo para dispositivos móviles
  10. Agregar un menú receptivo a pantalla completa en WordPress
  11. Agregar descripción con menús de navegación en WordPress
  12. Cómo agregar temas en los menús de navegación de WordPress
  13. Cómo agregar menús de navegación en la barra lateral de WordPress
  14. Agregue el menú de navegación de WordPress en publicaciones y páginas
  15. Agregue enlaces NoFollow en los menús de navegación de WordPress

1. Introducción a los menús de navegación de WordPress

En el diseño web, el menú de navegación es una lista de enlaces que permite a los visitantes de su sitio web visitar diferentes páginas y secciones en su sitio web. Ayuda a los usuarios a navegar por su sitio web, de ahí el nombre del menú de navegación.

Menú de Navegación

WordPress viene con una herramienta integrada que le permite crear y usar menús en su sitio web. Esta herramienta se encuentra en Apariencia »Menús página en su área de administración de WordPress.

Crear y administrar menús de navegación en WordPress

Aquí puede crear menús agregando elementos de la columna de la izquierda a la derecha. Puede agregar cualquier publicación de WordPress, página, categorías y enlaces personalizados a sus menús.

Para obtener instrucciones detalladas, consulte nuestra guía para principiantes sobre cómo agregar menús de navegación en WordPress.

2. Agregar iconos de redes sociales a los menús de WordPress

Los menús de WordPress también se pueden usar para agregar botones de redes sociales a su sitio web. Esto le permite actualizar fácilmente los iconos, reorganizarlos y agregar nuevos iconos de redes sociales cuando lo desee.

La forma más fácil de hacer esto es mediante el uso del complemento Menú de iconos sociales. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Tras la activación, dirígete a Apariencia »Menús página. Cree un nuevo menú social y luego en la pestaña de enlaces personalizados de la columna izquierda.

Agregar menús sociales

Verá los iconos de redes sociales debajo del texto del enlace y los campos de URL. Todo lo que necesita hacer es hacer clic en un icono de redes sociales e ingresar la URL de su perfil social. Cuando haya terminado, haga clic en el botón Agregar al menú.

Repita este proceso para todos los perfiles de redes sociales que desee agregar. Una vez que haya terminado, seleccione una ubicación de menú y luego haga clic en el botón Guardar menú.

Para obtener instrucciones más detalladas, consulte nuestra guía sobre cómo agregar iconos de redes sociales a los menús de WordPress.

3. Mostrar diferentes menús para usuarios registrados en WordPress

Si ejecuta un sitio de membresía de WordPress, es posible que desee mostrar diferentes menús a sus usuarios registrados. Aquí es cómo puede lograr esto fácilmente.

Primero necesitas crear dos menús diferentes. Uno para los usuarios que han iniciado sesión y otro para los usuarios que no han iniciado sesión. Puede nombrar estos menús conectados y desconectados.

A continuación, debe agregar este código al archivo functions.php de su tema o un complemento específico del sitio.

function my_wp_nav_menu_args( $args="" ) {

if( is_user_logged_in() ) { 
	$args['menu'] = 'logged-in';
} else { 
	$args['menu'] = 'logged-out';
} 
	return $args;
}
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );

Eso es todo. Ahora puede probar sus menús de navegación en acción.

Para obtener instrucciones más detalladas, consulte nuestro tutorial sobre cómo mostrar diferentes menús a los usuarios registrados en WordPress.

4. Agregar lógica condicional a los menús de navegación

¿Quiere cambiar los menús en función de ciertas condiciones? Al igual que un menú diferente en la página de inicio, u ocultar un elemento en publicaciones individuales. Así es como puedes lograr esto en WordPress.

Primero debe instalar y activar el complemento If Menu.

Tras la activación, visite Apariencia »Menús pantalla y haga clic en un elemento del menú que desea editar. Notarás una nueva opción para “Habilitar lógica condicional”.

Opción lógica condicional para un elemento de menú

Marcar esta opción le mostrará dos opciones desplegables. Puede seleccionar mostrar u ocultar para un menú si coincide con ciertas condiciones. Por ejemplo, oculte el elemento del menú si un usuario es administrador o muestre un elemento del menú solo si un usuario está revisando una sola publicación.

Para obtener instrucciones más detalladas, consulte nuestro artículo sobre cómo agregar lógica condicional a los menús de WordPress.

5. Diseño de menús de navegación de WordPress

Su tema de WordPress controla la apariencia de los menús de navegación en su sitio web. Usando CSS puedes personalizar la apariencia de los menús de navegación.

La forma más fácil de hacer esto es mediante el uso del complemento CSS Hero. Es un complemento premium de WordPress que le permite personalizar cualquier tema de WordPress sin escribir una sola línea de código (no se requiere HTML ni CSS). Vea nuestra revisión de CSS Hero para obtener más información.

También puede diseñar sus menús de navegación escribiendo CSS manualmente. Para obtener instrucciones detalladas, consulte nuestra guía sobre cómo diseñar los menús de navegación de WordPress.

6. Agregar iconos de imagen con menús de navegación en WordPress

Iconos de imagen en menús de navegación

Muchos sitios web populares que usan íconos de imagen junto a sus menús de navegación para hacerlos más visibles. Aquí es cómo puede agregar iconos de imágenes con menús de navegación en WordPress.

Primero, debe instalar y activar el complemento de imagen de menú. Tras la activación, vaya a Apariencia »Menús. Allí verá una opción para agregar imágenes con cada elemento en su menú existente.

Agregar imagen a un elemento de menú en WordPress

También puede usar CSS para agregar iconos de imagen. Para obtener instrucciones detalladas, consulte nuestra guía sobre cómo agregar iconos de imágenes con menús de navegación en WordPress.

7. Agregar menús de navegación personalizados en WordPress

La mayoría de los temas gratuitos y premium de WordPress vienen con ubicaciones predefinidas para mostrar sus menús de navegación. Sin embargo, también puede agregar menús de navegación personalizados a sus temas.

Primero, deberá registrar su nuevo menú de navegación agregando este código al archivo functions.php de su tema.

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

Este código creará “Mi menú personalizado” para su tema. Puede ver esto editando un menú en Apariencia »Menús página.

Ubicación del tema para su menú personalizado

Para mostrar su menú personalizado, necesitará agregar este código a su tema donde desea mostrar el menú.

 'my-custom-menu', 
    'container_class' => 'custom-menu-class' ) ); 
?>

Para obtener instrucciones más detalladas, consulte nuestro artículo sobre cómo agregar menús de navegación personalizados en temas de WordPress.

8. Agregar menú del panel de diapositivas en Temas de WordPress

Un menú de navegación del panel de diapositivas en WordPress

¿Desea mostrar que el menú de navegación de su sitio es un panel deslizable? El uso de paneles deslizantes hace que sus menús sean más interactivos, menos intrusivos y divertidos, especialmente en dispositivos móviles.

Sin embargo, para agregarlos necesitará una comprensión de nivel medio de JavaScript, temas de WordPress y CSS.

Para obtener instrucciones paso a paso, consulte nuestra guía sobre cómo agregar un menú de panel de diapositivas en los temas de WordPress.

9. Crear un menú de WordPress receptivo listo para dispositivos móviles

Menú de navegación móvil sensible en WordPress

La mayoría de los temas de WordPress son receptivos y vienen con menús de navegación listos para dispositivos móviles. Sin embargo, si su tema no maneja bien los menús de navegación en dispositivos móviles, entonces afecta la experiencia del usuario en dispositivos móviles.

Afortunadamente, hay algunas maneras fáciles de agregar menús receptivos listos para dispositivos móviles sin escribir ningún código.

Primero, debe instalar y activar el complemento Responsive Menu.

Tras la activación, debe hacer clic en “Menú sensible” en la barra de administración de WordPress para configurar los ajustes del complemento.

Simplemente seleccione un ancho después del cual el menú de respuesta móvil debe estar visible. Después de eso, debe seleccionar un menú de navegación existente.

No olvides hacer clic en el botón “Actualizar opciones” para almacenar tu configuración. Eso es todo lo que ahora puede visitar su sitio web y cambiar el tamaño de la pantalla del navegador para ver el menú de respuesta móvil.

Hay muchas otras formas de agregar un menú receptivo móvil. Como un menú que aparece con un efecto de alternancia, un menú deslizante y un menú de selección receptivo. Obtenga más información sobre todos ellos en nuestra guía sobre cómo crear un menú de WordPress sensible para dispositivos móviles.

10. Agregue un menú receptivo a pantalla completa en WordPress

Menú receptivo a pantalla completa en WordPress

¿Has notado cómo algunos sitios web populares usan un menú de navegación a pantalla completa? Por lo general, requiere un uso creativo de JavaScript y CSS. Afortunadamente, puedes hacer esto en WordPress sin escribir ningún código.

Primero, debe instalar y activar DC – Menú receptivo a pantalla completa. Tras la activación, debe visitar Apariencia »Menú de pantalla completa DC página para configurar los ajustes del complemento.

Configuración del menú de pantalla completa

Aquí puede elegir un menú, color de fondo y texto, y fuente de Google para su menú de pantalla completa.

Haga clic en el botón Enviar para almacenar su configuración. Ahora puede visitar su sitio web para ver su menú receptivo a pantalla completa en acción.

Para obtener más información sobre este tema, consulte nuestra guía sobre cómo agregar un menú receptivo a pantalla completa en WordPress.

Los menús de navegación de WordPress generalmente son solo enlaces de texto que muestran la etiqueta del enlace o el texto de anclaje. ¿Qué sucede si desea agregar una pequeña descripción o línea de etiqueta para cada elemento en su menú de navegación?

Afortunadamente, WordPress viene con una funcionalidad incorporada para agregar una descripción con cada elemento en sus menús de navegación.

Primero, deberá habilitar el elemento de descripciones. Haga clic en el botón Opciones de pantalla en la esquina superior derecha de la pantalla.

Esto mostrará una lista de cuadros y opciones que puede habilitar. Debe marcar la casilla junto a Descripción.

Habilitación del campo de descripción para los menús de navegación en WordPress

Ahora desplácese hacia abajo y haga clic en un elemento del menú para editarlo y verá una opción para agregar una descripción.

Campo de descripción agregado a los elementos del menú

Agregue su descripción y haga clic en el botón Guardar menú.

Si su tema admite descripciones de menú, podrá verlas de inmediato. De lo contrario, tendrá que editar sus archivos de tema para mostrar descripciones.

Para obtener instrucciones detalladas, consulte nuestra guía sobre cómo agregar descripciones de menú en su tema de WordPress.

Mostrar temas de blog en el menú de navegación de WordPress

A menudo nos preguntan cómo agregar temas de blog a los menús de navegación en WordPress. Muchos principiantes asumen que necesitan crear páginas para cada tema para agregarlos a los menús.

Lo que realmente necesitas son categorías. Las categorías y etiquetas están construidas en taxonomías de WordPress que le permiten ordenar el contenido en temas relevantes.

Agregue sus artículos en categorías relevantes y luego diríjase a Apariencia »Menús página. Haga clic en la pestaña de categorías para expandirla y luego seleccione las categorías que desea mostrar en sus menús de navegación.

Agregar categorías a los menús de navegación en WordPress

Para obtener más detalles, consulte nuestro artículo sobre cómo agregar temas en los menús de navegación de WordPress.

13. Cómo agregar menús de navegación en la barra lateral de WordPress

Los temas de WordPress generalmente tienen menús de navegación en la parte superior o inferior. Sin embargo, también puede crear y agregar menús en su barra lateral de WordPress.

Simplemente visita Apariencia »Widgets página y agregue el widget “Menú personalizado” a su barra lateral. Para obtener instrucciones detalladas, consulte nuestra guía sobre cómo agregar y usar widgets en WordPress.

Agregar menú de navegación al widget de barra lateral

Después de agregar el widget a una barra lateral, puede seleccionar un menú de la opción desplegable. No olvides hacer clic en el botón Guardar para guardar tu configuración.

Por lo general, los menús de navegación se muestran en el encabezado o la barra lateral de un sitio web. Sin embargo, a veces es posible que desee agregar un menú dentro de una publicación o página de WordPress. Así es como lo harías.

Primero, debe instalar y activar el complemento Menú Shortcode. Después de la activación, edite la publicación o página donde desea mostrar su menú y agregue este shortcode:

[listmenu menu=”Your Menu Name”]

No olvide reemplazar “Su nombre de menú” con el nombre de su propio menú de navegación. Guarde o publique su publicación y luego haga clic en el botón de vista previa.

Para obtener más detalles, consulte nuestra guía sobre cómo agregar el menú de navegación de WordPress en publicaciones o páginas.

Por lo general, el menú de navegación de su sitio contiene enlaces a sus propias publicaciones y páginas. Sin embargo, a veces es posible que deba agregar un enlace a un sitio externo.

Muchos expertos en SEO recomiendan agregar el atributo rel = “nofollow” a los enlaces externos. Así es como agregará el atributo nofollow a los enlaces en los menús de navegación de WordPress.

Primero, necesitas visitar Apariencia »Menús página y luego haga clic en el botón Opciones de pantalla en la esquina superior derecha de la pantalla.

Marque los cuadros de relación de destino y enlace en Opciones de pantalla

Esto abrirá un menú en el que debe marcar las casillas junto a las opciones Relación de enlace (XFN) y Enlace de destino.

Ahora haga clic en el elemento del menú que desea editar. Notará dos nuevas opciones, Relación de enlace y Enlace abierto en una nueva ventana / pestaña.

Agregar nofollow a un elemento del menú

Debe ingresar nofollow en la opción de relación de enlace. También puede verificar el enlace abierto en la opción de nueva ventana / pestaña si lo desea.

Haga clic en el botón Guardar menú para almacenar sus cambios. Ahora este enlace en particular en su menú de navegación de WordPress tendrá agregado el atributo rel = “nofollow”.

Para obtener instrucciones más detalladas, consulte nuestro tutorial sobre cómo agregar enlaces nofollow en los menús de navegación de WordPress.

Esperamos que este artículo haya ayudado a encontrar los mejores tutoriales para dominar los menús de navegación de WordPress. También es posible que desee ver nuestra lista de 24 complementos de WordPress para sitios web comerciales.

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