web-dev-qa-db-fra.com

menu de navigation wordpress en utilisant Twitter bootstrap

J'utilise Twitter bootstrap dans mon thème. J'essaie d'utiliser le menu bootstrap dans mon thème. Mais il utilise des attributs personnalisé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'un peut-il m'aider à optimiser ce code pour wp_nav_menu ()?

Mettre à jour:

C'est ce que j'ai essayé jusqu'à présent.

1) Classe de sous-menu personnalisée

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-vous m'aider à ajouter cette classe "dropdown" et ce lien

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

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

Il manque une ou deux choses comme data-toggle="dropdown" et <b class="caret"></b>.

Cela devrait être assez facile à comprendre, mais voici ma version modifiée: https://Gist.github.com/1817371

J'espère que cela pourra aider.

4
Duane

J'ai utilisé une approche différente de celle d'un marcheur personnalisé. J'ai utilisé une fonction pour ajouter la classe "liste déroulante" à tout élément de navigation parent contenant des éléments de sous-menu. Puisque WordPress affiche par défaut la classe "sous-menu", j'utilise jQuery pour ajouter la classe "menu déroulant" à tout ce qui a une classe de "sous-menu". J'utilise ensuite jQuery pour ajouter l'élément <b class="caret"></b>.

J'ai rédigé ceci sous la forme d'un tutoriel complet sur la mise en œuvre du menu déroulant Bootstrap dans un menu de navigation WordPress, ici: http://astronautweb.co/2012/10/wordpress-dropdown-bootstrap/

2
Astrotim

Essayez WP Menu Bootstrap si vous ne cherchez pas quelque chose de compliqué.

Pour que cela fonctionne, vous devez remplacer la wp_nav_menu() native par une fonction personnalisée à partir du plug-in de votre thème. Sachez que la fonction plugin n’est pas compatible avec d’autres plugins, elle ne propose pas les mêmes filtres que le WordPress Walker.

0
farhan

Voir cette réponse pour plus de détails: Recherchez menu_item_parent et définissez class="dropdown-toggle" conditionnellement.

Plus de questions similaires .

0
fuxia