Meniu WordPress folosind Twitter Bootstrap

3 feb. 2012, 21:51:23
Vizualizări: 17.3K
Voturi: 3

Folosesc Twitter Bootstrap în tema mea. Încerc să utilizez meniul bootstrap în tema mea. Dar acesta folosește atribute personalizate precum data-toggle.

Iată codul complet.

<ul class="nav">
            <li class="active"><a href="#">Acasă</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Acțiune</a></li>
                <li><a href="#">Altă acțiune</a></li>
                <li><a href="#">Altceva aici</a></li>
                <li class="divider"></li>
                <li><a href="#">Link separat</a></li>
              </ul>
            </li>
          </ul>

Poate cineva să mă ajute să optimizez acest cod pentru wp_nav_menu() ?

Actualizare:

Iată ce am încercat până acum.

1) Clasă personalizată pentru submeniu

class My_Walker_Nav_Menu extends Walker_Nav_Menu {
  function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul class=\"dropdown-menu\">\n";
  }
}

2) wp_nav_menu

<?php wp_nav_menu( array( 'items_wrap' => '<ul class="nav">%3$s</ul>','walker' => new My_Walker_Nav_Menu() ) ); ?>

Puteți să mă ajutați să adaug clasa "dropdown" și acest link

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

0
Toate răspunsurile la întrebare 4
2

Pentru o soluție rapidă de copiat și lipit, verifică acest Walker personalizat: http://goodandorgreat.wordpress.com/2012/01/12/update-2-using-twitter-bootstrap-dropdown-menus-with-wordpress/

Îi lipsesc câteva elemente precum data-toggle="dropdown" și <b class="caret"></b>.

Ar trebui să fie destul de ușor de rezolvat, dar iată versiunea mea modificată: https://gist.github.com/1817371

Sper că te ajută.

13 feb. 2012 16:47:24
Comentarii

Mulțumesc pentru asta. Nu am codul în fața mea, dar efectiv îmi smulgeam părul încercând să înțeleg cum să obțin o proprietate had_children. Este documentată cumva aceasta? (mă refer la versiunea post WP3.4)

Jon Jaques Jon Jaques
24 feb. 2013 17:22:02

Nu sunt sigur, dar @Jan Fabry are o scurtă explicație în acest thread

Duane Duane
11 apr. 2013 18:30:09
0

Am folosit o abordare diferită față de un walker personalizat. Am utilizat o funcție pentru a adăuga clasa "dropdown" oricărui element de navigație părinte care conține elemente de submeniu. Deoarece WordPress afișează implicit clasa "sub-menu", folosesc jQuery pentru a adăuga clasa "dropdown-menu" oricărui element care are clasa "sub-menu". Apoi folosesc jQuery pentru a adăuga elementul <b class="caret"></b>.

Am scris acest lucru ca un tutorial complet despre cum să implementezi dropdown-ul Bootstrap într-un meniu de navigare WordPress aici: http://astronautweb.co/2012/10/wordpress-dropdown-bootstrap/

15 oct. 2012 10:49:26
1

Vezi acest răspuns pentru detalii: Caută menu_item_parent și setează class="dropdown-toggle" condiționat.

Mai multe întrebări similare.

3 feb. 2012 22:46:20
Comentarii

Salut toscho, mulțumesc. Verifică această pagină. Exact asta cautam. Am încercat acele coduri. Deoarece nu sunt expert în PHP, nu am reușit să le fac să funcționeze. Poți să mă ajuți cu acest răspuns? Mulțumesc.

PrivateUser PrivateUser
3 feb. 2012 23:41:33
4

Încearcă WP Bootstrap Menu dacă nu cauți ceva complicat.

Trebuie să înlocuiești funcția nativă wp_nav_menu() cu o funcție personalizată din plugin în tema ta pentru a-l face să funcționeze. Atenție, funcția pluginului nu este compatibilă cu alte pluginuri, nu oferă aceleași filtre ca walker-ul WordPress.

23 ian. 2013 04:28:59
Comentarii

Un răspuns ar trebui să fie mai mult decât doar un link către un site extern. Te rog adaugă o soluție.

fuxia fuxia
23 ian. 2013 06:59:37

Ah scuze, nu știam, nu știu ce să adaug, acel plugin generează exact codul cu o funcție personalizată care este necesară pentru a funcționa cu bootstrap

farhan farhan
24 ian. 2013 08:15:32

Am făcut o editare pentru a arăta cum ar putea arăta: descrie cum funcționează și care sunt cele mai importante modificări. Încă nu este ideal, dar cititorii ulteriori pot aprecia mai rapid dacă doresc să-l folosească.

fuxia fuxia
24 ian. 2013 08:23:32

Mulțumesc, voi adăuga astfel de detalii data viitoare când voi posta

farhan farhan
25 ian. 2013 01:59:29