Crear la barra de menu con bootsrtrap 4.2.1 y wordpress 2019

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

Tu dirección de correo electrónico no será publicada.