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

Comentarios

Registrate o haz login para escribir tu primer comentario

Resgistrarse Login