Los 15 mejores tutoriales del menú de navegación de WordPress Cómo crear un sitio web o un blog en 2020
¿Busca los mejores tutoriales sobre el uso de los menús de navegación de WordPress? El menú de navegación de WordPress le permite personalizar y administrar fácilmente los menús de su sitio web. En este artículo te mostraremos los mejores tutoriales para dominar los menús de navegación de WordPress.
Como este artículo es largo, hemos agregado contenido para facilitar la navegación.
- Primeros pasos con los menús de navegación de WordPress
- Agregue iconos de redes sociales al menú de WordPress
- Mostrar un menú diferente para usuarios registrados de WordPress
- Agregar lógica condicional al menú de navegación
- Diseño de menús de navegación de WordPress
- Agregue iconos de imagen con los menús de navegación de WordPress
- Agregue un menú de navegación personalizado a WordPress
- Agregue un menú de panel deslizante a los temas de WordPress
- Crea menús de WordPress personalizables para dispositivos móviles
- Agregue un menú de pantalla completa receptivo en WordPress
- Agrega una descripción con un menú de navegación en WordPress
- Cómo agregar temas al menú de navegación de WordPress
- Cómo agregar un menú de navegación a la barra lateral de WordPress
- Agregue un menú de navegación de WordPress a publicaciones y páginas
- Agregue un enlace NoFollow al menú de navegación de WordPress
1. Introducción al menú de navegación de WordPress
En el diseño web, el menú de navegación es una lista de enlaces que permiten a los visitantes de su sitio web acceder a varias páginas y secciones de su sitio web. Ayuda a los usuarios a navegar por su sitio web, de ahí el nombre Menú de navegación.
WordPress viene con una herramienta integrada que le permite crear y usar menús en su sitio web. Apariencia »Menú Páginas en el área administrativa de WordPress.
Aquí crea un menú agregando elementos de la columna izquierda a la derecha. Puede agregar cualquier publicación, página, categoría y enlace personalizado de WordPress a su menú.
Para obtener instrucciones detalladas, consulte nuestra guía para principiantes sobre cómo agregar un menú de navegación a WordPress.
2. Agregue íconos de redes sociales al menú 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 sus íconos, reorganizarlos y agregar nuevos íconos de redes sociales en cualquier momento.
La forma más fácil es usar el complemento de menú con un ícono de redes sociales. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar complementos de WordPress.
Entrar después de la activación Apariencia »Menú Página. Cree un nuevo menú social, luego en la sección con enlaces personalizados en la columna izquierda.
Verá íconos de redes sociales debajo del texto del enlace y los campos de URL. Todo lo que tiene que hacer es hacer clic en el ícono 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 todas las cuentas de redes sociales que desee agregar. Cuando haya terminado, seleccione una ubicación de menú y haga clic en el botón Guardar menú.
Para obtener instrucciones más detalladas, consulte nuestra guía sobre cómo agregar íconos de redes sociales al menú de WordPress.
3. Mostrar un menú diferente para usuarios registrados de WordPress
Si usa un sitio de membresía de WordPress, es posible que desee mostrar un menú diferente a los usuarios registrados. Esto es lo fácil que es lograr esto.
Primero, necesitas crear dos menús diferentes. Uno para usuarios registrados y otro para usuarios registrados. Puede nombrar estos menús tanto en línea como fuera de línea.
Luego, 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'] = '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 tu menú de navegación.
Para obtener instrucciones más detalladas, consulte nuestro tutorial sobre cómo mostrar diferentes menús para usuarios de WordPress registrados.
¿Quieres cambiar el menú en función de ciertas condiciones? Me gusta diferentes menús de la página de inicio u ocultar elementos en una publicación. Así es como lo haces en WordPress.
Primero debe instalar y activar el complemento If Menu.
Acceso después de la activación Apariencia »Menú pantalla y haga clic en el elemento de menú que desea editar. Notará una nueva opción para "Habilitar lógica condicional".
Marcar esta opción revelará dos opciones de menú desplegable. Usted puede elija mostrar u ocultar el menú si cumple con ciertos criterios. Por ejemplo, oculte el elemento del menú si el usuario es un administrador, o muestre el elemento del menú solo cuando el usuario está viendo una 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.
Su tema de WordPress controla la apariencia de los menús de navegación en su sitio web. Con CSS puedes personalizar el aspecto del menú de navegación.
La forma más fácil es usar el complemento CSS Hero. Este es un complemento premium de WordPress que le permite personalizar cualquier tema de WordPress sin escribir código (sin HTML o CSS). Para obtener más información, consulte nuestra revisión de CSS Hero.
También puede diseñar menús de navegación escribiendo CSS manualmente. Para obtener instrucciones detalladas, consulte nuestra guía sobre cómo diseñar un menú de navegación de WordPress.
6. Agregue iconos de imagen con los menús de navegación de WordPress
Muchos sitios web populares usan íconos de imágenes junto a sus menús de navegación para hacerlos más visibles. Aquí se explica cómo agregar iconos de imagen con menús de navegación en WordPress.
Primero, debe instalar y activar el complemento de imagen de menú. Una vez activada, ve al Menú »Apariencia. Allí verá una opción para agregar una imagen a cada elemento en el menú existente.
También puede agregar iconos de imagen usando CSS. Para obtener instrucciones detalladas, consulte nuestra guía sobre cómo agregar iconos de imagen con los menús de navegación de WordPress.
La mayoría de los temas de WordPress gratuitos y premium vienen con lugares predefinidos para mostrar sus menús de navegación. Sin embargo, también puede agregar menús de navegación personalizados a su tema.
Primero, debe registrar el nuevo menú de navegación agregando este código al archivo functions.php en 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á un "Mi menú personalizado" para su tema. Puede hacerlo a través de Apariencia »Menú página.
Para mostrar un menú personalizado, debe agregar este código al tema donde desea mostrar el menú.
'my-custom-menu',
'container_class' => 'custom-menu-class' ) );
?>
Para obtener más instrucciones y más detalles, consulte nuestro artículo sobre cómo agregar menús de navegación personalizados a los temas de WordPress.
8. Agregue un menú de panel deslizante al tema de WordPress
¿Quiere mostrar el menú de navegación en su sitio web como un control deslizante? El uso de controles deslizantes puede hacer que sus menús sean más interactivos, menos intrusivos e interesantes, especialmente en dispositivos móviles.
Sin embargo, agregarlos requiere un conocimiento moderado 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 deslizante a un tema de WordPress.
9. Cree menús responsivos de WordPress para dispositivos móviles
La mayoría de los temas de WordPress son receptivos y vienen con menús de navegación móvil. Sin embargo, si su tema no funciona bien con los menús de navegación móvil, puede afectar la experiencia del usuario móvil.
Afortunadamente, existen algunas formas sencillas de agregar menús adaptables móviles sin escribir una sola línea de código.
Primero, debe instalar y activar el complemento Menú receptivo.
Una vez activado, debe hacer clic en el "Menú receptivo" en la barra de administración de WordPress para configurar los ajustes del complemento.
Simplemente seleccione el ancho después del cual el menú adaptable móvil debe ser visible. Luego debe seleccionar el menú de navegación existente.
Asegúrese de hacer clic en el botón "Opciones de actualización" para guardar su configuración. Eso es todo lo que puede hacer ahora para visitar su sitio web y cambiar el tamaño de la pantalla de su navegador para ver un menú móvil personalizable.
Hay muchas otras formas de agregar menús adaptables móviles. Como menús emergentes, menús deslizantes y selecciones de menú sensibles con interruptores. Obtenga más información sobre cómo crear un menú de WordPress adaptable a dispositivos móviles en nuestra guía.
¿Ha notado cómo algunos sitios web populares usan menús de navegación de pantalla completa? A menudo requiere el uso creativo de JavaScript y CSS. Afortunadamente, no tienes que escribir código. Hazlo en WordPress.
Primero, debe instalar y activar DC - Menú responsivo de pantalla completa. Después de la activación, debe visitar Apariencia »Menú DC en pantalla completa página para configurar los ajustes del complemento.
Aquí puede elegir los colores del menú, el fondo y el texto y las fuentes de Google para el menú de pantalla completa.
Haga clic en el botón Enviar para guardar su configuración. Ahora puede visitar su sitio web para ver su menú personalizable en pantalla completa.
Para obtener más información sobre este tema, consulte nuestra guía sobre cómo agregar un menú de pantalla completa personalizable en WordPress.
Los menús de navegación de WordPress suelen ser solo enlaces de texto que muestran etiquetas de enlace o texto de anclaje. ¿Qué sucede si desea agregar una pequeña descripción o una fila de etiquetas a cada elemento del menú de navegación?
Afortunadamente, WordPress viene con una funcionalidad integrada para agregar descripciones a cada elemento en el menú de navegación.
Primero, debe activar la descripción del artículo. Haga clic en el botón Opciones de pantalla en la esquina superior derecha de la pantalla.
Esto mostrará una lista de campos y opciones que puede activar. Debe marcar la casilla junto a la descripción.
Ahora desplácese hacia abajo y haga clic en el elemento del menú Editar y verá la opción para agregar una descripción.
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, debe editar el archivo del tema para mostrar la descripción.
Para obtener instrucciones detalladas, consulte nuestra guía sobre cómo agregar descripciones de menú a su tema de WordPress.
A menudo nos preguntan cómo agregar un tema de blog al menú de navegación de WordPress. Muchos principiantes piensan que necesitan crear páginas para cada tema para agregarlas al menú.
Lo que realmente necesitas son categorías. Las categorías y etiquetas están integradas en las taxonomías de WordPress y le permiten clasificar el contenido en temas relacionados.
Agregue su artículo a la categoría apropiada y vaya a Apariencia »Menú Página. Haga clic en la pestaña Categoría para expandirla y seleccione la categoría para mostrar en el menú de navegación.
Para obtener más detalles, consulte nuestro artículo sobre cómo agregar un tema a su menú 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 puede crear menús y agregarlos a la barra lateral de WordPress.
solo visita Apariencia » Widgets página y agregue el widget de menú personalizado a la barra lateral. Para obtener instrucciones detalladas, consulte nuestra guía sobre cómo agregar y usar widgets en WordPress.
Después de agregar widgets a la barra lateral, puede seleccionar un menú de las opciones desplegables. Asegúrese de hacer clic en el botón "Guardar" para guardar su configuración.
Los menús de navegación generalmente se muestran en el encabezado o la barra lateral de un sitio web. Sin embargo, a veces es posible que desee agregar un menú a su publicación o página de WordPress. Esto es lo que haces.
Primero, debe instalar y activar el complemento Menu Shortcode. Una vez activado, edite la publicación o página donde desea que aparezca el menú y agregue este código corto:
[listmenu menu=”Your Menu Name”]
Asegúrese de reemplazar "el nombre de su menú" con el nombre de su propio menú de navegación. Guarde o publique su publicación y haga clic en el botón Vista previa.
Para obtener más detalles, consulte nuestra guía sobre cómo agregar un menú de navegación de WordPress a una publicación o página.
A menudo, el menú de navegación de su sitio web contiene enlaces a sus propias publicaciones y páginas. Sin embargo, es posible que a veces necesite agregar enlaces a sitios externos.
Muchos expertos en SEO recomiendan agregar el atributo rel = "nofollow" a los enlaces externos. Aquí se explica cómo agregar el atributo nofollow a los enlaces en el menú de navegación de WordPress.
Primero, debes visitar Apariencia »Menú 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 deberá marcar las casillas junto a Relación de enlace (XFN) y Enlace de destino.
Ahora haga clic en el elemento del menú que desea editar. Será observe dos nuevas opciones, vincular vínculos y abrir vínculos en una nueva ventana/pestaña.
Debe ingresar nofollow en la opción de conexión. También puedes marcar el enlace abierto en la opción nueva ventana/pestaña si lo deseas.
Haga clic en el botón de menú Guardar para guardar los cambios. Este enlace en particular ahora tendrá el atributo rel = "nofollow" agregado a su menú de navegación de WordPress.
Para obtener instrucciones más detalladas, consulte nuestro tutorial sobre cómo agregar enlaces nofollow a los menús de navegación de WordPress.
Esperamos que este artículo le haya ayudado a encontrar el mejor tutorial sobre cómo navegar por los menús de navegación de WordPress. También puede consultar 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 videos tutoriales de WordPress. También puede encontrarnos en Twitter y Facebook.
Deja una respuesta