Crear una plantilla en WordPress con Bootstrap 4 – Menú dinámico en WordPress con Bootstrap 4
Vale ya tenemos nuestra estructura de plantilla y ahora vamos a empezar a crear contenido empezando por hacer un menú dinámico en WordPress con bootstrap 4, para ello vamos a seguir los siguientes pasos. No os asustéis, parece complicado pero en realidad e muy sencillo.
Lo primero que vamos a hacer es descargarnos la siguiente clase que nos ayudará a utilizar los menús de bootstrap en WordPress: class-wp-bootstrap-navwalker
Este archivo ya viene modificado por mi para que en el menú funcionen los diferentes subniveles, de hecho nosotros usaremos 4, pero como verás más adelante esto es totalmente configurable.
Una vez que hemos descargado el archivo .rar lo descomprimimos y ponemos el archivo que contiene en la raiz de nuestro tema.
Ahora vamos a registrar el menú, para lo cual vamos a irnos al archivo functions.php y vamos a introducir el siguiente código:
/**
* Registeramos Custom Navigation Walker
*/
function register_navwalker(){
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}
add_action( 'after_setup_theme', 'register_navwalker' );
/*Registrando el menú*/
register_nav_menus( array(
'primary' => __( 'Menú principal', 'WPB4' ),
) );
En este código lo que hacemos es registrar el archivo para que WordPress pueda ejecutar la clase.
Tras ello en la segunda función estamos registrando el menú primario como Menú principal.
A continuación vamos a introducir algo de css en nuestro tema para que los desplegables de nuestro menú se vean de forma correcta. Por lo que en nuestro archivo style.css vamos a incluir las siguientes líneas.
/*menu desplegable */
ul.dropdown-menu li > ul.dropdown-menu{
left: 100%;
top: 0;
}
ul.dropdown-menu li:hover > ul.dropdown-menu, ul.dropdown-menu li:focus > ul.dropdown-menu{
display: block
}
/*/menu desplegable*/
De este modo ya tenemos hecha casi toda la lógica y ya casi que solo nos falta maquetar el menú para ello vamos a crear la siguiente estructuras de carpetas desde la raíz de nuestro tema.
template-parts/header/nav.php
De este modo podemos tener nuestra plantilla de forma mucho más modular.
En el archivo nav.php que hemos creado vamos a introducir el siguiente código:
<div class="navbar navbar-default"> <div class="container"> <div class="visible-xs"> <?php get_search_form();?> </div> <nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'depth' => 4, 'container' => 'div', 'container_class' => 'collapse navbar-collapse', 'container_id' => 'bs-example-navbar-collapse-1', 'menu_class' => 'nav navbar-nav', 'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback', 'walker' => new WP_Bootstrap_Navwalker(), ) ); ?> </nav> </div> </div>
En él es donde vamos a crear nuestra barra de navegación que ya podremos maquetar y distribuir como nosotros queramos en nuestro tema.
Si nos fijamos aquí ya hemos hecho la llamada a nuestro menu primario y le hemos puesto una profundidad de 3, si queréis cambiar la profundidad simplemente cambiar el 4 por el número que queráis.
Pero si ejecutamos nuestra plantilla aún no hará nada, nos queda un último paso que ademas nos mostrará como hacer llamadas a otras partes de la plantilla, ya que vamos a llamar al nuevo archivo nav.php
Para ello vamos a modificar nuestro header.php por el siguiente código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="<?php bloginfo('charset')?>">
<title><?php wp_title(' | ', true, 'right');?><?php bloginfo('name')?></title>
<!--Introducir el css-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<!--Introducir el javascript-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<?php wp_head();?>
</head>
<body>
<header>
<h3><?php bloginfo('name');?></h3>
<h4><?php bloginfo('description');?></h4>
<?php get_template_part( 'template-parts/header/nav', ''); ?>
</header>
<main>
Si os fijáis lo que hemos hecho ha sido introducir en la línea 18 la funcion;
get_template_part( 'template-parts/header/nav', '');
sustituyendo a toda la navegación haciendo más modular y llamando a nuestra navegación.
Si ahora entráis en el panel de control de WordPress y en Amapariencia>>menús podemos crear nuestro menú, marcando siempre que debe de ser el menú principal.
De este forma ya hemos empezado a tocar nuestra plantilla para que lea información dinámica de nuestro WordPress y estoy seguro que siguiendo este tutorial se os ocurrirá como crear webs con más de un menú….
Bueno ya sabéis si os ha gustado esta entrada compartirla y como siempre es de agradecer algún click en los anuncios de la web…
