Los 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.

Dado que este es 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. Añadir iconos de redes sociales a los menús de WordPress
3. Mostrar diferentes menús para usuarios registrados en WordPress
4. Añadir lógica condicional a los menús de navegación
5. Estilo de los menús de navegación de WordPress
6. Añadir iconos de imagen con menús de navegación en WordPress
7. Añadir menús de navegación personalizados en WordPress
8. Añadir menú de panel de diapositiva en temas de WordPress
9. Creación de un Menú de WordPress Responsive Mobile Ready
10. Añadir un menú responsivo de 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. Añadir menú de navegación de WordPress en mensajes y páginas
15. Agregar enlaces NoFollow en los menús de navegación de WordPress

1. Comenzando con 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.

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 tu área de administración de WordPress.

Aquí puede crear menús agregando elementos de la columna de la izquierda a la derecha. Puedes agregar cualquier publicación de WordPress, página, categorías y enlaces personalizados a tus 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 sencilla de hacerlo es mediante el uso del complemento Menu Social Icons. 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.

Verá los íconos de las redes sociales debajo del texto del enlace y los campos de URL. Todo lo que necesita hacer es hacer clic en un ícono de redes sociales e ingresar su URL de perfil social. Cuando hayas terminado, haz 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 del 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. Muestra 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 los usuarios que han iniciado sesión. 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 asignar un nombre a estos menús como inicio y cierre de sesión.

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

 function my_wp_nav_menu_args ($ args = ") if (is_user_logged_in ()) $ args ['menu'] = 'log-in'; else $ args ['menu'] = 'log-out'; return $ args; add_filter ('wp_nav_menu_args', 'my_wp_nav_menu_args'); 

Eso es todo. Ahora puedes probar tus menús de navegación en acción..

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

4. Añadir lógica condicional a los menús de navegación

¿Quieres cambiar los menús en función de ciertas condiciones? Me gusta un menú diferente en la página de inicio, u ocultar un elemento en publicaciones individuales. Aquí es cómo puede lograr esto en WordPress.

Primero necesitas instalar y activar el plugin If Menu.

Tras la activación, visita Appearabnce »Menús Haga clic en la pantalla y haga clic en un elemento del menú que desee editar. Notará una nueva opción para 'Habilitar lógica condicional'.

Marcar esta opción le mostrará dos opciones desplegables. Puede seleccionar mostrar u ocultar para un menú si coincide con ciertas condiciones. Por ejemplo, ocultar elemento de menú si un usuario es un administrador o mostrar un elemento de menú solo si un usuario está viendo 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 hacerlo es mediante el uso del complemento CSS Hero. Es un complemento premium de WordPress que te permite personalizar cualquier tema de WordPress sin escribir una sola línea de código (no se requiere HTML o 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. Añadir iconos de imagen con menús de navegación en WordPress

Muchos sitios web populares utilizan iconos de imagen junto a sus menús de navegación para hacerlos más notorios. Aquí es cómo puede agregar iconos de imagen con los menús de navegación en WordPress.

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

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

7. Añadir 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.

 función 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 tu tema. Puedes ver esto editando un menú en Apariencia »Menús página.

Para mostrar su menú personalizado, deberá agregar este código a su tema en el que desea visualizar 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. Añadir menú del panel de diapositivas en temas de WordPress

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

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

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

9. Creando un Menú de WordPress Responsive Mobile Ready

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 formas fáciles de agregar menús de respuesta listos para dispositivos móviles sin escribir ningún código.

Primero, necesita instalar y activar el complemento Menú Responsivo.

Al activarlo, 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 debería estar visible. Después de eso necesitas seleccionar un menú de navegación existente.

No olvide hacer clic en el botón "Opciones de actualización" para almacenar su 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ú móvil..

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

10. Agrega un menú responsivo a pantalla completa en WordPress

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

Primero, debe instalar y activar el Menú de respuesta de pantalla completa de DC. Tras la activación, debe visitar Apariencia "DC Menú de pantalla completa página para configurar los ajustes del plugin.

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

Haga clic en el botón enviar para almacenar sus configuraciones. Ahora puede visitar su sitio web para ver su menú sensible 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ú sensible a pantalla completa en WordPress.

11. Agregar descripción con menús de navegación en WordPress

Los menús de navegación de WordPress suelen ser 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 funcionalidad incorporada para agregar descripción con cada elemento en sus menús de navegación.

Primero, deberás 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. Debes marcar la casilla junto a Descripción.

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

Añada su descripción y haga clic en el botón Guardar menú.

Si su tema admite descripciones de menú, entonces podrá verlas de inmediato. De lo contrario, tendrás que editar tus archivos de temas para mostrar las descripciones..

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

12. Cómo agregar temas en los menús de navegación de WordPress

A menudo se nos pregunta sobre 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 agregarlas a los menús.

Lo que realmente necesitas es categorías. Las categorías y etiquetas están integradas en taxonomías de WordPress que le permiten clasificar 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.

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 suelen tener menús de navegación en la parte superior o inferior. Sin embargo, también puede crear y agregar menús a la barra lateral de WordPress..

Simplemente visitar 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.

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 tus configuraciones..

14. Añadir menú de navegación de WordPress en mensajes y páginas

Normalmente, los menús de navegación se muestran en el encabezado o en 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 harías eso..

Primero, necesita instalar y activar el complemento del código del menú. Tras la activación, edite la publicación o la página donde desea mostrar su menú y agregue este código breve:

[listmenu menu = "Nombre de tu menú"]

No olvide reemplazar 'Nombre de su menú' con el nombre de su propio menú de navegación. Guarda o publica tu publicación y luego haz 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.

15. Añadir enlaces NoFollow en los menús de navegación de WordPress

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

Muchos expertos en SEO recomiendan agregar el atributo rel = "nofollow" a los enlaces externos. Aquí es cómo agregará un 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.

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

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

Necesitas entrar no seguir En la opción de relación de enlace. También puede consultar el enlace abierto en la nueva ventana / opción de pestaña si lo desea.

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

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 puede querer ver nuestra lista de 24 que deben tener complementos de WordPress para sitios web de negocios.

Si le ha gustado este artículo, suscríbase a nuestros tutoriales en video del Canal de YouTube para WordPress. También puedes encontrarnos en Twitter y Facebook..