bonjour,
pour la réalisaton d'un site internet j'ai utiliser bootstrap seulement bootstrap demande un tas de class particuliere pour fontionné correctement notemment au niveau du menu.

Ma question est donc comment intégrer une menu fait avec bootstrap sur wordpress ?

Voici mon menu :

<div class="navbar">
                        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                            <span>Navigation</span>
                        </a>

                        <a href="index.php" title="#" class="brand"><img src="img/logo.png" alt=" ********"></a>
                        <div id="titre-navbar-mobile" class="span8 hidden-phone">
                            *********
                        </div>
                        <div class="nav-collapse collapse offset3">
                            <ul class="nav">
                                <li class="menu-accueil span2"><a href="#" title="#">Accueil</a></li>
                                <li class="menu-prono span2 dorpdown">
                                    <a href="#" class="dropdown-toggle" data-hover="dropdown" data-delay="50" data-close-others="true">
                                        Pronos
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li class="prono-free span3"><a href="#" title="#">Pronos gratuits</a></li>
                                        <li class="prono-payant span3"><a href="#" title="#">Pronos payant</a></li>
                                    </ul>
                                </li>
                                <li class="menu-contact span2"><a href="#" title="#">Contact</a></li>
                                <li class="menu-connexion span2"><a href="#" title="#">Inscription / Connexion</a></li>
                            </ul>
                        </div>
                    </div>

alors pour les class nav-collapse collapse offset3 et la personnalisation du ul.nav j'ai trouver j'ai rajouter sa a mon menu :

<?php 
                                        wp_nav_menu( array(
                                            'theme_location'=>'nav',
                                            'container_class' => 'nav-collapse collapse offset3',
                                            'menu_class' => 'nav',
                                            'menu_id' => 'main-menu'
                                       )); 
                                     ?>

Le problème se situe vraiment au niveau du sous menu :
le ul.dropdown-menu et surtout sur le :

<a href="#" class="dropdown-toggle" data-hover="dropdown" data-delay="50" data-close-others="true">
                                        Pronos
                                    </a>

3 réponses


BenFarhat
Réponse acceptée

je ne sais pas trop si j'ai compris ta question mais je vais répondre comme je l'entend puis tu corrigeras si je me suis égaré (lis bien jusqu'à la fin et en principe ca résoudra ton problème mais ca te permettra de comprendre parfaitement le fonctionnement des menus sous wordpress)
Donc voila, pour wordpress si tu veux parfaitement intégrer le menu bootstrap, il faut l'insérer (si on peut dire ca) dans le coeur de wordpress, dans le sens ou c'est wordpress qui gère et affiche ton menu facon bootstrap et non toi qui doit utiliser des subterfuges pour y arriver) et la solution est de simplement étendre la classe Walker_Nav_Menu (en bas je t'explique en détails le fonctionnement de la classe Walker_Nav_Menu) et le résultat est monstrueusement convainquant (du moins pour les commanditaires du site)
Bref Tu peux le faire a ta facon en te basant sur mon code ou en regardant le lien qui montre

LA SOLUTION:

donc voila au niveau de l'affichage de ton menu tu fait ceci:

<?php 
if (has_nav_menu('top-fixed-menu')): //si j'ai le menu top-fixed-menu s'il existe toujours chez toi tu peux enlever ce test
?>
<style type="text/css" rel="stylesheet">
    body {padding-top: 30px;} j'ai besoin de ce padding dans le cas ou le menu bootstrap est le fixe
</style>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#"></a>
<div class="nav-collapse">
<?php
wp_nav_menu(array(
'theme_location' => 'top-fixed-menu', // la j'appelle mon menu que tu change avec le tiens
'menu_class' => 'nav nav-pills', 
'depth' => 2,
'fallback_cb' => false,
'walker' => new tontheme_dropdown_walker() // et la c'est la classe que j’étends
));
?>
</div>
</div>
</div>
</div>
<?php
endif;
?>

et la classe tontheme_dropdown_walker est comme suit (c'est bien sur dans functions.php que cela se passe):

class tontheme_dropdown_walker extends Walker_Nav_Menu
{
    var $link_counter=0;
  function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output )
    {
        $id_field = $this->db_fields'id'];
        if ( is_object( $args[0] ) ) {

            $args[0]->has_children = ! empty( $children_elements$element->$id_field] );
        }
        return parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
    }
    function start_lvl(&$output, $depth) {
        $class = 'dropdown-menu';
        $indent = str_repeat("\t",$depth);
        $output .= "\n$indent<ul class=\"$class\">\n";
    }

      function start_el(&$output, $item, $depth, $args)
      {
           global $wp_query;

            $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
            $class_names = $value = '';
            $classes = empty( $item->classes ) ? array() : (array) $item->classes;
            //$classes] = 'menu-item-' . $item->ID;
            $classes] = '';
            //$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
            $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );

            if(strpos($class_names,'current-menu-item') || strpos($class_names,'current-page-item') || strpos($class_names,'current-menu-parent') || strpos($class_names,'current_page_parent') ) $class_names .= " active ";
            $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
            $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
            $class_names= ($args->has_children) ? ' class="' . esc_attr( $class_names ) . ' dropdown "' : ' class="' . esc_attr( $class_names ) . '"';
            $output .= $indent . '<li' . $id . $value . $class_names .'>';
           $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
           $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
           $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
           $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';

            if ( $args->has_children ) {
                $attributes .= ' class="dropdown-toggle" data-toggle="dropdown"';
                $caret=' <b class="caret"> </b>';
            }
            else {
                $caret='';
            }
            $item_output = $args->before;
            if(strpos($class_names,'menu-item-home') )
            {

                $item_output .= '<a href="'.home_url( '/' ).'"><i class="menu-home"> </i></a>';
            }
            else
            {
                $item_output .= '<a'. $attributes .'>';
                $item_output .= $args->link_before .apply_filters( 'the_title', $item->title, $item->ID );
                $item_output .= $description.$args->link_after;
                $item_output .= $caret.'</a>';

            }
            $item_output .= $args->after;
            $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );

            }
}new tontheme_dropdown_walker();

L'EXPLICATION:

Avant de commencer si tu n'a pas de notion de l'orienté objet tu peux regarder cette vidéo ( http://www.grafikart.fr/tutoriels/php/introduction-poo-php-114) et bien sur poser toute les questions que tu veux pour plus de détails..
On commence donc
La classe Walker est une classe abstraite qui permet dans wordpress d'afficher tout ce qui a une structure en arborescence ou en classe comme les listes et sous listes (avec la classes Walker_Page), les catégories et taxonomies (avec la classe Walker_Category) et les menus (avec la classe Walker_Nav_Menu) donc dans notre cas c'est Walker_Nav8menu que nous utiliserons
Donc sans vouloir offenser ceux qui save ce que c'est, un menu est composé de balise ul et li
UL permet d'ouvrir un niveau
et LI permet d'afficher un élement de ce niveau
un UL dans un LI permet de faire un sous niveau ou sous menu

Voila un exemple
<ul>
<li>A</li>
<li>B</li>
<li>C
<ul>
<li>C1</li>
<li>C2</li>
<li>C3
<ul>
<li>C3.1</li>
<li>C3.2</li>
</ul>
</li>
<li>C4</li>
</ul>
</li>
<li>D</li>
<li>E</li>
</ul>

Au niveau Bootstrap on constate que les menus ( navbar) sont comme ceci

<ul class=" nav"> <-- A - le premier niveau à la classe nav (nous n'y toucherons pas puisqu'on l'écrit en dure lors de l'appelle dans ton thème de wp_nav_menu et de l'attribut 'menu_class' => 'nav nav-pills',
<li class=" dropdown"> <-- B - un élement qui a un sous menu doit avoir la classe dropdown
<a href="#" class="dropdown-toggle" data-toggle="dropdown" > <-- C - l'élement (lien) doit avoir la classe dropdown-toggle et l'attribut data-toggle à dropdown (ces particularités sont essentiels puisque c'est bootstrap qui l'utilise sans ca il ne fait rien)
<b class="caret"></b> <-- D - un sous menu doit avoir une flèche vers le bas (c'est la class caret)
</a>
<ul class=" dropdown-menu"> <-- E - et le sous menu doit avoir la classe dropdown-menu
...
</ul>
</li>
</ul>
ici la particularité A étant intégré voila comment insérer les élements B,C,D et E via Walker_Nav_Menu

La classe Walker_Nav_Menu qui est une extension de la classe Walker va afficher ton menu en utilisant plusieurs méthodes (fonctions)

function void start_lvl () -> te permet de commencer un niveau et donc un <UL>
function void end_lvl () -> te permet de fermer (finir) un niveau et donc </UL>
function void start_el () -> te permet d'initier un élement et ce qui va avec (liens etc...) donc s'occupe des <LI>
function void end_el () -> te permet de clore un élement et donc s'occupe en qques sortes des </LI>
function display_element -> c'est comme le nom l'indique ce qui va effectivement afficher les élements en se basant sur les fonction décrite précédemment
par exemple dans le cas du C3 il y aura des stert_el et end_el puisque c'est un item du menu mais égelement des start_lv et end_lv puisqu'il contient un sous menu

bref il y a d'autres fonctions mais c'est dans celle que j'ai cité que tout ce joue
par exemple dans start_lvl c'est la que je vais intégré pour bootstrap ma classe "dropdown-menu" (E) (l'ul qui sera un sous menu)
de même dans mon start_el si le <LI> a des sous menu au niveau de bootstrap on doit lui donner la classe dropdown (B) , c'est ce que je fait via cette ligne
$class_names= ($args->has_children) ? ' class="' . esc_attr( $class_names ) . ' dropdown "' : ' class="' . esc_attr( $class_names ) . '"';
bref en suivant le code tu comprendras que c'est à l'intérieur aussi que je rajoute les carets (D) (au niveau bootstrap c'est la classe des flèches pour les sous menus) dans le cas ou il y a des enfants (et donc un sous menu) et par la même occasion que je m'occupe de la particularité (C)

if ( $args->has_children ) {
   $attributes .= ' class="dropdown-toggle" data-toggle="dropdown"';
   $caret=' <b class="caret"> </b>';
}
else {
   $caret='';
}
...
$item_output .= $caret.'</a>';

voila j'espère que ca t'aidera toi ou quiconque désire intégrer bootstrap à wordpress (Wordpress a plusieurs thèmes bootstrap mais ce qui m'a à l'époque obligé a faire cela c'est qu'ils se basaient tous sur jQuery et donc ca fait moche vu que si ta page est lourd au chargement, tu vois ton menu avant modification qui est pas très beau et des que le DOM est chargé pouf! d'un coup se changer en un joli menu bootstrap)
Le mieux est toujours de faire ton propre thème au moins tu as un contrôle total et an cas de soucis tu sais exactement ou aller pour corriger
sinon je me permet d'ajouter que le problème du menu bootstrap (navbar) est qu'il n'a que deux niveaux! sous cakephp j'ai pu avec un peu de css (et faut que je vérifie s'il n'y a pas autres choses) monter le niveau pour avoir des sous sous menu si t'es intéressé t'as juste à la dire
:)

merci pour ta réponse je vais étudier sa demain à tête reposer et je reviens vers toi !

Merci beaucoup sa marche nickel j'ai pas tout compris sur le principe je n'ai encore pas assez de notion en php mais cela marche !!!
Par contre laisse moi ton skype sa ce peut que sur ce projet j'ai besoin de quelqu'un si sa t’intéresse hésite pas ;)