¿Estás buscando los mejores tutoriales para trabajar con menús de navegación de WordPress? Los menús de navegación de WordPress te permiten personalizar y administrar fácilmente los menús en tu sitio web. En este artículo, te 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.
- Primeros pasos con los menús de navegación de WordPress
- Agregar iconos de redes sociales a los menús de WordPress
- Mostrar diferentes menús a los usuarios registrados en WordPress
- Agregar lógica condicional a los menús de navegación
- Estilo de los menús de navegación de WordPress
- Agregar iconos de imagen con menús de navegación en WordPress
- Agregar menús de navegación personalizados en WordPress
- Agregar un menú de panel deslizante en temas de WordPress
- Creación de un menú de WordPress receptivo listo para dispositivos móviles
- Agregar un menú receptivo a pantalla completa en WordPress
- Agregar descripciones a los menús de navegación en WordPress
- Cómo agregar temas en los menús de navegación de WordPress
- Cómo agregar menús de navegación en la barra lateral de WordPress
- Agregar menú de navegación de WordPress en publicaciones y páginas
- Agregar enlaces NoFollow en los menús de navegación de WordPress
1. Primeros pasos con los menús de navegación de WordPress
En diseño web, un menú de navegación es una lista de enlaces que permite a los visitantes de tu sitio web visitar diferentes páginas y secciones de tu sitio. Ayuda a los usuarios a navegar por tu sitio web, de ahí el nombre de menú de navegación.
WordPress viene con una herramienta integrada que te permite crear y usar menús en tu sitio web. Esta herramienta se encuentra en la página Apariencia » Menús en tu área de administración de WordPress.
Aquí puedes crear menús agregando elementos de la columna de la izquierda a la derecha. Puedes agregar cualquier publicación, página, categoría y enlaces personalizados de WordPress a tus menús.
Para obtener instrucciones detalladas, consulta nuestra guía para principiantes sobre cómo agregar menús de navegación en WordPress.
2. Agrega 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 tu sitio web. Esto te permite actualizar iconos fácilmente, reorganizarlos y agregar nuevos iconos de redes sociales cuando quieras.
La forma más fácil de hacer esto es usando el plugin Menu Social Icons. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Al activar, dirígete a la página Apariencia » Menús. Crea un nuevo menú social y luego en la pestaña de enlaces personalizados de la columna izquierda.
Verás los iconos de redes sociales debajo de los campos de texto y URL del enlace. Todo lo que necesitas hacer es hacer clic en un icono de red social e ingresar la URL de tu perfil social. Cuando termines, haz clic en el botón agregar al menú.
Repite este proceso para todos los perfiles de redes sociales que desees agregar. Una vez que hayas terminado, selecciona una ubicación de menú y luego haz clic en el botón guardar menú.
Para obtener instrucciones más detalladas, consulta nuestra guía sobre cómo agregar iconos de redes sociales a los menús de WordPress.
3. Muestra menús diferentes a los usuarios registrados en WordPress
Si administras un sitio de membresía de WordPress, es posible que desees mostrar menús diferentes a tus usuarios registrados. Aquí te explicamos cómo lograrlo fácilmente.
Primero, necesitas crear dos menús diferentes. Uno para tus usuarios registrados y otro para los usuarios que no lo están. Puedes nombrar estos menús 'registrados' y 'no registrados'.
A continuación, necesitas agregar este código al archivo functions.php de tu tema o a un plugin 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 puedes probar tus menús de navegación en acción.
Para obtener instrucciones más detalladas, consulta nuestro tutorial sobre cómo mostrar menús diferentes a los usuarios registrados en WordPress.
4. Agregar lógica condicional a los menús de navegación
¿Quieres cambiar los menús basándote en ciertas condiciones? Como un menú diferente en la página de inicio, o ocultar un elemento en publicaciones individuales. Aquí te explicamos cómo lograrlo en WordPress.
Primero, necesitas instalar y activar el plugin If Menu.
Después de la activación, visita la pantalla Apariencia » Menús y haz clic en un elemento del menú que desees editar. Notarás una nueva opción para 'Habilitar lógica condicional'.
Al marcar esta opción, se mostrarán dos opciones desplegables. Puedes seleccionar mostrar u ocultar un menú si coincide con ciertas condiciones. Por ejemplo, ocultar un elemento del menú si un usuario es administrador o mostrar un elemento del menú solo si un usuario está viendo una publicación individual.
Para obtener instrucciones más detalladas, consulta nuestro artículo sobre cómo agregar lógica condicional a los menús de WordPress.
5. Estilo de los menús de navegación de WordPress
El tema de tu WordPress controla la apariencia de los menús de navegación en tu 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 usando el plugin CSS Hero. Es un plugin premium de WordPress que te permite personalizar cualquier tema de WordPress sin escribir una sola línea de código (no se requiere HTML ni CSS). Consulta nuestra reseña de CSS Hero para obtener más información.
También puedes estilizar tus menús de navegación escribiendo CSS manualmente. Para obtener instrucciones detalladas, consulta nuestra guía sobre cómo estilizar los menús de navegación de WordPress.
6. Agregar iconos de imagen con menús de navegación en WordPress
Muchos sitios web populares usan iconos de imagen junto a sus menús de navegación para hacerlos más visibles. Aquí te mostramos cómo puedes agregar iconos de imagen con menús de navegación en WordPress.
Primero, necesitas instalar y activar el plugin Menu Image. Después de la activación, ve a Apariencia » Menús. Allí verás una opción para agregar imágenes con cada elemento de tu menú existente.
También puedes usar CSS para agregar íconos de imagen. Para obtener instrucciones detalladas, consulta nuestra guía sobre cómo agregar íconos de imagen 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 tus menús de navegación. Sin embargo, también puedes agregar menús de navegación personalizados a tus temas.
Primero, necesitarás registrar tu nuevo menú de navegación agregando este código al archivo functions.php de tu 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 tu tema. Puedes verlo editando un menú en la página Apariencia » Menús.
Para mostrar tu menú personalizado, necesitarás agregar este código a tu tema donde quieras mostrar el menú.
<?php
wp_nav_menu( array(
'theme_location' => 'my-custom-menu',
'container_class' => 'custom-menu-class' ) );
?>
Para obtener instrucciones más detalladas, consulta nuestro artículo sobre cómo agregar menús de navegación personalizados en temas de WordPress.
8. Agregar menú de panel deslizante en temas de WordPress
¿Quieres que el menú de navegación de tu sitio se muestre en un panel deslizante? Usar paneles deslizantes hace que tus menús sean más interactivos, menos intrusivos y divertidos, especialmente en dispositivos móviles.
Sin embargo, para agregarlos necesitarás un nivel medio de comprensión de JavaScript, temas de WordPress y CSS.
Para obtener instrucciones paso a paso, consulta nuestra guía sobre cómo agregar un menú de panel deslizante en temas de WordPress.
9. Creación de un menú de WordPress receptivo listo para dispositivos móviles
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 tu tema no maneja bien los menús de navegación en dispositivos móviles, esto afecta la experiencia del usuario en dichos dispositivos.
Afortunadamente, hay algunas formas sencillas de agregar menús receptivos listos para dispositivos móviles sin escribir código.
Primero, necesitas instalar y activar el plugin Responsive Menu.
Después de la activación, debes hacer clic en 'Responsive Menu' en la barra de administración de tu WordPress para configurar los ajustes del plugin.
Simplemente selecciona un ancho después del cual el menú receptivo móvil debería ser visible. Después de eso, necesitas seleccionar un menú de navegación existente.
No olvides hacer clic en el botón 'Actualizar Opciones' para guardar tu configuración. ¡Eso es todo! Ahora puedes visitar tu sitio web y redimensionar la pantalla del navegador para ver el menú receptivo móvil.
Hay muchas otras formas de agregar un menú móvil responsivo. Como un menú que aparece con un efecto de alternancia, un menú deslizante y un menú desplegable responsivo. Obtenga más información sobre todos ellos en nuestra guía sobre cómo crear un menú de WordPress responsivo listo para móviles.
10. Agrega un menú responsivo de 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, necesitas instalar y activar el plugin DC – Full Screen Responsive Menu. Después de la activación, debes visitar la página Apariencia » DC Fullscreen Menu para configurar los ajustes del plugin.
Aquí puedes elegir un menú, el color de fondo y de texto, y una fuente de Google para tu menú de pantalla completa.
Haz clic en el botón de enviar para guardar tus ajustes. Ahora puedes visitar tu sitio web para ver tu menú responsivo de pantalla completa en acción.
Para más información sobre este tema, consulta nuestra guía sobre cómo agregar un menú responsivo de pantalla completa en WordPress.
11. Agregar descripciones 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 ancla. ¿Qué pasaría si quisieras agregar una pequeña descripción o lema para cada elemento de tu menú de navegación?
Afortunadamente, WordPress viene con funcionalidad incorporada para agregar descripciones a cada elemento de tus menús de navegación.
Primero, necesitarás habilitar el elemento de descripciones. Haz clic en el botón Opciones de Pantalla en la esquina superior derecha de la pantalla.
Esto mostrará una lista de casillas y opciones que puedes habilitar. Necesitas marcar la casilla junto a Descripción.
Ahora desplázate hacia abajo y haz clic en un elemento del menú para editarlo y verás una opción para agregar una descripción.
Agrega tu descripción y haz clic en el botón guardar menú.
Si tu tema admite descripciones de menú, podrás verlas de inmediato. De lo contrario, tendrás que editar los archivos de tu tema para mostrar las descripciones.
Para obtener instrucciones detalladas, consulta nuestra guía sobre cómo agregar descripciones de menú en tu tema de WordPress.
12. Cómo agregar temas en los menús 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 poder agregarlos a los menús.
Lo que realmente necesitas son las categorías. Las categorías y las etiquetas son taxonomías integradas en WordPress que te permiten organizar el contenido en temas relevantes.
Agrega tus artículos a las categorías relevantes y luego dirígete a la página Apariencia » Menús. Haz clic en la pestaña de categorías para expandirla y luego selecciona las categorías que deseas mostrar en tus menús de navegación.
Para más detalles, consulta 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 puedes crear y agregar menús en la barra lateral de tu WordPress.
Simplemente visita la página Apariencia » Widgets y agrega el widget 'Menú personalizado' a tu barra lateral. Para instrucciones detalladas, consulta nuestra guía sobre cómo agregar y usar widgets en WordPress.
Después de agregar el widget a una barra lateral, puedes seleccionar un menú de la opción desplegable. No olvides hacer clic en el botón de guardar para almacenar tu configuración.
14. Agregar menú de navegación de WordPress en publicaciones y páginas
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 desees agregar un menú dentro de una publicación o página de WordPress. Aquí te explicamos cómo hacerlo.
Primero, necesitas instalar y activar el plugin Menu Shortcode. Tras la activación, edita la publicación o página donde quieras mostrar tu menú y añade este shortcode:
[listmenu menu="Nombre de tu Menú"]
No olvides reemplazar 'Nombre de tu Menú' con el nombre de tu propio menú de navegación. Guarda o publica tu publicación y luego haz clic en el botón de vista previa.
Para más detalles, consulta nuestra guía sobre cómo añadir un 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
Típicamente, el menú de navegación de tu sitio contiene enlaces a tus propias publicaciones y páginas. Sin embargo, a veces podrías necesitar añadir un enlace a un sitio externo.
Muchos expertos en SEO recomiendan añadir el atributo rel="nofollow" a los enlaces externos. Aquí te mostramos cómo añadir el atributo nofollow a los enlaces en los menús de navegación de WordPress.
Primero, necesitas visitar la página Apariencia » Menús y luego hacer clic en el botón Opciones de pantalla en la esquina superior derecha de la pantalla.
Esto desplegará un menú donde necesitas marcar las casillas junto a Relación del enlace (XFN) y Opciones de destino del enlace.
Ahora haz clic en el elemento del menú que deseas editar. Notarás dos nuevas opciones, Relación del enlace y Abrir enlace en una nueva ventana/pestaña.
Necesitas ingresar nofollow en la opción de relación del enlace. También puedes marcar la opción de abrir enlace en una nueva ventana/pestaña si lo deseas.
Haz clic en el botón guardar menú para almacenar tus cambios. Ahora este enlace en particular en tu menú de navegación de WordPress tendrá el atributo rel="nofollow" añadido.
Para obtener instrucciones más detalladas, consulta nuestro tutorial sobre cómo agregar enlaces nofollow en los menús de navegación de WordPress.
Esperamos que este artículo te haya ayudado a encontrar los mejores tutoriales para dominar los menús de navegación de WordPress. También te puede interesar nuestra lista de 24 plugins de WordPress imprescindibles para sitios web de negocios.
Si te gustó este artículo, suscríbete a nuestro Canal de YouTube para tutoriales de video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Jiří Vaněk
Me gusta mucho y me intriga tu punto número 3 en el tutorial. Tengo un sitio de membresía que usa MemberPress, y la idea de que los usuarios que han iniciado sesión puedan tener un menú de navegación diferente es fantástica porque puedo agregar contenido premium al menú que los usuarios regulares no deberían ver. También me sorprende la cantidad de funciones ocultas en el panel Apariencia » Menús. No tenía idea de lo útil que podría ser en este sentido.
ERFmama
Thank you so much for a fantastic overview! I’ve learned a few new things!
