WordPress导航菜单添加iconfont

chen · 2015.3.31

wordpress-icon0331

这个是我们射击师大人给的设计稿

wordpress默认的菜单功能也可以通过添加CSS类添加背景图片实现。但是因为网站是响应式的,所以选用iconfont来实现。

代码结构:

<ul class="clearfix">
 <li class="current-menu-item"><a href=""><span class="iconfont icon-diannaoduan"></span><h3>PC</h3></a></li>
 <li class=""><a href=""><span class="iconfont icon-anzhuo"></span><h3>ANDROID</h3></a></li>
 <li class=""><a href=""><span class="iconfont icon-pingguo"></span><h3>IOS</h3></a></li>
 <li><a href=""><span class="iconfont icon-meitibaodao"></span><h3>媒体</h3></a></li>
 <li><a href=""><span class="iconfont icon-gongzhong"></span><h3>平台</h3></a></li>
 <li><a href=""><span class="iconfont icon-tv"></span><h3>TV</h3></a></li>
</ul>

要实现这一效果,就需要借助 wp_nav_menu 函数的 walker 对象了。在functions.php中添加以下代码:

/** 导航菜单 Walker 对象 icon 字体优化
 */
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 = '';
 $classes = empty( $item->classes ) ? array() : (array) $item->classes;
 $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
 $class_names = ' class="'. esc_attr( $class_names ) . '"';
 $output.= $indent . '<li' . $class_names .'>';
 $icon = ! empty( $item->attr_title ) ? esc_attr( $item->attr_title ) : '';
 $attributes = ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : ''; //链接目标
 $attributes.= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : ''; //链接关系网 也就是rel属性
 $attributes.= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; //链接
 $prepend = '<h3>';
 $append = '</h3>';
 $item_output = $args->before;
 $item_output.= '<a'. $attributes .'><span class="iconfont '. $icon .'"></span>';
 $item_output.= $args->link_before. $prepend . apply_filters( 'the_title', $item->title, $item->ID ) . $append;
 $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' => 'works-menu',
 'walker' => new description_walker(),
 'container' => false,
 'menu_class' => 'clearfix',
 ));
 ?>

参考资料:

Iconfont

wordpress官方函数参考:wp_nav_menu