web-dev-qa-db-fra.com

Menu déroulant Bootstrap avec wp_nav_menu

J'essaie de créer un thème Wordpress avec boostrap, mais le menu de navigation me pose problème. Je voudrais que le menu déroulant fonctionne comme un menu déroulant boostps, mais je ne sais pas comment faire cela.

Ceci est mon menu:

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

Voici ce que j'ai dans le fichier functions.php pour le menu:

add_action('after_setup_theme', 'blankslate_setup');
function blankslate_setup(){
register_nav_menus(
array( 'main-menu' => __( 'Main Menu', 'blankslate' ) )
);
}

function my_wp_nav_menu_args( $args = '' )
{
    $args['container'] = false;
    return $args;
} // function

add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );

Lorsque j'ajoute un élément de sous-menu (via Apparence - Menus), voici ce qui est actuellement généré:

<ul class="nav">
    <li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="#">Parent</a>
        <ul class="sub-menu">
                <li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"><a href="#">Child</a></li>
        </ul>
    </li>
</ul>

Pour que mon menu fonctionne avec bootstrap, il faut que le menu soit généré comme suit:

<ul class="nav">
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Parent <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">Child</a></li>
        </ul>
    </li>
</ul>

J'ai donc besoin de:

  • Pour ajouter la classe "menu déroulant", si un élément de menu a des éléments enfants.
  • Pour ajouter class = "dropdown-toggle" data-toggle = "dropdown" au .dropdown un élément
  • Pour ajouter <b class="caret"></b> après le nom du menu déroulant (à l'intérieur d'un élément .dropdown)
  • Pour ajouter class="dropdown-menu" à <ul class="sub-menu">

J'espère que quelqu'un peut aider!

menusdropdowntwitter-bootstrap
3
Cody

Vous devrez écrire un lecteur personnalisé prolongeant Walker_Nav_Menu, plus ou moins comme suit:

class My_Custom_Nav_Walker extends Walker_Nav_Menu {

   function start_lvl(&$output, $depth = 0, $args = array()) {
      $output .= "\n<ul class=\"dropdown-menu\">\n";
   }

   function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
       $item_html = '';
       parent::start_el($item_html, $item, $depth, $args);

       if ( $item->is_dropdown && $depth === 0 ) {
           $item_html = str_replace( '<a', '<a class="dropdown-toggle" data-toggle="dropdown"', $item_html );
           $item_html = str_replace( '</a>', ' <b class="caret"></b></a>', $item_html );
       }

       $output .= $item_html;
    }

    function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) {
        if ( $element->current )
        $element->classes[] = 'active';

        $element->is_dropdown = !empty( $children_elements[$element->ID] );

        if ( $element->is_dropdown ) {
            if ( $depth === 0 ) {
                $element->classes[] = 'dropdown';
            } elseif ( $depth === 1 ) {
                // Extra level of dropdown menu, 
                // as seen in http://Twitter.github.com/bootstrap/components.html#dropdowns
                $element->classes[] = 'dropdown-submenu';
            }
        }

    parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
    }
}

Pas sûr de ce dont vous avez besoin avec les points 3 et 4, cependant.

5
Sunyatasattva