主页 » 建站笔记 » 正文

给wordpress导航菜单添加icon字体图标

 bandian2015/12/07 21:02 15,532 ℃ 2条点评
小号字体中号字体大号字体
第一步:将以下代码添加到functions.php中第二步:修改导航菜单的输出第三步:定义相关的CSS样式调用字体第四步:后台设置菜单项的CSS类 PHP代...

PHP代码来自草野时代,原文地址:http://icaoye.com/?p=4219

首先看一下网站使用icon字体的好处

跟图片相比,icon字体图标是矢量的字体,所以我们可以对它使用所有能对普通字体生效而图片做不到的css样式,比如修改成任意颜色、无损放大(定义font-size)等等,具体请看下面列出的这些:

  1. 自由的变化大小
  2. 自由的修改颜色
  3. 添加阴影效果
  4. 低版本IE(6+)都能支持
  5. 支持透明度和旋转等等
  6. 可以添加text-stroke和background-clip:text等属性

也有文章说,有图标的导航菜单更能吸引用户去点击,顶部导航比底部导航更能诱导用户去点击,尤其是使用 iPhone 或者 iPad 进行网上冲浪的用户,因为这种标志可以说会比文字更具说服力,也更多人理解。

icon字体图标

如果是别的地方要实现这样的效果很简单,无非就是CSS引入字体文件,然后定义每个菜单的CSS类,再写几段对应的样式就OK了。导航菜单这里呢,其实也简单(废话啊),写好CSS之后在Wordpress后台菜单设置这里添加自定义CSS类就可以了。只不过默认情况下这个选项是没有显示的,显示方法是:点击右上角【显示选项】,勾选【CSS类】。不过这样的话感觉没有本文介绍的自定义Walker类的方法方便就是了。

第一步:将以下代码添加到functions.php中

/** 导航菜单 Walker 对象 icon 字体优化
 *  http://icaoye.com/initial-nav-add-icon-font.html
 */
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        ) .'"' : '';    //链接
                $description  = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';   //图像描述
                if($depth != 0) $description = "";    //只在一级菜单输出图像描述,如果全部输出请注释本行
                $item_output = $args->before;
                $item_output.= '<a '. $attributes .'><i class="'. $icon .'"></i>';
                $item_output.= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $description;
                $item_output.= '</a>';
                $item_output.= $args->after;
                $output.= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
        }
}
上面代码中,第15行至第19行,分别对应的是后台的这几个选项:

菜单隐藏选项

第14行和21行是关键部分,这里是将后台菜单设置项中的【标题属性】的值做了替换,在前台页面中输出:

<i class="你设置的标题属性"></i>

第二步:修改导航菜单的输出

找到你的主题中导航菜单输出的部分,一般在header.php里面,可以搜索wp_nav_menu来定位,然后在wp_nav_menu里面加上一行'walker' => new description_walker(),
我的header.php中的相关代码是这样的:

if(function_exists('wp_nav_menu')) {
	wp_nav_menu( array(
		'theme_location' => 'primary',
		'menu_id' => 'menu',
		'menu_class' => 'nav-menu',
		'container' => 'false',
		'items_wrap' => '
<ul id="%1$s" class="%2$s">'.$search.'%3$s</ul>
',
		'fallback_cb' => 'nav_fallback',
		'walker' => new description_walker() )
	);
}

第三步:定义相关的CSS样式调用字体

一般都是使用Font Awesome字体,因为它的图标很多也很精致,将字体和css文件下载之后上传到自己的网站空间,然后在header.php中合适的地方引入CSS文件即可。
Font Awesome3.2.1下载

但是,我强烈建议你使用阿里妈妈的iconfont这个项目是由阿里巴巴UX部门推出的矢量图标管理网站。
这里推荐的原因是,跟Font Awesome字体相比,iconfont在使用上来说要灵活的多,并且字库量相当大,目前iconfont网站上面的图标数量一共是51794个。关键是你可以按需所取,比如你的网站只需要用到5个图标,那么你可以在网站上面只选取你需要的5个图标生成一个项目,然后网站会根据你提交的内容生成只包含这5个图标的字体文件和CSS文件,你直接拿过来用就可以了。或者,你都不用把字体下载过来,直接使用iconfont提供的CDN服务会更加省事。这跟Font Awesome字体几百KB的文件请求比起来是不是爽爆了?

第四步:后台设置菜单项的CSS类

上面提到过,后台菜单编辑项里面的【标题属性】就是我们需要设置的CSS类。如果你使用的是Font Awesome,那么去它的网站上你能查到所有图标所对应的类名。如果你使用的是iconfont图标的话在这里填入你的项目中各图标对应的类名就可以了。可以参考这篇文章:抛弃Font-Awesome—icon字体图标更好的解决方案:来自阿里妈妈的iconfont

后台编辑菜单添加CSS类

做完上面这些之后去前台就应该可以看到你添加的图标了。

上一篇:我整理了几段经典的FC游戏音乐--来看看哪一段会让你起鸡皮疙瘩?
下一篇:抛弃Font-Awesome—icon字体图标更好的解决方案:来自阿里妈妈的iconfont
版权信息
本文遵循 BY-NC-SA 共享方式,永久链接:https://www.augsky.com/?p=770
转载请注明转自 » 格部落格 » 给wordpress导航菜单添加icon字体图标

已有2条评论,欢迎点评!

  1. avatar#2猿梦博客

    标题属性应该是鼠标移入标题的title吧

    2017-12-20 pm2:01回复
  2. avatar#1jis

    右侧显示的这个隐形导航不错,体验挺好!!

    2014-12-30 am9:40回复