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 te permiten personalizar y gestionar fácilmente los menús de tu sitio web. En este artículo, te 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 este es un artículo extenso, hemos añadido una lista de contenidos para facilitar la navegación

  1. Introducción a 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 a los usuarios registrados en WordPress
  4. Añadir lógica condicional a los menús de navegación
  5. Estilizar los menús de navegación de WordPress
  6. Añadir iconos de imagen con los menús de navegación en WordPress
  7. Añadir menús de navegación personalizados en WordPress
  8. Añadir menú de panel deslizante en los temas de WordPress
  9. Cómo crear un menú de WordPress adaptado a los dispositivos móviles
  10. Añadir un menú responsivo a pantalla completa en WordPress
  11. Añadir descripción con menús de navegación en WordPress
  12. Cómo añadir temas en los menús de navegación de WordPress
  13. Cómo añadir menús de navegación en la barra lateral de WordPress
  14. Añadir menú de navegación en WordPress en entradas y páginas
  15. Añadir enlaces NoFollow en los menús de navegación de WordPress

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

En diseño web, el 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 web. Ayuda a los usuarios a navegar por tu sitio web, de ahí el nombre de menú de navegación

Menú de navegación

WordPress viene con una herramienta integrada que te permite crear y utilizar menús en tu sitio web. Esta herramienta se encuentra en Apariencia " Menús en tu área de administración de WordPress

Creación y gestión de menús de navegación en WordPress

Aquí puedes crear menús añadiendo elementos de la columna de la izquierda a la derecha. Puedes añadir cualquier entrada, página, categorías y enlaces personalizados de WordPress a tus menús

Para obtener instrucciones detalladas, consulta nuestra guía para principiantes sobre cómo añadir menús de navegación en WordPress

2. Añadir iconos de redes sociales a los menús de WordPress

Los menús de WordPress también pueden utilizarse para añadir botones de redes sociales a tu sitio web. Esto te permite actualizar fácilmente los iconos, reorganizarlos y añadir nuevos iconos de redes sociales cuando quieras

La forma más fácil de hacerlo es utilizando el botón Menú Iconos Sociales plugin. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

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

Añadir menús sociales

Verás los iconos de las redes sociales debajo de los campos de texto y URL del enlace. Todo lo que tienes que hacer es hacer clic en el icono de una red social e introducir la URL de tu perfil social. Cuando hayas terminado, haz clic en el botón de añadir al menú

Repite este proceso para todos los perfiles de redes sociales que quieras añadir. Una vez que hayas terminado, selecciona la ubicación del menú y haz clic en el botón de guardar menú

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

3. Mostrar diferentes menús a los usuarios registrados en WordPress

Si tienes un sitio de membresía en WordPress, es posible que quieras mostrar diferentes menús a tus usuarios registrados. A continuación te explicamos cómo puedes conseguirlo fácilmente

Primero tienes que crear dos menús diferentes. Uno para tus usuarios conectados y otro para los usuarios que no están conectados. Puedes llamar a estos menús "conectado" y "desconectado".

A continuación, tienes que añadir 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 diferentes menús a los usuarios registrados en WordPress

¿Quieres cambiar los menús en función de ciertas condiciones? Por ejemplo, un menú diferente en la página de inicio, u ocultar un elemento en las entradas individuales. Así es como puedes conseguirlo en WordPress

Primero tienes que instalar y activar el Si Menú plugin

Tras la activación, visita Apariencia " Menús y haz clic en un elemento del menú que quieras editar. Verás que hay una nueva opción para "Activar la lógica condicional"

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

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 un administrador o mostrar un elemento del menú sólo si un usuario está viendo una sola entrada

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

Tu tema de 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 hacerlo es utilizando 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 saber más.

También puedes estilizar tus menús de navegación escribiendo manualmente el CSS. Para obtener instrucciones detalladas, consulta nuestra guía sobre cómo estilizar los menús de navegación de WordPress

6. Añadir iconos de imagen con los menús de navegación en WordPress

Iconos de imagen en los menús de navegación

Muchos sitios web populares utilizan iconos de imagen junto a sus menús de navegación para hacerlos más visibles. A continuación te explicamos cómo puedes añadir iconos de imagen con los menús de navegación en WordPress

En primer lugar, tienes que instalar y activar el Imagen del menú plugin. Una vez activado, ve a Apariencia " Menús. Allí verás una opción para añadir imágenes con cada elemento de tu menú existente.

Añadir una imagen a un elemento del menú en WordPress

También puedes utilizar CSS para añadir iconos de imagen. Para obtener instrucciones detalladas, consulta nuestra guía sobre cómo añadir iconos de imagen con los menús de navegación 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 añadir menús de navegación personalizados a tus temas

Primero tendrás que registrar tu nuevo menú de navegación añadiendo 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 Apariencia " Menús página

Ubicación del tema para tu menú personalizado

Para mostrar tu menú personalizado, tendrás que añadir 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 añadir menús de navegación personalizados en los temas de WordPress

8. Añadir un menú de panel deslizante en los temas de WordPress

Un menú de navegación con panel deslizante en WordPress

¿Quieres que el menú de navegación de tu sitio sea un panel deslizante? El uso de paneles deslizantes hace que tus menús sean más interactivos, menos intrusivos y divertidos, especialmente en los dispositivos móviles

Sin embargo, para añadirlos necesitarás conocimientos de nivel medio de JavaScript, temas de WordPress y CSS

Para obtener instrucciones paso a paso, consulta nuestra guía sobre cómo añadir un menú de panel deslizante en los temas de WordPress

9. Cómo crear un menú de WordPress adaptable a dispositivos móviles

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

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

Por suerte, hay algunas formas sencillas de añadir menús responsivos preparados para móviles sin tener que escribir ningún código

En primer lugar, tienes que instalar y activar el Menú responsivo plugin

Tras la activación, tienes que hacer clic en 'Responsive Menu' en la barra de administración de WordPress para configurar los ajustes del plugin

Simplemente selecciona un ancho después del cual el menú responsivo móvil debe ser visible. Después de eso, tienes que seleccionar un menú de navegación existente

No te olvides de hacer clic en el botón "Actualizar opciones" para guardar tu configuración. Eso es todo, ahora puedes visitar tu sitio web y cambiar el tamaño de la pantalla del navegador para ver el menú responsivo para móviles

Hay muchas otras formas de añadir un menú responsivo para móviles. Como un menú que aparece con un efecto de alternancia, un menú deslizante y un menú responsivo de selección. Obtén más información sobre todas ellas en nuestra guía sobre cómo crear un menú de WordPress adaptable a dispositivos móviles

Menú responsivo a pantalla completa en WordPress

¿Te has dado cuenta de que algunos sitios web populares utilizan un menú de navegación a pantalla completa? Normalmente requiere un uso creativo de JavaScript y CSS. Por suerte, puedes hacerlo en WordPress sin escribir ningún código

En primer lugar, tienes que instalar y activar el DC - Menú responsivo a pantalla completa. Tras la activación, tienes que visitar Apariencia " Menú de pantalla completa DC para configurar los ajustes del plugin.

Ajustes del menú de pantalla completa

Aquí puedes elegir un menú, el color del fondo y del texto, y la fuente de Google para tu menú de pantalla completa

Haz clic en el botón de envío para guardar tus ajustes. Ahora puedes visitar tu sitio web para ver tu menú responsivo a pantalla completa en acción.

Para más información sobre este tema, consulta nuestra guía sobre cómo añadir un menú responsivo a pantalla completa en WordPress.

Los menús de navegación de WordPress suelen ser sólo enlaces de texto que muestran la etiqueta del enlace o el texto de anclaje. ¿Y si quisieras añadir una pequeña descripción o etiqueta para cada elemento de tu menú de navegación?

Por suerte, WordPress viene con una funcionalidad integrada para añadir una descripción a cada elemento de tus menús de navegación

En primer lugar, tendrás que habilitar el elemento descripciones. Haz clic en el botón de Opciones de Pantalla en la esquina superior derecha de la pantalla

Esto mostrará una lista de casillas y opciones que puedes habilitar. Tienes que marcar la casilla situada junto a Descripción

Activar el campo de descripción para los menús de navegación en WordPress

Ahora desplázate hacia abajo y haz clic en un elemento del menú para editarlo y verás una opción para añadir una descripción

Campo de descripción añadido a los elementos del menú

Añade tu descripción y haz clic en el botón de guardar el menú

Si tu tema admite las descripciones de los menús, podrás verlas inmediatamente. 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 añadir descripciones de menú en tu tema de WordPress

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

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

Lo que realmente necesitas son categorías. Las categorías y las etiquetas son taxonomías integradas en WordPress que te permiten clasificar el contenido en temas relevantes

Añade tus artículos en categorías relevantes y luego dirígete a Apariencia " Menús página. Haz clic en la pestaña de categorías para expandirla y luego selecciona las categorías que quieres mostrar en tus menús de navegación

Añadir categorías a los menús de navegación en WordPress

Para más detalles, consulta nuestro artículo sobre cómo añadir temas en los menús de navegación 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 añadir menús en tu barra lateral de WordPress

Sólo tienes que visitar Apariencia " Widgets y añade el widget "Menú personalizado" a tu barra lateral. Para obtener instrucciones detalladas, consulta nuestra guía sobre cómo añadir y utilizar widgets en WordPress

Añadir el menú de navegación al widget de la barra lateral

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

Normalmente los menús de navegación se muestran en la cabecera o en la barra lateral de un sitio web. Sin embargo, a veces puedes querer añadir un menú dentro de una entrada o página de WordPress. A continuación te explicamos cómo hacerlo

En primer lugar, tienes que instalar y activar el Menú Shortcode plugin. Una vez activado, edita el post o la página donde quieras mostrar tu menú y añade este shortcode

[listmenu menu="Your Menu Name"]

No te olvides de sustituir "Tu nombre de menú" por el nombre de tu propio menú de navegación. Guarda o publica tu post y luego haz clic en el botón de vista previa

Para más detalles, consulta nuestra guía sobre cómo añadir el menú de navegación de WordPress en entradas o páginas

Normalmente, el menú de navegación de tu sitio contiene enlaces a tus propias entradas y páginas. Sin embargo, a veces puedes necesitar añadir un enlace a un sitio externo

Muchos expertos en SEO recomiendan añadir el atributo rel="nofollow" a los enlaces externos. A continuación te explicamos cómo añadir el atributo nofollow a los enlaces de los menús de navegación de WordPress

En primer lugar, tienes que visitar Apariencia " Menús y luego haz clic en el botón de Opciones de Pantalla en la esquina superior derecha de la pantalla.

Comprueba las casillas de relación de destino y de enlace en las Opciones de pantalla

Esto hará que aparezca un menú en el que tienes que marcar las casillas junto a las opciones Relación de enlace (XFN) y Objetivo de enlace.

Ahora haz clic en el elemento del menú que quieras editar. Verás que hay dos nuevas opciones, Relación de enlace y Abrir enlace en una nueva ventana/pestaña

Añadir nofollow a un elemento del menú

Tienes que introducir nofollow en la opción de relación del enlace. También puedes marcar la opción de abrir el enlace en una nueva ventana/pestaña si quieres.

Haz clic en el botón de guardar el menú para guardar los cambios. Ahora este enlace concreto de 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 añadir 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. Quizás también quieras ver nuestra lista de 24 plugins de WordPress imprescindibles para sitios web de empresas.

Si te ha gustado este artículo, suscríbete a nuestro Canal de YouTube para los videotutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.

Si quieres conocer otros artículos parecidos a 15 mejores tutoriales para dominar los menús de navegación de WordPress puedes visitar la categoría Showcase.

¡Más Contenido!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Go up