我正在基于 Roots Theme 构建一个自定义主题,现在使用 Twitter Bootstrap 作为框架。
它使用自定义“walker”进行导航,因此我不能仅通过 Header.php 中的 PHP 对其进行过滤。
<nav>
<?php
wp_nav_menu(array('theme_location' => 'primary_navigation',
'walker' => new Roots_Nav_Walker()
));
?>
</nav>
我知道如何添加来自我的对 Codex 的研究的参数,但这并没有告诉我如何在“当前菜单项”类上添加过滤器。我想这样做的原因是我可以轻松地在 Bootstrap 默认提供的不同导航样式之间切换。
我也不想仅仅覆盖 CSS 以使“活动”规则应用于“当前菜单项”。
理想情况下,我想在创建“walker”的roots-cleanup.php 中更改它。
相关代码:
class Roots_Nav_Walker extends Walker_Nav_Menu {
function check_current($val) {
return preg_match('/(current-)/', $val);
}
function start_el(&$output, $item, $depth, $args) {
global $wp_query;
$indent = ($depth) ? str_repeat("\t", $depth) : '';
$slug = sanitize_title($item->title);
$class_names = $value = '';
$classes = empty($item->classes) ? array() : (array) $item->classes;
$classes = array_filter($classes, array(&$this, 'check_current'));
$class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item));
$class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : '';
$id = apply_filters('nav_menu_item_id', 'menu-' . $slug, $item, $args);
$id = strlen($id) ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li' . $id . $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 ) .'"' : '';
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
}
}
class Roots_Navbar_Nav_Walker extends Walker_Nav_Menu {
function check_current($val) {
return preg_match('/(current-)|active|dropdown/', $val);
}
function start_lvl(&$output, $depth) {
$output .= "\n<ul class=\"dropdown-menu\">\n";
}
function start_el(&$output, $item, $depth, $args) {
global $wp_query;
$indent = ($depth) ? str_repeat("\t", $depth) : '';
$slug = sanitize_title($item->title);
$li_attributes = '';
$class_names = $value = '';
$classes = empty($item->classes) ? array() : (array) $item->classes;
if ($args->has_children) {
$classes[] = 'dropdown';
$li_attributes .= 'data-dropdown="dropdown"';
}
$classes[] = ($item->current) ? 'active' : '';
$classes = array_filter($classes, array(&$this, 'check_current'));
$class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item));
$class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : '';
$id = apply_filters('nav_menu_item_id', 'menu-' . $slug, $item, $args);
$id = strlen($id) ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li' . $id . $class_names . $li_attributes . '>';
$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 ) .'"' : '';
$attributes .= ($args->has_children) ? ' class="dropdown-toggle" data-toggle="dropdown"' : '';
$item_output = $args->before;
$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) ? ' <b class="caret"></b>' : '';
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
}
function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) {
if (!$element) { return; }
$id_field = $this->db_fields['id'];
// display this element
if (is_array($args[0])) {
$args[0]['has_children'] = !empty($children_elements[$element->$id_field]);
} elseif (is_object($args[0])) {
$args[0]->has_children = !empty($children_elements[$element->$id_field]);
}
$cb_args = array_merge(array(&$output, $element, $depth), $args);
call_user_func_array(array(&$this, 'start_el'), $cb_args);
$id = $element->$id_field;
// descend only when the depth is right and there are childrens for this element
if (($max_depth == 0 || $max_depth > $depth+1) && isset($children_elements[$id])) {
foreach ($children_elements[$id] as $child) {
if (!isset($newlevel)) {
$newlevel = true;
// start the child delimiter
$cb_args = array_merge(array(&$output, $depth), $args);
call_user_func_array(array(&$this, 'start_lvl'), $cb_args);
}
$this->display_element($child, $children_elements, $max_depth, $depth + 1, $args, $output);
}
unset($children_elements[$id]);
}
if (isset($newlevel) && $newlevel) {
// end the child delimiter
$cb_args = array_merge(array(&$output, $depth), $args);
call_user_func_array(array(&$this, 'end_lvl'), $cb_args);
}
// end this element
$cb_args = array_merge(array(&$output, $element, $depth), $args);
call_user_func_array(array(&$this, 'end_el'), $cb_args);
}
}
function roots_nav_menu_args($args = '') {
$args['container'] = false;
$args['depth'] = 2;
$args['items_wrap'] = '<ul class="nav nav-tabs">%3$s</ul>';
if (!$args['walker']) {
$args['walker'] = new Roots_Nav_Walker();
}
return $args;
}
找到了答案,也许不再相关,但是
更新root,你会发现
lib/cleanup.php
roots_wp_nav_menu()
现在就在那里
我有类似的问题,我用这种方式解决了它,我不知道它是正确还是错误..但它有效......:)
在 header.php 中
<div class="navbar">
<div class="navbar-inner">
<?php
$defaults = array(
'theme_location' => 'header-menu',
'menu' => '',
'container' => 'div',
'container_class' => 'container',
'container_id' => '',
'menu_class' => 'nav',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 2,
'walker' => ''
);
wp_nav_menu($defaults);
?>
</div></div>
并在页脚添加 jquery 函数:
<script>
$(function(){
$('.current-menu-item').addClass('active');
});
</script>