Cum să adaugi clasa dropdown Bootstrap la un meniu de navigare în WordPress

Question

Cum să adaugi clasa dropdown Bootstrap la un meniu de navigare în WordPress

26 iul. 2017, 14:13:22

Vizualizări: 15.5K

Voturi: 2

Cum să construiești acest meniu în WordPress

<div class="collapse navbar-collapse" id="collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">povestea noastră</a></li>
                    <li><a href="#">viziunea noastră</a></li>
                    <li class="dropdown">
                        <a href="#">Istorie</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Istorie 1</a></li>
                            <li><a href="#">Istorie 2</a></li>
                            <li><a href="#">Istorie 3</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

Cod WordPress:

<div class="collapse navbar-collapse" id="collapse-1">

<?php
wp_nav_menu( array(
    'theme_location' => 'header',
    'menu_class' => 'nav navbar-nav',
    'fallback_cb' => false
) );
?>

</div>

sevoug

21

meniuri navigare twitter bootstrap

Comentarii

Care este codul tău pentru a construi un meniu de navigare fără clasa dropdown?

Max Yudin

26 iul. 2017 14:15:30

Accesează acest link, vei înțelege ideea. https://codex.wordpress.org/WordPress_Menu_User_Guide

TMA

26 iul. 2017 14:16:11

   <?php wp_nav_menu( array( 'theme_location' => 'header', 'menu_class' => 'nav navbar-nav', 'fallback_cb' => false ) ); ?>

            </div>

sevoug

26 iul. 2017 14:16:52

Pentru Bootstrap 5: https://github.com/AlexWebLab/bootstrap-5-wordpress-navbar-walker

Lars Flieger

26 mai 2021 14:21:36

Toate răspunsurile la întrebare

Comentarii

Știi dacă Navwalker funcționează cu Bootstrap 5?

Lars Flieger

25 mai 2021 12:17:25

@Lars Nu fi timid. Google este prietenul tău. 1, 2 și așa mai departe.

Max Yudin

27 mai 2021 10:04:29

Max Yudin 6.38K · Answer 1 · 2017-07-26T14:42:03Z

Cea mai ușoară metodă de a face acest lucru este să folosești o soluție gata pregătită. Există o clasă WP_Bootstrap_Navwalker care extinde clasa nativă Walker_Nav_Menu din WordPress și pregătește meniurile de navigare pentru Bootstrap 3 sau 4. Descarcă-o de pe GitHub.

Adaug-o în tema ta, apoi adaugă următoarele în functions.php:

<?php
require_once('calea-catre-director/wp-bootstrap-navwalker.php');

Schimbă calea-catre-director/ pentru a se potrivi nevoilor tale.

Apoi, modifică funcția wp_nav_menu() cu următorul cod:

<?php
wp_nav_menu( array(
    'menu'              => 'header', // potrivește numele cu al tău
    'theme_location'    => 'header',
    'container'         => 'div', // nu este nevoie să înfășori manual `wp_nav_menu`
    'container_class'   => 'collapse navbar-collapse',
    'container_id'      => 'collapse-1',
    'menu_class'        => 'nav navbar-nav',
    'fallback_cb'       => false,
    'walker'            => new WP_Bootstrap_Navwalker() // Folosește un Walker diferit
));

Reține că nu mai ai nevoie de <div class="collapse navbar-collapse" id="collapse-1"> deoarece acesta va fi adăugat automat de wp_nav_menu() cu clasele CSS și id-ul corespunzătoare.

De asemenea, citește cu atenție fișierul README.md al WP_Bootstrap_Navwalker.

Jiwan 41 · Answer 2 · 2018-06-01T17:00:30Z

Cea mai ușoară soluție ar fi să folosești jQuery în acest caz. Poți adăuga o nouă clasă în fișierul tău functions.php pentru a verifica dacă elementul din meniu are copii și apoi să adaugi atribute acelui element sau poți folosi și bootstrap nav walker. Aici voi merge pe varianta mai simplă.


    $(document).ready(function(){
        $("ul.sub-menu").parent().addClass("dropdown");
        $("ul.sub-menu").addClass("dropdown-menu");
        $("ul#menuid li.dropdown a").addClass("dropdown-toggle");
        $("ul.sub-menu li a").removeClass("dropdown-toggle"); 
        $('.navbar .dropdown-toggle').append('');
        $('a.dropdown-toggle').attr('data-toggle', 'dropdown');
    });

Doar copiază-l și lipește-l în fișierul tău footer.php. Pentru mai multe detalii http://webtrickshome.com/faq/how-to-add-bootstrap-dropdown-class-in-wordpress-menu-item

Elidrissi simo 85 · Answer 3 · 2017-07-26T14:38:32Z

poți folosi clasa Walker_Nav_Menu dacă dorești să modifici structura implicită a meniului WordPress.

https://codex.wordpress.org/Class_Reference/Walker

https://www.youtube.com/watch?v=IqTMhmjTBoE&list=PLriKzYyLb28kpEnFFi9_vJWPf5-_7d3rX&index=19

Elidrissi simo

85

26 iul. 2017 14:38:32