Best Tutorials To Master Wordpress Navigation Menus

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

¿Está 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 de 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 largo, hemos agregado una lista de contenido para facilitar la navegación.

  • Introducción a los menús de navegación de WordPress
  • Agregar íconos de redes sociales a los menús de WordPress
  • Mostrar diferentes menús para usuarios registrados en WordPress
  • Agregar lógica condicional a los menús de navegación
  • Dar formato a los menús de navegación de WordPress
  • Agregar íconos de imagen con menús de navegación en WordPress
  • Agregar menús de navegación personalizados en WordPress
  • Agregar menú de panel de diapositivas en temas de WordPress
  • Cree un menú de WordPress receptivo listo para dispositivos móviles
  • Agregar un menú receptivo de pantalla completa en WordPress
  • Agregar descripción con 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 a 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. Introducción a los menús de navegación de WordPress

    Contents

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

    El Menú De Navegación
    WordPress viene con una herramienta incorporada 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.
    Creación Y Gestión De 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, página, categorías y enlaces personalizados de WordPress a sus menús. Para obtener instrucciones paso a paso, consulte nuestra guía para principiantes sobre cómo agregar menús de navegación en WordPress.

    2. Agregue íconos 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 íconos, reorganizarlos y agregar nuevos íconos de redes sociales cuando lo desee. La forma más sencilla de hacerlo es utilizar el 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íjase a Apariencia »Menús página. Cree un nuevo menú social, luego en la pestaña Vínculos personalizados en la columna de la 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 el ícono de una red social 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. Cuando haya terminado, seleccione una ubicación de menú, 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 está administrando un sitio de membresía de WordPress, es posible que desee mostrar diferentes menús a sus usuarios registrados. Así es como puede lograrlo fácilmente. Primero debe 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. Luego, debe agregar este código al archivo functions.php de su tema oa un complemento específico del sitio. function my_wp_nav_menu_args ($ args = «») {if (is_user_logged_in ()) {$ args[‘menu’] = ‘conectado’; } más {$ args[‘menu’] = ‘desconectado’; } devuelve $ args; } add_filter (‘wp_nav_menu_args’, ‘my_wp_nav_menu_args’); 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. Agregue lógica condicional a los menús de navegación

    ¿Quieres modificar los menús según determinadas condiciones? Como un menú diferente en la página de inicio u oculta un elemento en elementos individuales. Así es como puede lograrlo en WordPress. Primero debe instalar y activar el complemento If Menu. Al activar, visite Apariencia »Menús y haga clic en un elemento del menú que desee cambiar. Notará una nueva opción para «Habilitar lógica condicional».
    Opción De Lógica Condicional Para Un Elemento De Menú
    Marque esta opción para mostrar dos opciones desplegables. Puede seleccionar mostrar u ocultar un menú si cumple determinadas condiciones. Por ejemplo, oculte el elemento del menú si un usuario es un administrador, o muestre un elemento del 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. Dar formato a los 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. Con CSS, puede personalizar la apariencia de los menús de navegación. La forma más sencilla de hacerlo es utilizar el 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 o CSS). Consulte 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 paso a paso, consulte nuestra guía sobre cómo diseñar los menús de navegación de WordPress.

    6. Agregue íconos de imagen con menús de navegación en WordPress

    Iconos De Imagen En Los Menús De Navegación
    Muchos sitios web populares usan íconos de imágenes junto a sus menús de navegación para hacerlos más visibles. A continuación, se explica cómo agregar íconos de imagen con menús de navegación en WordPress. En primer lugar, 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 Una Imagen A Un Elemento De Menú En Wordpress
    También puede usar CSS para agregar íconos de imagen. Para obtener instrucciones detalladas, consulte nuestra guía sobre cómo agregar íconos de imagen con menús de navegación en WordPress.

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

    La mayoría de los temas de WordPress gratuitos y premium 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á guardar 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 (‘mi-menú-personalizado’, __ (‘Mi menú personalizado’)); } 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, deberá agregar este código a su tema donde desea mostrar el menú.

    ‘mi-menú-personalizado’, ‘container_class’ = ‘clase-menú-personalizado’)); ? Para obtener instrucciones más detalladas, consulte nuestro artículo sobre cómo agregar menús de navegación personalizados en los temas de WordPress.

    8. Agregue el menú del panel de diapositivas en los temas de WordPress

    Un Menú De Navegación De Panel Deslizante En Wordpress
    ¿Quiere mostrar que el menú de navegación de su sitio es un panel deslizante? 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á 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ú de panel deslizable en los temas de WordPress.

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

    Menú De Navegación Adaptable Para Dispositivos Móviles En Wordpress
    La mayoría de los temas de WordPress responden y vienen con menús de navegación listos para dispositivos móviles. Sin embargo, si su tema no maneja correctamente los menús de navegación en los dispositivos móviles, afectará la experiencia del usuario en los dispositivos móviles. Afortunadamente, existen algunas formas sencillas de agregar menús receptivos y listos para dispositivos móviles sin escribir ningún código. En primer lugar, debe instalar y activar el complemento Responsive Menu. Tras la activación, debe hacer clic en « Menú receptivo » 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 ser visible. Después de eso, debe seleccionar un menú de navegación existente. No olvide hacer clic en el botón «Opciones de actualización» para guardar 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ú de respuesta móvil. Hay muchas otras formas de agregar un menú receptivo para dispositivos móviles. Como un menú emergente con un efecto de alternancia, una diapositiva en el menú y un menú de selección receptivo. Obtenga más información sobre cada uno de ellos en nuestra guía sobre cómo crear un menú de WordPress adaptable y listo para dispositivos móviles.

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

    Menú De Pantalla Completa Receptivo En Wordpress
    ¿Ha notado cómo algunos sitios web populares utilizan un menú de navegación a pantalla completa? Por lo general, esto requiere un uso creativo de JavaScript y CSS. Afortunadamente, puede hacer esto en WordPress sin escribir ningún código. En primer lugar, debe instalar y activar DC – Menú de respuesta de pantalla completa. Tras la activación, debe visitar Apariencia »Menú de pantalla completa de DC página para configurar los ajustes del complemento.
    Configuración Del Menú De Pantalla Completa
    Aquí puede elegir un menú, un 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 guardar su configuración. Ahora puede visitar su sitio web para ver su menú de pantalla completa receptivo en acción. Para obtener más información sobre este tema, consulte nuestra guía sobre cómo agregar un menú receptivo de pantalla completa 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. ¿Y si quisieras agregar una pequeña descripción o un eslogan para …

    Leave a Reply