menu de navigation wordpress utilisant le bootstrap de twitter

Question

menu de navigation wordpress utilisant le bootstrap de twitter

3

17159 2012-02-03

J'utilise lebootstrap Twitter dansmonthème. J'essaye d'utiliser lemenubootstrap dansmonthème. Maisil utilise des attributspersonnalisés comme data-toggle.

Voici le code complet.

 <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>

Quelqu'unpeut-ilm'aider à optimiser ce codepour wp_nav_menu ()?

Mise àjour:

C'est ce quej'aiessayéjusqu'àprésent.

1) Classe de sous-menupersonnalisé

La classe

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

Pouvez-vousm'aider à ajouter cette classe "déroulante"et ce lien

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

I'm using twitter bootstrap in my theme. I'm trying to use bootstrap menu in my theme. But it use custom attributes like data-toggle.

Here is the full code.

<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>

Can anyone help me to optimize this code for wp_nav_menu() ?

Update:

This is what i tried so far.

1) Custom submenu class

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

Can you help me to add that "dropdown" class and this link

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

4 réponses

votes

- 2
- 2012-10-15
J'ai utilisé une approche différente de celle d'unmarcheurpersonnalisé.J'ai utilisé unefonctionpour ajouter la classe "dropdown" àtous les éléments denavigationparent qui contiennent des éléments de sous-menu.Puisque WordPress affiche la classe "sous-menu"par défaut,j'utilisejQuerypour ajouter la classe "dropdown-menu" àtout élément qui a une classe de "sous-menu".J'utiliseensuitejQuerypour ajouter l'élément .

J'ai écrit ceci comme untutoriel complet sur lafaçon d'implémenter la liste déroulante Bootstrap dans unmenu denavigation WordPressici: http://astronautweb.co/2012/10/wordpress-dropdown-bootstrap/

I used a different approach than a custom walker. I used a function to add the class "dropdown" to any parent nav items which contain sub menu items. Since WordPress outputs the class "sub-menu" by default, I use jQuery to add the class "dropdown-menu" to any thing that has a class of "sub-menu". I then use jQuery to append the  element.

I have written this up as a complete tutorial about how to implement the Bootstrap dropdown in a WordPress nav menu here: http://astronautweb.co/2012/10/wordpress-dropdown-bootstrap/
- 0
- 2012-02-03
Consultez cette réponse pourplus de détails: recherchez menu_item_parentet définissez class="dropdown-toggle" conditionnellement.

Autres questions similaires .

See this answer for details: Look for menu_item_parent and set class="dropdown-toggle" conditionally.

More similar questions.
- Bonjourtoscho,merci.[Consultez cettepage] (http://wordpress.stackexchange.com/questions/16818/add-has-children-class-to-parent-li-when-modifying-walker-nav-menu).C'estexactement ce queje recherche.J'aiessayé ces codes.Puisqueje ne suispas unexperten php,je n'aipaspu lefairefonctionner.Pouvez-vousm'aider avec [cette réponse] (http://wordpress.stackexchange.com/a/16821/5074)?Merci
  
  Hello toscho, thanks. [Check this page](http://wordpress.stackexchange.com/questions/16818/add-has-children-class-to-parent-li-when-modifying-walker-nav-menu). That is what i exactly looking for. I tried those codes. Since i'm not a php expert i couldn't make it work. Can you help me with [this answer](http://wordpress.stackexchange.com/a/16821/5074)? Thanks
  - 0
  - 2012-02-03
  - Giri
- 0
- 2013-01-23
Essayez WP Bootstrap Menu si vousne cherchezpas quelque chose de compliqué.

Vous devez remplacer le wp_nav_menu()natifpar unefonctionpersonnalisée duplugin dans votrethèmepour lefairefonctionner.Sachez que lafonction dupluginn'estpas compatible avec d'autresplugins,ellen'offrepas lesmêmesfiltres que WordPress walker.

Try WP Bootstrap Menu if your not looking for something complicated.

You have to replace the native wp_nav_menu() with a custom function from the plugin in your theme to get it working. Be aware the plugin function is not compatible with other plugins, it doesn’t offer the same filters as the WordPress walker.
- [Une réponse doit êtreplus qu'un simple lien vers un siteexterne] (http://wordpress.stackexchange.com/faq#deletion).Veuillez ajouter une solution.
  
  [An answer should be more than just a link to an external site](http://wordpress.stackexchange.com/faq#deletion). Please add a solution.
  - 0
  - 2013-01-23
  - fuxia
- Ah désoléje ne savaispas,je ne saispas quoi ajouter,ceplugingénère du codeexact avec unefonctionpersonnaliséenécessairepourfonctionner avecbootstrap
  
  Ah sorry I didn't know, I don't know what to add, that plugin generates exact code with a custom function that's needed to work with bootstrap
  - 0
  - 2013-01-24
  - farhan
- J'aifait unemodificationpourmontrer à quoi celapourrait ressembler: décrivez comment celafonctionneet quels sont les changements lesplusimportants.Cen'esttoujourspasidéal,mais les lecteurs ultérieurspeuventjugerplus rapidement s'ils veulent l'utiliser.
  
  I made an edit to show how it could look: describe how it works and what the most important changes are. Still not ideal, but later readers can judge faster if they want to use it.
  - 0
  - 2013-01-24
  - fuxia
- Merci,j'ajouterai des détails comme ça laprochainefois queje posterai
  
  Thank you, I'll add details like that next time when I post
  - 0
  - 2013-01-24
  - farhan

Duane · Accepted Answer · 2012-02-13

4

2012-02-13

Pour une solution de copier-coller,consultez ce Walkerpersonnalisé: http://goodandorgreat.wordpress.com/2012/01/12/update-2-using-twitter-bootstrap-dropdown-menus-with-wordpress/

Ilmanque une ou deux choses comme data-toggle="dropdown"et .

Cela devrait être assezfacile à comprendre,mais voicima versionmodifiée: https://gist.github.com/1817371

J'espère que cela vous aidera.

Mercipour cela.Jen'aipas le code devantmoi,maisje me suis littéralement arraché les cheveuxen essayant de comprendre comment obtenir unepropriété `` had_children ''.Est-ce documenté quelquepartpar hasard?(la versionpost WP3.4je veux dire)

Thanks for this. I don't have the code in front of me, but I literally was pulling my hair out trying to figure out how to get a ```had_children``` property. Is this documented anywhere by chance? (the post WP3.4 version I mean)
- 0
- 2013-02-24
- Jon Jaques
Jene suispas sûr,mais [@Jan Fabry] (http://wordpress.stackexchange.com/users/8/jan-fabry) a une courteexplication dans [cefil] (http://wordpress.stackexchange.com/a/16821/13077)

I'm not sure, but [@Jan Fabry](http://wordpress.stackexchange.com/users/8/jan-fabry) has a short explanation in [this thread](http://wordpress.stackexchange.com/a/16821/13077)
- 0
- 2013-04-11
- Duane