Les pilules de navigation déroulantes Bootstrap ne fonctionne pas avec wp_nav_menu ()
J'utilise des pilules de navigation Bootstrap avec des éléments déroulants comme menu WordPress, le menu sans menu déroulant a bonne apparence, mais lorsque j'ajoute un menu imbriqué, le menu ne fonctionne pas comme prévu.
HTML
<nav class="navbar navbar-default pull-right" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav nav-pills head-menu">
<li class="current"><a href="index.html">Home</a> </li>
<li><a href="authors.html">Authors</a></li>
<li><a href="catalogue.html">Catalogue</a></li>
<li><a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false"> Featured <span class="caret"></span> </a>
<ul class="dropdown-menu" role="menu">
<li><a href="featured-videos.html">Featured Videos</a></li>
<li><a href="featured-author.html">Featured Author</a></li>
</ul>
</li>
<li><a href="media.html">Media</a></li>
<li><a href="team.html">Team</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
PHP
<nav class="navbar navbar-default pull-right" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<?php wp_nav_menu( array( 'theme_location' => 'main-menu', 'items_wrap' => '<ul class="nav nav-pills head-menu">%3$s</ul>') ); ?>
</div>
</div>
</nav>
Tout est bon quand il n'y a pas d'éléments déroulants, comment résoudre ce problème?
J'ai rencontré un problème similaire lorsque j'ai créé un menu de navigation d'amorçage et que les liens déroulants apparaissaient tous en même temps. J'ai utilisé les étapes suivantes pour corriger le problème:
téléchargez navwalker depuis le lien repo de github: https://github.com/wp-bootstrap/wp-bootstrap-navwalker
placez ce fichier dans le dossier racine du thème et dans le fichier functions.php, utilisez
require_once get_template_directory() . '/wp-bootstrap-navwalker.php';enfin, vous devrez ajouter les paramètres suivants:
$defaults = array( 'container' => false, 'theme_location' => 'primary-menu', 'menu_class' => 'nav navbar-nav navbar-right', 'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback', 'walker' => new WP_Bootstrap_Navwalker(), ); wp_nav_menu($defaults);
en particulier les deux derniers paramètres de votre fonction wp_nav_menu().
J'espère que ça aide
<?php
/**
* Bootstrap NavWalker
* Class Name: Bootstrap_NavWalker
* Author: Bishal Napit
* Author URI: https://napitwptech.com/
* GitHub URI: https://github.com/mebishalnapit/bootstrap-navwalker/
* Description: A custom WordPress nav walker class to implement the Bootstrap 4 navigation style in a custom WordPress
* Bootstrap based theme using the WordPress built in menu manager.
* License: GNU General Public License v3 or later
* License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/
class Bootstrap_NavWalker extends Walker_Nav_Menu {
// Create the $current_menu_id_bootstrap variable for generating the current menu id
protected $current_menu_id_bootstrap;
/**
* Starts the list before the elements are added.
*
* @since 3.0.0
* @see Walker::start_lvl()
*
* @param string $output Passed by reference. Used to append additional content.
* @param int $depth Depth of menu item. Used for padding.
* @param stdClass $args An object of wp_nav_menu() arguments.
*/
public function start_lvl( &$output, $depth = 0, $args = array() ) {
// Use the current menu id generated via start_el()
$current_menu_id = $this->current_menu_id_bootstrap;
// Assign the dynamic id for use inside the dropdown menu, ie, sub-menu for Bootstrap
$id = 'aria-labelledby="navbar-dropdown-menu-link-' . $current_menu_id->ID . '"';
if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
$t = '';
$n = '';
} else {
$t = "\t";
$n = "\n";
}
$indent = str_repeat( $t, $depth );
/**
* Add the classes for the dropdown menu in WordPress
*
* 1. For WordPress default: '.sub-menu'
* 2. For Bootstrap Sub-Menu: '.dropdown-menu'
*/
$classes = array( 'sub-menu', 'dropdown-menu' );
/**
* Filters the CSS class(es) applied to a menu list element.
*
* @since 4.8.0
*
* @param array $classes The CSS classes that are applied to the menu `<ul>` element.
* @param stdClass $args An object of `wp_nav_menu()` arguments.
* @param int $depth Depth of menu item. Used for padding.
*/
$class_names = join( ' ', apply_filters( 'nav_menu_submenu_css_class', $classes, $args, $depth ) );
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
/**
* Change <ul> to <div> for Bootstrap Navigation
* Add the current menu id for the sub-menu toggle feature for Bootstrap
*/
$output .= "{$n}{$indent}<div $class_names $id>{$n}";
}
/**
* Ends the list of after the elements are added.
*
* @since 3.0.0
* @see Walker::end_lvl()
*
* @param string $output Passed by reference. Used to append additional content.
* @param int $depth Depth of menu item. Used for padding.
* @param stdClass $args An object of wp_nav_menu() arguments.
*/
public function end_lvl( &$output, $depth = 0, $args = array() ) {
if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
$t = '';
$n = '';
} else {
$t = "\t";
$n = "\n";
}
$indent = str_repeat( $t, $depth );
/**
* Change </ul> to </div> for Bootstrap Navigation
*/
$output .= "$indent</div>{$n}";
}
/**
* Starts the element output.
*
* @since 3.0.0
* @since 4.4.0 The {@see 'nav_menu_item_args'} filter was added.
* @see Walker::start_el()
*
* @param string $output Passed by reference. Used to append additional content.
* @param WP_Post $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
* @param stdClass $args An object of wp_nav_menu() arguments.
* @param int $id Current item ID.
*/
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
// Find the current menu item id to be used for start_lvl()
$this->current_menu_id_bootstrap = $item;
if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
$t = '';
$n = '';
} else {
$t = "\t";
$n = "\n";
}
$indent = ( $depth ) ? str_repeat( $t, $depth ) : '';
$classes = empty( $item->classes ) ? array() : ( array ) $item->classes;
$classes[] = 'menu-item-' . $item->ID;
/**
* Add class '.nav-item' inside <li> tag for Bootstrap
*/
$classes[] = 'nav-item';
/**
* Add class '.active' inside <li> tag for Bootstrap active menu as well as for the parent menu, which have the active sub-menu
*/
if ( in_array( 'current-menu-item', $classes ) || in_array( 'current-menu-parent', $classes ) ) {
$classes[] = 'active';
}
/**
* Add class '.dropdown' inside <li> tag for Bootstrap dropdown menu, ie, <li> having sub-menu
*/
if ( in_array( 'menu-item-has-children', $classes ) ) {
$classes[] = 'dropdown';
}
/**
* Filters the arguments for a single nav menu item.
*
* @since 4.4.0
*
* @param stdClass $args An object of wp_nav_menu() arguments.
* @param WP_Post $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
*/
$args = apply_filters( 'nav_menu_item_args', $args, $item, $depth );
/**
* Filters the CSS class(es) applied to a menu item's list item element.
*
* @since 3.0.0
* @since 4.1.0 The `$depth` parameter was added.
*
* @param array $classes The CSS classes that are applied to the menu item's `<li>` element.
* @param WP_Post $item The current menu item.
* @param stdClass $args An object of wp_nav_menu() arguments.
* @param int $depth Depth of menu item. Used for padding.
*/
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
/**
* Filters the ID applied to a menu item's list item element.
*
* @since 3.0.1
* @since 4.1.0 The `$depth` parameter was added.
*
* @param string $menu_id The ID that is applied to the menu item's `<li>` element.
* @param WP_Post $item The current menu item.
* @param stdClass $args An object of wp_nav_menu() arguments.
* @param int $depth Depth of menu item. Used for padding.
*/
$id = apply_filters( 'nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args, $depth );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
/**
* <li> is required for parent menu only in Bootstrap
*/
if ( $depth === 0 ) {
$output .= $indent . '<li' . $id . $class_names . '>';
}
$atts = array();
$atts['title'] = ! empty( $item->attr_title ) ? $item->attr_title : '';
$atts['target'] = ! empty( $item->target ) ? $item->target : '';
$atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : '';
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
/**
* Add '.nav-link' class for <a> in parent menu for Bootstrap
*/
if ( $depth === 0 ) {
$atts['class'] = 'nav-link';
}
/**
* Add the attributes for <a> in parent menu
*
* 1. Add '.dropdown-toggle' class for <a> in parent menu if it has sub-menu as required for Bootstrap
* 2. Add '.dropdown' as 'data-toggle' attribute in <a> in parent menu if it has sub-menu as required for Bootstrap
* 3. Add the current menu id attribute to indicate the exact menu to toggle for set in sub-menu div
* 4. Add the attribute of 'true' for 'aria-haspopup' in parent menu to indicate it has sub-menus
* 5. Add the attribute of 'false' for 'aria-expanded' in parent menu to indicate the sub-menus is hidden by default
* 6. Add the '#' link in the <a> tag in the parent menu if it has sub-menu as required for Bootstrap
*/
if ( $depth === 0 && in_array( 'menu-item-has-children', $classes ) ) {
$atts['class'] .= ' dropdown-toggle';
$atts['data-toggle'] = 'dropdown';
$atts['id'] = 'navbar-dropdown-menu-link-' . $item->ID;
$atts['aria-haspopup'] = "true";
$atts['aria-expanded'] = "false";
$atts['href'] = '#';
}
/**
* Add the attributes for <a> in sub-menu
* 1. Add '.dropdown-item' class for <a> inside sub-menu for Bootstrap
* 2. Add the current menu id attribute if you want to style the menu differently
*/
if ( $depth > 0 ) {
$atts['class'] = 'dropdown-item';
$atts['id'] = 'menu-item-' . $item->ID;
}
/**
* Add '.active' class inside <a> in sub-menu for Bootstrap
*/
if ( in_array( 'current-menu-item', $item->classes ) ) {
$atts['class'] .= ' active';
}
/**
* Add '.disabled' class for <a> in menu for Bootstrap disabled class
*/
if ( in_array( 'disabled', $item->classes ) ) {
$atts['class'] .= ' disabled';
}
/**
* Filters the HTML attributes applied to a menu item's anchor element.
*
* @since 3.6.0
* @since 4.1.0 The `$depth` parameter was added.
*
* @param array $atts {
* The HTML attributes applied to the menu item's `<a>` element, empty strings are ignored.
*
* @type string $title Title attribute.
* @type string $target Target attribute.
* @type string $rel The rel attribute.
* @type string $href The href attribute.
* }
*
* @param WP_Post $item The current menu item.
* @param stdClass $args An object of wp_nav_menu() arguments.
* @param int $depth Depth of menu item. Used for padding.
*/
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );
$attributes = '';
foreach ( $atts as $attr => $value ) {
if ( ! empty( $value ) ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
/**
* If '.disabled' class is added to the menu, add the url of '#' in it
*/
if ( in_array( 'disabled', $item->classes ) ) {
$value = ( 'href' === $attr ) ? esc_url( '#' ) : esc_attr( $value );
}
$attributes .= ' ' . $attr . '="' . $value . '"';
}
}
/** This filter is documented in wp-includes/post-template.php */
$title = apply_filters( 'the_title', $item->title, $item->ID );
/**
* Filters a menu item's title.
*
* @since 4.4.0
*
* @param string $title The menu item's title.
* @param WP_Post $item The current menu item.
* @param stdClass $args An object of wp_nav_menu() arguments.
* @param int $depth Depth of menu item. Used for padding.
*/
$title = apply_filters( 'nav_menu_item_title', $title, $item, $args, $depth );
$item_output = $args->before;
$item_output .= '<a' . $attributes . '>';
$item_output .= $args->link_before . $title . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
/**
* Filters a menu item's starting output.
* The menu item's starting output only includes `$args->before`, the opening `<a>`,
* the menu item's title, the closing `</a>`, and `$args->after`. Currently, there is
* no filter for modifying the opening and closing `<li>` for a menu item.
*
* @since 3.0.0
*
* @param string $item_output The menu item's starting HTML output.
* @param WP_Post $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
* @param stdClass $args An object of wp_nav_menu() arguments.
*/
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
/**
* Ends the element output, if needed.
*
* @since 3.0.0
* @see Walker::end_el()
*
* @param string $output Passed by reference. Used to append additional content.
* @param WP_Post $item Page data object. Not used.
* @param int $depth Depth of page. Not Used.
* @param stdClass $args An object of wp_nav_menu() arguments.
*/
public function end_el( &$output, $item, $depth = 0, $args = array() ) {
if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
$t = '';
$n = '';
} else {
$t = "\t";
$n = "\n";
}
/**
* <li> is required for parent menu only in Bootstrap
*/
if ( $depth === 0 ) {
$output .= "</li>{$n}";
}
}
/**
* Fallback menu
* If you assign the fallback menu for your custom menu setup via wp_nav_menu function, then, this function will be
* rendered if no menu is assigned to that menu location. You need to assign it via 'fallback_cb' array. Also, this
* will be only rendered to the logged in users pointing them to the menu manager url.
*
* @param $args Arrays passed from the wp_nav_menu function
*/
public static function fallback( $args ) {
if ( current_user_can( 'edit_theme_options' ) ) {
$container = $args['container'];
$container_id = $args['container_id'];
$container_class = $args['container_class'];
$menu_class = $args['menu_class'];
$menu_id = $args['menu_id'];
// If there is container render it
if ( $container ) {
echo '<' . esc_attr( $container );
// If container id is set render it
if ( $container_id ) {
echo ' id="' . esc_attr( $container_id ) . '"';
}
// If container class is set render it
if ( $container_class ) {
echo ' class="' . esc_attr( $container_class ) . '"';
}
echo '>';
}
// Default wrapper for menu is <ul>
echo '<ul';
// If menu id has been set render it
if ( $menu_id ) {
echo ' id="' . esc_attr( $menu_id ) . '"';
}
// If menu class has been set render it
if ( $menu_class ) {
echo ' class="' . esc_attr( $menu_class ) . '"';
}
// Close <ul> div wrapper for menu
echo '>';
// Display the link to Add New Menu
echo '<li class="nav-item active"><a class="nav-link" href="' . esc_url( admin_url( 'nav-menus.php' ) ) . '">';
esc_html_e( 'Add a menu', 'theme-textdomain' );
echo '</a></li>';
// Close the main <ul>
echo '</ul>';
// Close the main container div
if ( $container ) {
echo '</' . esc_attr( $container ) . '>';
}
}
}
}
<?php
/**
* Class Name: wp_bootstrap_navwalker
* GitHub URI: https://github.com/twittem/wp-bootstrap-navwalker
* Description: A custom WordPress nav walker class to implement the Bootstrap 3 navigation style in a custom theme using the WordPress built in menu manager.
* Version: 2.0.4
* Author: Edward McIntyre - @twittem
* License: GPL-2.0+
* License URI: http://www.gnu.org/licenses/gpl-2.0.txt
*/
class wp_bootstrap_navwalker extends Walker_Nav_Menu {
/**
* @see Walker::start_lvl()
* @since 3.0.0
*
* @param string $output Passed by reference. Used to append additional content.
* @param int $depth Depth of page. Used for padding.
*/
public function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat( "\t", $depth );
$output .= "\n$indent<ul role=\"menu\" class=\" category-list\">\n";
}
/**
* @see Walker::start_el()
* @since 3.0.0
*
* @param string $output Passed by reference. Used to append additional content.
* @param object $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
* @param int $current_page Menu item ID.
* @param object $args
*/
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
/**
* Dividers, Headers or Disabled
* =============================
* Determine whether the item is a Divider, Header, Disabled or regular
* menu item. To prevent errors we use the strcasecmp() function to so a
* comparison that is not case sensitive. The strcasecmp() function returns
* a 0 if the strings are equal.
*/
if ( strcasecmp( $item->attr_title, 'divider' ) == 0 && $depth === 1 ) {
$output .= $indent . '<li role="presentation" class="divider">';
} else if ( strcasecmp( $item->title, 'divider') == 0 && $depth === 1 ) {
$output .= $indent . '<li role="presentation" class="divider">';
} else if ( strcasecmp( $item->attr_title, 'dropdown-header') == 0 && $depth === 1 ) {
$output .= $indent . '<li role="presentation" class="dropdown-header">' . esc_attr( $item->title );
} else if ( strcasecmp($item->attr_title, 'disabled' ) == 0 ) {
$output .= $indent . '<li role="presentation" class="disabled"><a href="#">' . esc_attr( $item->title ) . '</a>';
} else {
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
if ( $args->has_children )
$class_names .= ' cd-library';
if ( in_array( 'current-menu-item', $classes ) )
$class_names .= ' active';
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li' . $id . $value . $class_names .'>';
$atts = array();
$atts['title'] = ! empty( $item->title ) ? $item->title : '';
$atts['target'] = ! empty( $item->target ) ? $item->target : '';
$atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : '';
// If item has_children add atts to a.
if ( $args->has_children && $depth === 0 ) {
$atts['href'] = '#';
$atts['data-toggle'] = 'dropdown';
$atts['class'] = 'dropdown-toggle';
$atts['aria-haspopup'] = 'true';
} else {
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
}
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );
$attributes = '';
foreach ( $atts as $attr => $value ) {
if ( ! empty( $value ) ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
}
}
$item_output = $args->before;
/*
* Glyphicons
* ===========
* Since the the menu item is NOT a Divider or Header we check the see
* if there is a value in the attr_title property. If the attr_title
* property is NOT null we apply it as the class name for the glyphicon.
*/
if ( ! empty( $item->attr_title ) )
$item_output .= '<a'. $attributes .'><span class="glyphicon ' . esc_attr( $item->attr_title ) . '"></span> ';
else
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= ( $args->has_children && 0 === $depth ) ? ' <span class="caret"></span></a>' : '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
/**
* Traverse elements to create list from elements.
*
* Display one element if the element doesn't have any children otherwise,
* display the element and its children. Will only traverse up to the max
* depth and no ignore elements under that depth.
*
* This method shouldn't be called directly, use the walk() method instead.
*
* @see Walker::start_el()
* @since 2.5.0
*
* @param object $element Data object
* @param array $children_elements List of elements to continue traversing.
* @param int $max_depth Max depth to traverse.
* @param int $depth Depth of current element.
* @param array $args
* @param string $output Passed by reference. Used to append additional content.
* @return null Null on failure with no changes to parameters.
*/
public function display_element( $element, &$children_elements, $max_depth, $depth, $args, &$output ) {
if ( ! $element )
return;
$id_field = $this->db_fields['id'];
// Display this element.
if ( is_object( $args[0] ) )
$args[0]->has_children = ! empty( $children_elements[ $element->$id_field ] );
parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
}
/**
* Menu Fallback
* =============
* If this function is assigned to the wp_nav_menu's fallback_cb variable
* and a manu has not been assigned to the theme location in the WordPress
* menu manager the function with display nothing to a non-logged in user,
* and will add a link to the WordPress menu manager if logged in as an admin.
*
* @param array $args passed from the wp_nav_menu function.
*
*/
public static function fallback( $args ) {
if ( current_user_can( 'manage_options' ) ) {
extract( $args );
$fb_output = null;
if ( $container ) {
$fb_output = '<' . $container;
if ( $container_id )
$fb_output .= ' id="' . $container_id . '"';
if ( $container_class )
$fb_output .= ' class="' . $container_class . '"';
$fb_output .= '>';
}
$fb_output .= '<ul';
if ( $menu_id )
$fb_output .= ' id="' . $menu_id . '"';
if ( $menu_class )
$fb_output .= ' class="' . $menu_class . '"';
$fb_output .= '>';
$fb_output .= '<li><a href="' . admin_url( 'nav-menus.php' ) . '">Add a menu</a></li>';
$fb_output .= '</ul>';
if ( $container )
$fb_output .= '</' . $container . '>';
echo $fb_output;
}
}
}
//Use theme
<?php wp_nav_menu( array(
'menu' => 'main-nav',
'theme_location' => 'main-nav',
'depth' => 2,
'container' => false,
'menu_class' => 'main-navigation',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
); ?>