我想更改为带有引导程序” dropdown-menu”的wordpress自动生成的默认”子菜单”类, 以及具有引导程序” dropdown”的” has-children”自动生成的默认单词。我知道可以使用nav_Walker来实现。但我不知道该怎么做?
#1
你有一个很好的kickstarter主题的例子:http://roots.io/ https://github.com/roots/roots/blob/master/lib/nav.php
<?php
/**
* Cleaner walker for wp_nav_menu()
*
* Walker_Nav_Menu (WordPress default) example output:
* <li id="menu-item-8" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8"><a href="/">Home</a></li>
* <li id="menu-item-9" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9"><a href="/sample-page/">Sample Page</a></l
*
* Roots_Nav_Walker example output:
* <li class="menu-home"><a href="/">Home</a></li>
* <li class="menu-sample-page"><a href="/sample-page/">Sample Page</a></li>
*/
class Roots_Nav_Walker extends Walker_Nav_Menu {
function check_current($classes) {
return preg_match('/(current[-_])|active|dropdown/', $classes);
}
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" data-target="#"', $item_html);
$item_html = str_replace('</a>', ' <b class="caret"></b></a>', $item_html);
}
elseif (stristr($item_html, 'li class="divider')) {
$item_html = preg_replace('/<a[^>]*>.*?<\/a>/iU', '', $item_html);
}
elseif (stristr($item_html, 'li class="dropdown-header')) {
$item_html = preg_replace('/<a[^>]*>(.*)<\/a>/iU', '$1', $item_html);
}
$item_html = apply_filters('roots/wp_nav_menu_item', $item_html);
$output .= $item_html;
}
function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) {
$element->is_dropdown = ((!empty($children_elements[$element->ID]) && (($depth + 1) < $max_depth || ($max_depth === 0))));
if ($element->is_dropdown) {
$element->classes[] = 'dropdown';
}
parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
}
}
/**
* Remove the id="" on nav menu items
* Return 'menu-slug' for nav menu classes
*/
function roots_nav_menu_css_class($classes, $item) {
$slug = sanitize_title($item->title);
$classes = preg_replace('/(current(-menu-|[-_]page[-_])(item|parent|ancestor))/', 'active', $classes);
$classes = preg_replace('/^((menu|page)[-_\w+]+)+/', '', $classes);
$classes[] = 'menu-' . $slug;
$classes = array_unique($classes);
return array_filter($classes, 'is_element_empty');
}
add_filter('nav_menu_css_class', 'roots_nav_menu_css_class', 10, 2);
add_filter('nav_menu_item_id', '__return_null');
/**
* Clean up wp_nav_menu_args
*
* Remove the container
* Use Roots_Nav_Walker() by default
*/
function roots_nav_menu_args($args = '') {
$roots_nav_menu_args['container'] = false;
if (!$args['items_wrap']) {
$roots_nav_menu_args['items_wrap'] = '<ul class="%2$s">%3$s</ul>';
}
if (!$args['depth']) {
$roots_nav_menu_args['depth'] = 2;
}
if (!$args['walker']) {
$roots_nav_menu_args['walker'] = new Roots_Nav_Walker();
}
return array_merge($args, $roots_nav_menu_args);
}
add_filter('wp_nav_menu_args', 'roots_nav_menu_args');
#2
经过大量搜索和实验, 终于找到了它。我用twitter bootstrap nav walker解决了我的问题。
wp-bootstrap-navwalker
评论前必须登录!
注册