La creación de menús en WordPress es parte fundamental cuando creamos o modificamos cualquier tema. En este HowTo podrás crear un menú de forma rápida siguiendo una serie de pasos.
Una de las formas más sencillas y rápidas para crear un menú Responsive con varios niveles es hacer uso de Bootstrap4. Aquí aprenderás cómo implemetarlo y tan sólo tendrás que seguir una serie de pasos.
El menú en WordPress para su versión escritorio se verá de la siguiente forma:
Mientras que en su versión responsive debe tener la siguiente apariencia:
Qué necesitamos
- WordPress instalado y funcionando.
- Incluir el Framework Bootstrap4 a nuestro tema.
- Descargar la clase wp_bootstrap_navwalker.php
No voy a entrar en detalle con los dos primeros pasos ya que este post no trata de instalación de WordPress ni cómo se incluye una librería.
¿Qué es wp_bootstrap_navwalker.php?
Todos los que hemos creado menús con WordPress saben que no siempre es fácil trabajar con la función wp_nav_menu() para poder integrarlo con Bootstrap4.
Y aunque implementar un menú de navegación con un sólo nivel puede ser sencillo, la cosa se complica cuando se trata de incluir varios niveles. Para ello podemos usar wp_bootstrap_navwalker.php, una clase escrita en PHP y que nos va a facilitar la integración de un menú Bootstrap4 en WordPress.
Para ello tan sólo tendremos que descargar la clase de la siguiente dirección url y subirla al directorio del tema con el que estamos trabajando y donde queremos crear el nuevo menú. Por lo que en el fichero functions de tu tema incluye la siguiente línea para enlazar el fichero que acabas de descargar. El directorio donde lo tengas ubicado ya es de tu elección.
|
1 2 |
<?php require_once 'inc/wp_bootstrap_navwalker.php'; |
Rutas del menú
El menú principal (primary) de WordPress suele estar ubicado en el fichero header.php aunque yo recomiendo separarlo de este para así modular el tema. Por lo que si abrimos el fichero header.php podemos usar la función get_template_part() para así separarlo e incluirlo en un único fichero.
|
1 2 |
<?php get_template_part( 'template-parts/header/nav', ''); |
El directorio que indiquemos y donde estará el fichero que contiene el menú también es una elección personal de cada uno. Por lo que el siguiente paso es crear el fichero nav.php en la ruta especificada.
Creación del menú
La función que usa WordPress para crear menús es wp_nav_menu(), que admite una gran cantidad de parámetros para poder personalizarlo.
|
1 2 |
<?php wp_nav_menu( $conf ); |
Si lo que quieres es el código del menú, ve más abajo para copiarlo y probarlo en el tema que estés usando de WordPress. Si de lo contrario quieres saber cómo funcionan y para que sirve cada uno de los parámetros de wp_nav_menu() continua leyendo porque los vamos a utilizar todos para comprender cómo funciona y para que sirve cada uno de ellos.
- menu es el nombre que has asignado al menú usando la función register_nav_menu(). Por defecto WordPress usa siempre la palabra clave primary.
- menu_class será el valor del atributo de clase del elemento <ul></ul> del menú.
- menu_id es el valor del atributo id del elemento <ul></ul>
- container el elemento que hará de padre del menú <ul></ul>
- container_class – el valor de la clase del contenedor padre que alberga el menú <ul></ul>
- container_id el valor del indetificador del contenedor que alberga el menú <ul></ul>
Veamos cómo funciona el elemento container con la siguiente configuración que utilizaremos con Bootstrap4:
|
1 2 3 4 5 |
$conf = [ 'container' => 'div', 'container_class' => 'navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2', 'container_id' => 'navbarCollapse' ]; |
Esta configuración crea las siguientes líneas de código HTML5 para el menú. Por lo que si te fijas bién se está creando tanto el elemento que contendrá el menú (<div>) como los valores de los atributos id y class de este:
|
1 2 3 4 5 6 |
<!-- container, container_id y container_class --> <div id="navbarCollapse" class="navbar-collapse w-100 order-1 order-md-0 dual-collapse2 collapse show" style=""> <ul id="main-menu" class="navbar-nav mr-auto"> <!-- items --> </ul> </div> |
Prosigamos con más parámetros y opciones que podemos configurar con wp_nav_menú()
- fallback_cb en caso de que el menú no exista, este ejecuta una función. Por defecto siempre es wp_nav_menu() que es la que queremos utilizar. Por lo que vamos a establecerlo en false para que no haga nada.
- before es un texto antes de cada item del menú.
- after es un texto después de cada item del menú.
- link_before nos permite incluir un elemento o texto que irá siempre al inicio del texto de cada enlace.
- link_after nos permite incluir un elemento o texto que irá incluido al final del texto de cada enlace.
|
1 2 3 4 5 6 7 8 |
<ul> <li> <a href=""> <!-- link_before corresponde al elemento <span> y link_after al elemento </span> <span>enlace</span> </a> </li> </ul> |
- echo corresponde a un valor booleano (true|false). Por defecto es true y lo que va a hacer es imprimir el menú.
- depth nos permite indicar la cantidad de niveles que va a tener el menú. En nuestro caso 2.
- walker será donde vamos a incluir la clase que construye el menú. En este caso incluiremos new wp_bootstrap_navwalker()
- items_wrap nos permite especificar cómo se mostrarán los elementos de la lista.
- item_spacing permite eliminar o conservar espacios del menú. Acepta 2 parámetros (preserve y discard) y por defecto es preserve.
Configuración del menú
Ya sabemos para que sirve cada uno de los parámetros que usa de wp_nav_menu(), por lo que ahora vamos a crear una configuración apropiada para nuestro menú funcione correctamente con Bootstrap4.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!-- Bootstrap 4 Navigation Bar --> <div class="navbar navbar-expand-md navbar-dark " role="navigation"> <div class="container"> <a class="navbar-brand" href="<?php echo esc_url(home_url('/')); ?>"> <div class="title"> <img src="<?php echo get_template_directory_uri().'/assets/img/favicon512.png'; ?>" width="30" height="30" class="d-inline-block align-top" alt="<?php bloginfo('name'); ?>"> <span><?php bloginfo('name'); ?></span> </div> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <?php <?php $conf = [ 'menu' => 'primary', 'theme_location' => 'primary', 'menu_id' => 'main-menu', 'menu_class' => 'navbar-nav mr-auto', 'container' => 'div', 'container_class' => 'navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2', 'container_id' => 'navbarCollapse', 'fallback_cb' => 'false', 'before' => '', 'after' => '', 'link_before' => '<span>', 'link_after' => '</span>', 'echo' => true, 'depth' => 2, 'walker' => new wp_bootstrap_navwalker(), 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', 'item_spacing' => 'preserve', 'fallback_cb' => 'wp_page_menu' ]; wp_nav_menu($conf); ?> <!-- menú de búsqueda aquí --> </div> </div><!-- End Bootstrap 4 Navigation Bar --> |
Incluir un formulario de búsqueda al menú
Incluir un formulario de búsqueda al menú Responsive también es importante. Lo podemos hacer de la siguiente forma incluyendo el siguiente código a continuación de la función wp_nav_menu().
Recuerda que este formulario tan sólo debería ser visible en la versión responsive de la web por lo que tendrás que utilizar una media query para ocultarlo si crees necesario en la versión de escritorio.
|
1 2 3 4 5 6 7 8 |
<div class="collapse navbar-collapse w-100 order-2 dual-collapse2 social" id="navbarCollapse"> <div id="searchNav"> <form role="search" method="get" class="search-form" action="https://blog.artegrafico.net/"> <input type="search" class="search-field" placeholder="Buscar ..." value="" name="s"> <input type="submit" class="search-submit" value="Buscar"> </form> </div> </div> |
Maquetación del menú
La maquetación ya es cuestión de gustos de cada uno, cada tema es diferentes por lo que cada uno incluye sus colores, margenes, etc …
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* navbar bootstrap4 */ .navbar { background-color: #285c2a; width: 100%; z-index: 1; } .navbar .navbar-brand .title { padding: 0px 10px; } .navbar .navbar-brand .title span { padding: 0 0 0 10px; } @media screen and (max-width: 992px) { .navbar .navbar-brand .title span { font-size: 1rem; } } .navbar .navbar-dark .navbar-toggler { border: transparent; } @media screen and (max-width: 992px) { .navbar .dropdown-menu { padding: 0; margin: 0; border: 0 transparent; background: transparent; } .navbar .dropdown-menu li { margin: 0 !important; padding: 0 !important; } .navbar .dropdown-menu li a { color: #fff; padding: 5px 0 !important; } } @media screen and (max-width: 992px) { .navbar #navbarCollapse .dropdown-toggle::after { position: absolute; right: 20px; top: 20px; } .navbar #navbarCollapse #main-menu { margin: 10px 0 0 15px; } } @media screen and (max-width: 992px) { .navbar #navbarCollapse #social { flex-direction: row; } } @media screen and (max-width: 992px) { .navbar #navbarCollapse #social .nav-item { padding: 10px 0 0 20px; } } .navbar #navbarCollapse #social .sozialize { padding: 9px 12px 0 0; color: #c6c6c6; } @media screen and (max-width: 992px) { .navbar #navbarCollapse #social .sozialize { padding: 18px 0px 0 15px; } } |
