¿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 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 quieres 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 de menús de navegación en 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 gestionar 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, entonces 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:
- Crear un menú de navegación personalizado en los temas de WordPress
- Mostrar el menú de navegación personalizado en el tema de WordPress
- Añadir un menú de navegación personalizado en WordPress usando el constructor de páginas
- Crear menús responsivos amigables con los móviles en WordPress
- Más cosas que puedes hacer con los menús de navegación de WordPress
Habiendo dicho eso, echemos un vistazo a cómo añadir menús de navegación personalizados de WordPress en tu tema.
- Crear menús de navegación personalizados en los temas de WordPress
- Mostrar los menús de navegación personalizados en los temas de WordPress
- Añadir un menú de navegación personalizado en WordPress usando el constructor de páginas
- Crear menús responsivos amigables con el móvil en WordPress
- Haz más con los menús de navegación 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.
function wpb_custom_new_menu() { register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));}add_action( 'init', 'wpb_custom_new_menu' );
Ahora puedes ir a la página Apariencia » Menús en tu administración de WordPress y tratar de crear o editar un nuevo menú. Usted verá ‘Mi menú personalizado’ como opción de ubicación del tema.
Si quieres añadir más de una nueva ubicación de menú de navegación, entonces tendrías que usar un código como este:
function wpb_custom_new_menu() { register_nav_menus( array( 'my-custom-menu' => __( 'My Custom Menu' ), 'extra-menu' => __( 'Extra Menu' ) ) );}add_action( 'init', 'wpb_custom_new_menu' );
Una vez que hayas añadido la ubicación del menú, sigue adelante y añade algunos elementos de menú en el admin 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.
A continuación, tenemos que mostrar el nuevo menú de navegación en tu tema de WordPress. El lugar más común donde se suelen colocar los menús de navegación es en la sección de la cabecera de un sitio web justo después del título del sitio o del logotipo.
Sin embargo, puede añadir su menú de navegación en cualquier lugar que desee.
Tendrás que añadir este código en el archivo de plantilla de tu tema donde quieras mostrar tu menú.
<?phpwp_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 añadirá a tu menú de navegación. Su menú aparecerá como una lista con viñetas simple en su sitio web.
Puedes utilizar la clase CSS.custom_menu_classpara dar estilo a tus menús. Aquí hay un ejemplo de CSS para ayudarle a empezar:
div.custom-menu-class ul { margin:20px 0px 20px 0px; list-style-type: none; list-style: none; list-style-image: none; text-align:right;}div.custom-menu-class li { padding: 0px 20px 0px 0px; display: inline;} div.custom-menu-class a { color:#FFFFFF;}
Para aprender más sobre el estilo de un menú de navegación, vea nuestro tutorial detallado sobre cómo dar estilo a los menús de navegación de WordPress
Si está creando una página de aterrizaje personalizada o un diseño de página de inicio, entonces el uso de un plugin de constructor de páginas de WordPress haría todo mucho más fácil.
Recomendamos el uso de Beaver Builder, que es el mejor constructor de páginas de WordPress en el mercado. Le permite crear cualquier tipo de diseño de página utilizando herramientas simples de arrastrar y soltar (sin necesidad de codificación).
Esto también incluye añadir un menú de navegación personalizado a su diseño de página.
Primero, tendrá que instalar y activar el plugin Beaver Builder. Para más detalles, vea nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Una vez activado, necesita crear una nueva página o editar una existente donde le gustaría añadir el menú de navegación. En la pantalla del editor de entradas, haga clic en el botón ‘Launch Beaver Builder’.
Si se trata de una nueva página, entonces usted puede utilizar una de las plantillas ya hechas que vienen con Beaver Builder. También puede editar su página de salida de inmediato.
Luego, necesita agregar el módulo de menús y arrastrarlo y soltarlo en su página al lugar donde quiere mostrar el menú.
Esto hará que aparezca la configuración del módulo Menú en una ventana emergente. En primer lugar, debe seleccionar el menú de navegación que desea utilizar. Siempre puede crear nuevos menús o editar un menú existente visitando la página Apariencia » Menús en el área de administración de WordPress.
También puedes revisar otros ajustes. Beaver Builder le permite elegir los colores personalizados, el 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ú.
Con el aumento del uso de dispositivos móviles, es posible que desee hacer que sus menús sean amigables con el móvil añadiendo uno de los muchos efectos populares.
Puedes añadir un efecto de deslizamiento (arriba), un efecto desplegable, e incluso un efecto de palanca para los menús móviles.
Tenemos una guía detallada paso a paso sobre cómo hacer menús de WordPress responsivos listos para móviles.
Los menús de navegación son una poderosa herramienta de diseño web. Te permiten dirigir a los usuarios a las secciones más importantes de tu sitio web.
WordPress te permite hacer mucho más que mostrar enlaces en tu menú. Prueba estos útiles tutoriales para ampliar la funcionalidad de los menús de navegación en tu sitio de WordPress.
- Cómo añadir iconos de imagen 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ú responsive 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 cómo añadir un menú de navegación en WordPress. Quizás también quieras ver nuestra lista de los 25 widgets de WordPress más útiles, y nuestra lista de los plugins de WordPress imprescindibles.
Si te ha gustado este artículo, suscríbete a nuestro canal de YouTube para ver videotutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.