改进你的WordPress导航菜单-输出标题描述
发布时间:2011-12-07 11:00:27
标签:WordPress,导航,标题
在WordPress 3.0中增加了自定义菜单功能,如果你在WordPress后台(外观》菜单)创建一个菜单,你可以在主题中使用wp_nav_menu()函数来显示这些菜单。但是像图中这种带描述的导航菜单还无法简单实现,本文将教你改变WordPress默认的菜单输出结构,打造个性的导航菜单。
首先我们先看下默认的输出结构:
<ul id="menu-main">
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">博客</a></li>
</ul>
默认的结构根本不可能输出我们想要的效果,所以我们需要改变输出的结果:
<ul id="menu-main">
<li><a href="#"><strong>首页</strong><span>Home</span></a></li>
<li><a href="#"><strong>关于</strong><span>About</span></a></li>
<li><a href="#"><strong>联系</strong><span>Contact</span></a></li>
<li><a href="#"><strong>博客</strong><span>Blog</span></a></li>
</ul>
准备工作
我们要做的第一件事就是到菜单页面,你会发现每个菜单项都有一个“标题属性”,了解网页都知道这是用来显示鼠标移到链接上后的提示性文字,首先把你希望显示的文字先填上~
自定义walker类编辑输出结构
WordPress使用一个特殊的“Walker”类来遍历数据记录并显示出来。幸运的是,我们可以很轻松的创建属于我们自己的“Walker”类从而改变菜单的输出结构。
打开你主题文件中的function.php文件,并添加如下代码:
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 = '<strong>';
$append = '</strong>';
$description = ! empty( $item->attr_title ) ? '<span>' . esc_attr( $item->attr_title ) . '</span>' : '';
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 ) .'"' : '';
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . $prepend . apply_filters( 'the_title', $item->title, $item->ID ) . $append;
$item_output .= $description . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
那么这个类做了什么呢?这个类在WordPress默认的walker代码(位于wp-includes/nav-menu-template.php)基础上添加了几行代码。现在这个walker会检测是否是顶级菜单,如果是就会输出带有描述的菜单结构。
添加回调函数
现在我们创建了一个自定义的walker类,我们还要做的就是告诉WordPress去使用我们的walker替代默认的。这步非常简单,只要为 wp_nav_menu()添加walker参数即可:
<?php wp_nav_menu( array('walker' => new description_walker())); ?>
好了,最后为你的菜单添加CSS样式,一起来制作个性的导航菜单吧~
0
投稿
猜你喜欢
- 搜狐近日公布了2009年度财务报告,总收入达5.152亿美元,年增长率达20%,其中子公司畅游所运营的游戏业务收入为2.676亿美元,超过母
- 今天网站IP达到了6000+,原来的100M的虚拟空间已经吃不消了,网站一度打不开,为了网站更好的发展必须扩充。于是合租了服务器,今天在落伍
- 谷歌于北京时间5月20日晚上10:30点在旧金山Moscone会展中心举办Google I/O 2010大会第二天的会议,Google正式发
- 对于一个新手,我推荐虚拟主机这种方式。虚拟主机是把一台高性能的服务器分成一台台“虚拟”的服务器,每一台虚拟主机都具有独立的域名,具有完整的
- 番茄花园事件发生后,一份其作者洪磊和“好友”的对话录音引起了关注。该录音中,洪磊详细解析了番茄花园的盈利模式以及和其他网站、软件合作的情况,
- SupeSite 7.0是康盛创想(Comsenz)公司于2009年3月推出的一款社区CMS产品,作为Comsenz旗下的社区产品SupeS
- 做为站长学习如何防止SQL注入是非常必须的,因为一旦网站被注入小到挂马,大到破坏系统程序,可以说对网站的破坏是非常大的,对于asp编写的程序
- 为了保证Windows系统的安全稳定,很多用户都是使用NTFS文件系统,因此共享文件夹的访问权限不但受到“共享权限&am
- google和金山词霸合作了。看重的是金山词霸3kw的用户。google表示这三千万的用户,可以直接成为google的搜索用户。他们认为这个
- 在/etc/ftpaccess里面加上: throughput /home/ftp * * 64000 0.5 *意思是下载带宽对所有IP(
- 曾经有一个网站,拥有高质量的流量,每天Google AdSense收入却不高,后来经Google AdSense小组帮助优化广告之后,每天G
- 概要当用户试图通过 HTTP 或文件传输协议 (FTP) 访问一台正在运行 Internet 信息服务 (IIS) 的服务器上的内容时,II
- 论坛营销是指网络营销人员寄宿在第三方论坛利用长期回答用户的提问,来建立自己在行业论坛中的信誉度以及地位,在推广个人的同时,更好的宣传自己的网
- Adobe Dreamweaver支持HTML5 Xtalk社区聊天插件 v1.2 正式版5月19日发布。Xtalk是为Discuz!/UC
- 本来只想算算花了多少钱,谁知写得头晕,写太多了。03年工作后开始接触网络,说来惭愧,因为俺是学医的,所以只顾埋头苦读,不闻窗外事,所以大学期
- 可能有些内容和网上其他人的相似,但也是我的个人验证总结过的,欢迎大家有经验验证的继续补充交流:1、首页广告切忌不能乱投,弹出类广告更是大大的
- 打开:mode/o/template/m_article.htm查找:<td colspan="3"&g
- 当提到内容的创意时,我们通常会把主要的注意力集中到提高内容可信度上,似乎我们正在写一些系列化的书籍,然而,博客并不是一本书。实际上,网上的博
- 手工为局域网工作站分配IP地址,不但容易造成IP地址冲突现象发生,而且也不利于高效管理网络,特别是在一些规模较大的局域网环境中,这些弊病尤其
- 1.域名和空间域名对排名的影响是非常小,但对网站整体来说却是很重要,因为一个好的域名会给我们带来很大流量和知名度,选择的时候,以短小易记为原