Update: 截至年月日WordPress 3.7 (2013年10月),添加了CSS类以指示主题菜单中的子菜单项和页面-无需使用自定义walker,因为它在WordPress core中得到了处理。
CSS类被命名为menu-item-has-children
和page_item_has_children
.
要想为匆忙中的任何人提供完整的解决方案(归功于Jan Fabry之前的回答),请参阅下面的完整实现。
在主题模板中输出导航:
wp_nav_menu( array(
\'theme_location\' => \'navigation-primary\',
\'container\' => false,
\'container_class\' => \'\',
\'container_id\' => \'\',
\'menu_class\' => \'\',
\'menu_id\' => \'\',
\'walker\' => new Selective_Walker(),
\'depth\' => 2
)
);
然后,在主题中包括以下内容
functions.php
:
class Selective_Walker extends Walker_Nav_Menu {
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_el( &$output, $item, $depth, $args ) {
if ( $args->has_children ) {
$item->classes[] = \'has_children\';
}
parent::start_el(&$output, $item, $depth, $args);
}
}
生成的HTML输出类似于以下内容:
<ul>
<li><a href="#">Home</a></li>
<li class="has_children"><a href="#">About</a>
<ul class="sub-menu">
<li><a href="#">Our Mission</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
<li class="has_children"><a href="#">Products</a>
<ul class="sub-menu">
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
有关使用WordPress的walker类的更多信息,请参阅
Understanding the Walker Class.
享受