Cómo agregar menús de navegación personalizados en temas de WordPress

¿Desea agregar menús de navegación personalizados en su tema de WordPress? Los menús de navegación son la lista horizontal de enlaces que se muestran en la parte superior de la mayoría de los sitios web.


Por defecto, los temas de WordPress vienen con ubicaciones y diseños de menú predefinidos, pero ¿qué pasa si desea agregar sus propios menús de navegación personalizados?

En este artículo, le mostraremos cómo crear y agregar fácilmente menús de navegación personalizados en WordPress, para que pueda mostrarlos en cualquier lugar de su tema.

Agregar menús de navegación personalizados en temas de WordPress

¿Cuándo necesita este tutorial del menú de navegación de WordPress??

La mayoría de los temas de WordPress vienen con al menos un lugar donde puede mostrar los enlaces de navegación de su sitio en un menú.

Puede administrar elementos de menú desde una interfaz fácil de usar dentro de su área de administración de WordPress.

Si solo desea agregar menús de navegación en su sitio web, simplemente siga nuestra guía para principiantes sobre cómo agregar un menú de navegación en WordPress.

El objetivo de este tutorial es ayudar a los usuarios de bricolaje / intermedios a agregar menús de navegación personalizados en sus temas de WordPress.

Cubriremos los siguientes temas en este artículo:

    Dicho esto, echemos un vistazo a cómo agregar menús de navegación personalizados de WordPress en su tema.

    Crear menús de navegación personalizados en temas de WordPress

    Los menús de navegación son una característica de los temas de WordPress. Cada tema puede definir sus propias ubicaciones de menú y soporte de menú.

    Para agregar un menú de navegación personalizado, lo primero que debe hacer es 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’);

    Ahora puedes ir a Apariencia »Menús página en su administrador de WordPress e intente crear o editar un nuevo menú. Verá “Mi menú personalizado” como opción de ubicación del tema.

    Menú de navegación personalizado agregado al tema

    Si desea agregar más de una nueva ubicación del menú de navegación, necesitará usar un código como este:

    función wpb_custom_new_menu () {
    register_nav_menus (
    formación(
    ‘my-custom-menu’ => __ (‘Mi menú personalizado’),
    ‘menú extra’ => __ (‘Menú adicional’)
    )
    );
    }
    add_action (‘init’, ‘wpb_custom_new_menu’);

    Una vez que haya agregado la ubicación del menú, continúe y agregue algunos elementos de menú en el administrador de WordPress siguiendo nuestro tutorial sobre cómo agregar menús de navegación para principiantes.

    Esto nos permitirá pasar al siguiente paso que muestra el menú en su tema.

    Mostrar menús de navegación personalizados en temas de WordPress

    A continuación, debemos mostrar el nuevo menú de navegación en su tema de WordPress. El lugar más común donde generalmente se colocan los menús de navegación es en la sección de encabezado de un sitio web justo después del título o logotipo del sitio.

    Sin embargo, puede agregar su menú de navegación en cualquier lugar que desee.

    Deberá agregar este código en el archivo de plantilla de su tema donde desea mostrar su menú.

    <?php
    wp_nav_menu (array (
    ‘theme_location’ => ‘my-custom-menu’,
    ‘container_class’ => ‘custom-menu-class’));
    ?>

    La ubicación del tema es el nombre que seleccionamos en el paso anterior.

    La clase contenedor es la clase CSS que se agregará a su menú de navegación. Su menú aparecerá como una lista con viñetas en su sitio web..

    Personalizado mostrado como lista simple

    Puede usar la clase CSS .custom_menu_class para diseñar sus menús. Aquí hay un ejemplo de CSS para ayudarlo a comenzar:

    div.custom-menu-class ul {
    margen: 20px 0px 20px 0px;
    tipo-estilo-lista: ninguno;
    estilo de lista: ninguno;
    lista-estilo-imagen: ninguno;
    alineación de texto: derecha;
    }
    div.custom-menu-class li {
    relleno: 0px 20px 0px 0px;
    pantalla: en línea;
    }
    div.custom-menu-class a {
    color: #FFFFFF;
    }

    Menú personalizado con estilo

    Para obtener más información sobre cómo diseñar un menú de navegación, consulte nuestro tutorial detallado sobre cómo diseñar los menús de navegación de WordPress

    Agregar un menú de navegación personalizado en WordPress usando el generador de páginas

    Si está creando una página de destino personalizada o un diseño de página de inicio, el uso de un complemento de generador de páginas de WordPress facilitaría mucho todo.

    Recomendamos utilizar Beaver Builder, que es el mejor creador de páginas de WordPress del mercado. Le permite crear cualquier tipo de diseño de página utilizando herramientas simples de arrastrar y soltar (no se requiere codificación).

    Esto también incluye agregar un menú de navegación personalizado al diseño de su página.

    Primero, deberá instalar y activar el complemento Beaver Builder. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

    Tras la activación, debe crear una nueva página o editar una existente en la que desea agregar el menú de navegación. En la pantalla del editor de publicaciones, haga clic en el botón “Iniciar Beaver Builder”.

    Lanzar Beaver Builder

    Si se trata de una página nueva, puede usar una de las plantillas preparadas que vienen con Beaver Builder. También puede editar su página de salida de inmediato.

    Elige una plantilla

    A continuación, debe agregar el módulo de menús y arrastrarlo y soltarlo en su página al lugar donde desea mostrar el menú.

    Agregue un módulo de menú a su página

    Aparecerá la configuración del módulo de menú en una ventana emergente. Primero, debe seleccionar el menú de navegación que desea usar. Siempre puede crear nuevos menús o editar un menú existente visitando Apariencia »Menús página en el área de administración de WordPress.

    Configuración del módulo de menú

    También puede revisar otras configuraciones. Beaver Builder le permite elegir colores personalizados, fondo y otras propiedades de estilo para su menú.

    Una vez que haya terminado, puede hacer clic en el botón Guardar y obtener una vista previa de su menú.

    Vista previa de un menú de navegación personalizado agregado con Beaver Builder

    Creación de menús adaptables para dispositivos móviles en WordPress

    Con el aumento en el uso de dispositivos móviles, es posible que desee que sus menús sean aptos para dispositivos móviles al agregar uno de los muchos efectos populares.

    Ejemplo de menú receptivo

    Puede agregar un efecto deslizante (arriba), un efecto desplegable e incluso un efecto de alternar para menús móviles.

    Tenemos una guía detallada paso a paso sobre cómo hacer que los menús de WordPress receptivos para dispositivos móviles.

    Haga más con los menús de navegación de WordPress

    Los menús de navegación son una poderosa herramienta de diseño web. Le permiten dirigir a los usuarios a las secciones más importantes de su sitio web..

    WordPress le permite hacer mucho más que solo mostrar enlaces en su menú. Pruebe estos útiles tutoriales para ampliar la funcionalidad de los menús de navegación en su sitio de WordPress.

    • Cómo agregar íconos de imagen con menús de navegación en WordPress
    • Cómo agregar lógica condicional a los menús en WordPress
    • Cómo agregar descripciones de menú en su tema de WordPress
    • Cómo agregar un menú receptivo a pantalla completa en WordPress
    • Cómo agregar un mega menú a su sitio de WordPress

    Eso es todo, esperamos que esta guía lo haya ayudado a aprender cómo agregar un menú de navegación en WordPress. También es posible que desee ver nuestra lista de los 25 widgets de WordPress más útiles, y nuestra lista de los complementos imprescindibles de WordPress.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map