¿Quieres añadir menús de navegación personalizados en tu tema de WordPress? Los menús de navegación son la lista horizontal de enlaces que aparece en la parte superior de la mayoría de los sitios web.
De forma predeterminada, los temas de WordPress vienen con ubicaciones de menú y diseños predefinidos, pero ¿qué pasaría si quisieras añadir tus propios menús de navegación personalizados?
En este artículo, te mostraremos cómo crear y añadir fácilmente menús de navegación personalizados en WordPress, para que puedas mostrarlos en cualquier lugar de tu tema.
¿Cuándo necesitas este tutorial del menú de navegación de WordPress?
La mayoría de los temas de WordPress vienen con al menos un lugar donde puedes mostrar los enlaces de navegación de tu sitio en un menú.
Puedes manejar los elementos del menú desde una interfaz fácil de usar dentro de tu área de administración de WordPress.
Si sólo quieres añadir menús de navegación en tu sitio web, simplemente sigue nuestra guía para principiantes sobre cómo añadir un menú de navegación en WordPress.
El objetivo de este tutorial es ayudar a los usuarios DIY / intermedios a añadir menús de navegación personalizados en sus temas de WordPress.
Cubriremos los siguientes temas en este artículo:
- Creación de un menú de navegación personalizado en los temas de WordPress
- Mostrando el menú de navegación personalizado en el tema de WordPress
- Agregar un menú de navegación personalizado en WordPress usando el constructor de páginas
- Creación de menús de respuesta para móviles en WordPress
- Más cosas que puedes hacer con los menús de navegación de WordPress
Dicho esto, veamos cómo añadir menús de navegación personalizados de WordPress en tu tema.
Creación de 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 añadir un menú de navegación personalizado, lo primero que tienes que hacer es registrar tu nuevo menú de navegación añadiendo este código al archivo functions.php de tu tema.
1234functionwpb_custom_new_menu() { register_nav_menu($0027mi-menú personalizado$0027,__( $0027Mi menú personalizado$0027));}add_action( $0027init$0027, $0027wpb_custom_new_menu$0027);
Ahora puedes ir a la página de menús de Apariencia « en tu administrador de WordPress e intentar crear o editar un nuevo menú. Verás «Mi menú personalizado» como opción de ubicación del tema.
Si quieres añadir más de una nueva ubicación en el menú de navegación, entonces necesitarás usar un código como este:
123456789functionwpb_custom_new_menu() { register_nav_menus( array( $0027my-custom-menu$0027=> __( $0027Mi menú personalizado$0027), $0027extra-menu$0027=> __( $0027Menú extra$0027) ) );}add_action( $0027init$0027, $0027wpb_custom_new_menu$0027);
Una vez que hayas añadido la ubicación del menú, sigue adelante y añade algunos elementos de menú en el administrador de WordPress siguiendo nuestro tutorial sobre cómo añadir menús de navegación para principiantes.
Esto nos permitirá pasar al siguiente paso que es mostrar el menú en su tema.
Mostrando menús de navegación personalizados en temas de WordPress
A continuación, necesitamos mostrar el nuevo menú de navegación en tu tema de WordPress. El lugar más común donde 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, puedes añadir tu menú de navegación donde quieras.
Tendrás que añadir este código en el archivo de plantilla de tu tema donde quieras mostrar tu menú.
12345 $0027my-custom-menu$0027, $0027container_class$0027=> $0027custom-menu-class$0027) ); ?>
La ubicación del tema es el nombre que seleccionamos en el paso anterior.
La clase contenedor es la clase CSS que se añadirá a su menú de navegación. Tu menú aparecerá como una lista con viñetas en tu sitio web.
Puedes usar la clase de CSS .custom_menu_class para dar estilo a tus menús. Aquí tienes una muestra de CSS para ayudarte a empezar:
1234567891011121314div.custom-menu-class ul { margin:20px0px20px0px; list-style-type: none; list-style: none; list-style-image: none; text-align:right;}div.custom-menu-class li { padding: 0px20px0px0px; display: inline;} div.custom-menu-class a { color:#FFFFFF;}
Para aprender más sobre cómo estilizar un menú de navegación, consulta nuestro tutorial detallado sobre cómo estilizar los menús de navegación de WordPress
Añadir un menú de navegación personalizado en WordPress usando el Constructor de Páginas
Si estás creando una página de aterrizaje personalizada o un diseño de página de inicio, entonces el uso de un plugin de construcción de páginas de WordPress haría todo mucho más fácil.
Recomendamos usar Beaver Builder, que es el mejor constructor de páginas de WordPress del mercado. Te permite crear cualquier tipo de diseño de página usando simples herramientas de arrastrar y soltar (no se requiere codificación).
Esto también incluye la adición de un menú de navegación personalizado al diseño de la página.
Primero, tendrás que instalar y activar el plugin Beaver Builder. Para obtener más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Una vez activada, debes crear una nueva página o editar una ya existente en la que quieras añadir el menú de navegación. En la pantalla del editor de publicaciones, haz clic en el botón «Lanzar Beaver Builder».
Si es una página nueva, entonces puedes usar una de las plantillas preparadas que vienen con Beaver Builder. También puedes editar tu página de salida de inmediato.
A continuación, debes añadir el módulo de menús y arrastrarlo y soltarlo en tu página hasta el lugar donde quieras mostrar el menú.
Esto hará que aparezca la configuración del módulo de menú en una ventana emergente. Primero, debe seleccionar el menú de navegación que desea utilizar. Siempre puedes crear nuevos menús o editar un menú existente visitando la página Appearance » Menus en el área de administración de WordPress.
También puede revisar otros ajustes. Beaver Builder te permite elegir colores personalizados, fondo y otras propiedades de estilo para tu menú.
Una vez que haya terminado, puede hacer clic en el botón Guardar y obtener una vista previa de su menú.
Creación de menús de respuesta fácil de usar en WordPress
Con el aumento del uso de los dispositivos móviles, es posible que desee hacer que sus menús sean más fáciles de usar añadiendo uno de los muchos efectos populares.
Puedes añadir un efecto de deslizamiento (arriba), un efecto desplegable e incluso un efecto de conmutación para los menús del móvil.
Tenemos una guía detallada paso a paso sobre cómo hacer menús de WordPress listos para el móvil.
Haz 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 te permite hacer mucho más que mostrar los enlaces en tu menú. Prueba estos útiles tutoriales para ampliar la funcionalidad de los menús de navegación de tu sitio de WordPress.
- Cómo añadir iconos de imágenes con los menús de navegación en WordPress
- Cómo añadir lógica condicional a los menús en WordPress
- Cómo añadir descripciones de menú en tu tema de WordPress
- Cómo añadir un menú de respuesta a pantalla completa en WordPress
- Cómo añadir un mega menú a tu sitio de WordPress
Eso es todo, esperamos que esta guía definitiva te haya ayudado a aprender a añadir un menú de navegación en WordPress. También puedes ver nuestra lista de los 25 widgets de WordPress más útiles, y nuestra lista de los imprescindibles plugins de WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para ver los video tutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.
Deja una respuesta