Menu di navigazione WordPress con Twitter Bootstrap

3 feb 2012, 21:51:23
Visualizzazioni: 17.3K
Voti: 3

Sto utilizzando Twitter Bootstrap nel mio tema. Sto cercando di usare il menu di Bootstrap nel mio tema, ma utilizza attributi personalizzati come data-toggle.

Ecco il codice completo.

<ul class="nav">
            <li class="active"><a href="#">Home</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="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>

Qualcuno può aiutarmi a ottimizzare questo codice per wp_nav_menu()?

Aggiornamento:

Ecco cosa ho provato finora.

1) Classe personalizzata per i sottomenu

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() ) ); ?>

Puoi aiutarmi ad aggiungere quella classe "dropdown" e questo link

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

0
Tutte le risposte alla domanda 4
2

Per una soluzione pronta all'uso, controlla questo custom Walker: http://goodandorgreat.wordpress.com/2012/01/12/update-2-using-twitter-bootstrap-dropdown-menus-with-wordpress/

Manca una o due cose come data-toggle="dropdown" e <b class="caret"></b>.

Dovrebbe essere abbastanza semplice capirlo, ma ecco la mia versione modificata: https://gist.github.com/1817371

Spero che sia utile.

13 feb 2012 16:47:24
Commenti

Grazie per questo. Non ho il codice davanti a me, ma mi stavo letteralmente strappando i capelli cercando di capire come ottenere una proprietà had_children. È documentata da qualche parte per caso? (intendo la versione post WP3.4)

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

Non sono sicuro, ma @Jan Fabry ha una breve spiegazione in questo thread

Duane Duane
11 apr 2013 18:30:09
0

Ho utilizzato un approccio diverso rispetto a un walker personalizzato. Ho usato una funzione per aggiungere la classe "dropdown" a qualsiasi elemento di navigazione genitore che contenga voci di sottomenu. Poiché WordPress genera la classe "sub-menu" di default, utilizzo jQuery per aggiungere la classe "dropdown-menu" a qualsiasi elemento che abbia la classe "sub-menu". Successivamente, uso jQuery per aggiungere l'elemento <b class="caret"></b>.

Ho documentato questa soluzione come un tutorial completo su come implementare il dropdown di Bootstrap in un menu di navigazione WordPress qui: http://astronautweb.co/2012/10/wordpress-dropdown-bootstrap/

15 ott 2012 10:49:26
1

Vedi questa risposta per i dettagli: cerca menu_item_parent e imposta class="dropdown-toggle" in modo condizionale.

Altre domande simili.

3 feb 2012 22:46:20
Commenti

Ciao toscho, grazie. Controlla questa pagina. È esattamente quello che sto cercando. Ho provato quei codici. Non essendo un esperto di php non sono riuscito a farlo funzionare. Puoi aiutarmi con questa risposta? Grazie

PrivateUser PrivateUser
3 feb 2012 23:41:33
4

Prova WP Bootstrap Menu se non stai cercando qualcosa di complicato.

Dovrai sostituire la funzione nativa wp_nav_menu() con una funzione personalizzata del plugin nel tuo tema per farlo funzionare. Tieni presente che la funzione del plugin non è compatibile con altri plugin e non offre gli stessi filtri del walker di WordPress.

23 gen 2013 04:28:59
Commenti

Una risposta dovrebbe essere più di un semplice link a un sito esterno. Per favore aggiungi una soluzione.

fuxia fuxia
23 gen 2013 06:59:37

Ah scusa non lo sapevo, non so cosa aggiungere, quel plugin genera esattamente il codice con una funzione personalizzata necessaria per funzionare con bootstrap

farhan farhan
24 gen 2013 08:15:32

Ho fatto una modifica per mostrare come potrebbe apparire: descrivi come funziona e quali sono le modifiche più importanti. Ancora non ideale, ma i lettori successivi possono giudicare più velocemente se vogliono usarlo.

fuxia fuxia
24 gen 2013 08:23:32

Grazie, aggiungerò dettagli come questi la prossima volta che posterò

farhan farhan
25 gen 2013 01:59:29