
Fecha: 01/01/2025 Author: Jhon Jairo Rincón
Crear la barra de menú con bootsrtrap y wordpress
Paso 1 :
Crearemos el menú en el archivo funtions.php de WordPress, en este ejemplo crearemos un menú principal y un menú para el footer que será el de las redes sociales, este sería 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 páginas que tendrá nuestro menú, las mismas que harán parte de nuestra web.
Paso 3:
Escribiremos el código que copiamos de un menú de bootstrap 4.2.1 y lo adaptamos con WordPress, el resultado será una barra de menú que combina WordPress y bootstrap.
Este sería el código:
<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 menú, 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');
Tags: PHP Javascript Html Bootstrap
Publicaciones Relacionadas
Optimizando el seo en wordpress: Modificando la función wp_enqueue_style() para optimizar el css
31/12/2024