如何解决尝试为WordPress导航创建自定义Walker类
我是PHP的新手,正在努力使自己遍及Walker类。我需要使用以下标记结构创建一个导航。
<div class="learn">
<div class="learn-header">
<span><b>Learn A</b> (16-19)</span>
<i class="fa fa-plus-circle"></i>
</div>
<div class="learn-content">
<a href="#">A</a>
<a href="#">B</a>
<a href="#">C</a>
<a href="#">D</a>
<a href="#">E</a>
</div>
</div>
<div class="learn">
<div class="learn-header">
<span><b>Learn B</b> (20-25)</span>
<i class="fa fa-plus-circle"></i>
</div>
<div class="learn-content">
<a href="#">A</a>
<a href="#">B</a>
<a href="#">C</a>
<a href="#">D</a>
<a href="#">E</a>
</div>
</div>
经过大量研究和尝试,我做了以下工作: 在我的导航模板中,我有以下内容
<div id="learn">
<div id="learn--wrapper">
<?PHP
wp_nav_menu(
array(
'theme_location' => 'Learn','container' => false,'items_wrap' => '%3$s','walker' => new learn_nav_Walker(),)
);
?>
</div>
</div>
class learn_nav_Walker extends Walker {
var $tree_type = array( 'post_type','taxonomy','custom' );
var $db_fields = array( 'parent' => 'menu_item_parent','id' => 'db_id' );
function start_lvl(&$output,$depth) {
$indent = str_repeat("\t",$depth);
$output .= "\n$indent<div class=\"learn-content\">\n";
}
function end_lvl(&$output,$depth);
$output .= "$indent</div>\n";
}
function start_el(&$output,$item,$depth,$args) {
global $wp_query;
if ( $args->walker->has_children && 0 === $depth ) {
$output .= $indent . '<div class="learn">';
}
$indent = ( $depth ) ? str_repeat( "\t",$depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes = in_array( 'current-menu-item',$classes ) ? array( 'current-menu-item' ) : array();
$class_names = join( ' ',apply_filters( 'nav_menu_css_class',array_filter( $classes ),$args ) );
$class_names = strlen( trim( $class_names ) ) > 0 ? ' class="' . esc_attr( $class_names ) . '"' : '';
$id = apply_filters( 'nav_menu_item_id','',$args );
$id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
if ( $args->walker->has_children && 0 === $depth ) {
$output .= $indent . '<div class="learn-header"' . $id . $value . $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;
if ( $args->walker->has_children && 0 === $depth ) {
$item_output .= '<span>';
} else {
$item_output .= '<a class="nav-link" ' . $attributes . '>';
}
$item_output .= $args->link_before . apply_filters( 'the_title',$item->title,$item->ID ) . $args->link_after;
if ( $args->walker->has_children && 0 === $depth ) {
$item_output .= '</span>';
$item_output .= '<i class="fa fa-plus-circle"></i>';
} else {
$item_output .= '</a>';
}
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el',$item_output,$args );
}
function end_el(&$output,$args) {
$output .= "</div>\n";
}
}
但是,我得到的输出未正确嵌套,因此我不知道如何解决该问题。 问题是顶级菜单项位于带有类学习标题的div中。该div应该只包装顶级菜单项。目前,它还将子菜单项包装在learn-content div中。
<div id="learn">
<div id="learn--wrapper">
<div class="learn">
<div class="learn-header" class="current-menu-item">
<span>Learn A</span><i class="fa fa-plus-circle"></i>
<div class="learn-content">
<a class="nav-link" href="#"">A</a>
</div>
</div>
</div>
<div class="learn">
<div class="learn-header">
<span>Learn B</span><i class="fa fa-plus-circle"></i>
<div class="learn-content">
<a class="nav-link" href="#">A</a>
</div>
</div>
</div>
</div>
</div>
任何帮助都将不胜感激,因为我已经三天时间试图解决此问题!反正我没剩多少头发了!
非常感谢:)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。