首页 > 开源系统应用 > wordpress > 分享本站WordPress的定制导航菜单Walker_Nav_Menu实例
网站建设、切图、企业建站、微信开发 联系QQ:404658186 tel:18716186715
2015
08-11

分享本站WordPress的定制导航菜单Walker_Nav_Menu实例

由于本站是用WordPress做的,菜单相对奇特,主要涉及到二级菜单,并且一级菜单上有图标字体文件。

重点是一级菜单上字体图标设置在菜单的标题属性选项里,然后在代码里获取。

$description = ! empty( $item->attr_title ) ? '<i class="' . esc_attr( $item->attr_title ) . '"></i>' : '';

这段代码就是获取字体图标文件的。

剩下的就是要遍历菜单,当遇到有标题属性就添加图片,否则不添加,并生成导航菜单字符串返回到模板里。

完整代码如下:

class description_walker extends Walker_Nav_Menu {
 function start_el(&$output, $item, $depth, $args) {
 
 global $wp_query;
 $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
 
 $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 ) );
 $class_names = ' class="' . esc_attr( $class_names ) . '"';
 
 $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
 $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
 
 $output .= $indent . '<li' . $id . $value . $class_names .'>';
 
 $prepend = '<span>';
 $append = '</span>';
 $description = ! empty( $item->attr_title ) ? '<i class="' . esc_attr( $item->attr_title ) . '"></i>' : '';
 
 if($depth != 0) {
 $description = $append = $prepend = "";
 $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 ) .'"' : '';
 //print_r($args);
 $item_output = $args->before;
 $item_output .= '<a'. $attributes .'>';
 $item_output .= $args->link_before .$description. $prepend . apply_filters( 'the_title', $item->title, $item->ID ) . $append;
 $item_output .= $args->link_after;
 if($args->walker->has_children == 1){
 $item_output .= '<span class="dcjq-icon"></span>';
 }
 $item_output .= '</a>';
 
 $item_output .= $args->after;
 
 $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
 }
}

函数写好了,在模板里调用方法

<?php wp_nav_menu(
 array(
 'theme_location' => '' ,
 'menu' => '',
 'container' => '',
 'menu_class' => 'sidebar-menu',
 'menu_id' => 'nav-accordion',
 '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' => 0,
 'walker' => new description_walker()
 ));
 ?>

最后生成结果,你可以查看本站源码,如果有不太明白的,建议参考Wordpress文档的wp_nav_menuWalker_Nav_Menu部份研究一下。

最后编辑:
作者:码农一号
这个作者貌似有点懒,什么都没有留下。
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!

留下一个回复

你的email不会被公开。

*