Author : Jhon
Publicado : 3 noviembre, 2019
Paso 1 :
Crearemos el menu en el archivo funtions.php de wordpress, en este ejemplo crearemos un menu principal y un menu para el footer que sera el de las redes sociales, este seria el código :
register_nav_menus( array( 'menu_principal' => __( 'Menú Principal', 'atr-opt' ), 'menu_sociales' => __( 'Menú Redes Sociales', 'atr-opt' ) ) );
Paso 2 :
Iremos al panel de wordpress y crearemos las paginas que tendra nuestro menu, las mismas que haran parte de nuestra web.
Paso 3 :
Escribiremos el código que copiamos de un menu de bootstrap 4.2.1 y lo adaptamos con wordpress, el resultado sera una barra de menu que combina wordpress y bootstrap.
Este seria el codigo :
<div class="container-fluid">
<div class="row row-menu">
<div class="container">
<div class="row">
<div class="col-xl-4 col-lg-4 col-md-3 fila-logo">
<div class="logo">
<img class="img-fluid" src="<?php echo ATR_DIR_URI . 'public/img/logo.png'; ?>" alt="">
</div>
</div>
<div class="col-xl-8 col-lg-8 col-md-9">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="<?php echo esc_url( home_url('/') ); ?>"><i class="fas fa-home"></i></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<?php
wp_nav_menu( array(
'theme_location' => 'menu_principal',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'navbarNavDropdown',
'menu_class' => 'navbar-nav',
'menu_id' => 'menu-principal'
) );
?>
</nav>
</div>
</div>
</div>
</div>
</div>
Paso 4 :
Añadiremos unas clases que nos faltan en los elementos del menu, lo haremos mediante jquery, para ello vamos a nuestro archivo jquery y copiamos lo siguiente :
//Añadimos una clase a todos los li del menu con jquery
$('.navbar-collapse ul li').addClass('nav-item');
//Añadimos una clase a todos los a href del menu principal
$('.navbar-collapse ul li a').addClass('nav-link');
Deja una respuesta