WordPress 导航菜单 [转]

导航菜单早已 "深入民心", 在博客上的应用日益重要且多样. 从本文开始, 我将开展几个关于 WordPress 导航菜单的话题, 讨论如何在 WordPress 上使用和加强导航菜单, 话题间有一定的承接关系, 难度也会逐步增加.

WordPress 上的导航菜单一般有两种, 页面导航菜单和分类导航菜单.
可曾记得? WordPress 是可以撰写独立页面的, 页面导航菜单就是以首页和各个独立页面组成的菜单. 而分类导航菜单则是以首页和各个分类组成的菜单.

相关话题

WordPress 导航菜单
二级导航菜单
淡出淡入导航菜单
滚动导航菜单
多级导航菜单
jQuery 导航菜单
点选式导航菜单 (待定话题)

作业分析

既然菜单由首页和独立页面列表或首页和分类列表所组成, 我们就需要处理两个环节, 即首页菜单项和其他菜单项.
另外, 我们还需要处理菜单项的三个状态, 即一般状态, 当前菜单项状态 (如: 在首页中, 首页菜单项就是当前菜单项) 和选中菜单项状态.
也就是说, 我们共需要处理 3 个事情:
1. 首页外的其他菜单项
2. 首页菜单项
3. 菜单项处于不同状态时的视觉效果

预想结构:

<div id="menubar">
	<ul class="menus">
		<li class="..."><a href="http://.../">Home</a></li>
		<li class="..."><a href="http://.../">菜单项1</a></li>
		<li class="..."><a href="http://.../">菜单项2</a></li>
		<li class="..."><a href="http://.../">菜单项3</a></li>
		...
	</ul>
</div>

页面导航菜单

1. 独立页面列表作为菜单项
调用 wp_list_pages 获取独立页面列表, 并使用以下参数:
depth: 列表深度(层的最大数量), 本文讨论的是一级菜单, 故最大深度为 1
title_li: 标题字符串, 这里不需要, 设为 0
sort_column: 列表项的排序方式, 根据创建页面时所设定的 order 进行升序排列
打印独立页面菜单项的语句是:

<?php wp_list_pages('depth=1&title_li=0&sort_column=menu_order'); ?>

2. 首页菜单项
由于一般独立页面的 class 是 page_item, 当前独立页面的 class 是 current_page_item. 当页面是首页时, 首页菜单项的 class 应该是 current_page_item, 其他情况则是 page_item. 为此, 我们需要一段分支代码来为它确定 class:

<?php
 
// 如果是首页, class 是 current_page_item
if (is_home()) {
	$home_menu_class = 'current_page_item';
// 如果不是首页, class 是 page_item
} else {
	$home_menu_class = 'page_item';
}
 
?>

打印首页菜单项的语句是:

<li class="<?php echo($home_menu_class); ?>">
	<a title="Home" href="<?php echo get_settings('home'); ?>/">Home</a>
</li>

3. 菜单的样式
这是一个从普遍到特殊的处理过程, 一般菜单项的样式放前面, 当前和选中菜单项的样式放在后面, 当后者条件满足就会覆盖前者的样式, 从而改变外观.

/* 菜单项 */
#menubar ul.menus li {
	float:left; /* 靠左浮动 */
	list-style:none; /* 清空列表风格 */
	margin-right:1px; /* 右侧的间隔 */
}
/* 菜单项链接 */
#menubar ul.menus li a {
	padding:5px 10px; /* 内边距 */
	display:block; /* 显示为块 */
	color:#FFF; /* 文字颜色 */
	background:#67ACE5; /* 背景颜色 */
	text-decoration:none; /* 没有下横线 */
}
/* 当前菜单项链接 */
#menubar ul.menus li.current_page_item a {
	background:#5495CD; /* 背景颜色 */
}
/* 选中菜单项链接 */
#menubar ul.menus li a:hover {
	background:#4281B7; /* 背景颜色 */
}

分类导航菜单

1. 分类列表作为菜单项
调用方法 wp_list_categories 获取分类列表, 并使用以下参数:
depth: 列表深度(层的最大数量), 本文讨论的是一级菜单, 故最大深度为 1
title_li: 标题字符串, 这里不需要, 设为 0
orderby: 列表项的排序方式, 根据创建页面时所设定的 order 进行升序排列
show_count: 是否显示该分类的文章数量, 这里不需要显示, 设为 0
打印分类菜单项的语句是:

<?php wp_list_categories('depth=1&title_li=0&orderby=name&show_count=0'); ?>

2. 首页菜单项
与页面导航菜单相似, 只是菜单项的 class 有所不同.
page_item 更改为 cat-item
current_page_item 更改为 current-cat

3. 菜单的样式
因为菜单项的 class 略有不同, 所以也需稍作修改.
current_page_item 更改为 current-cat

演示主题

以 WordPress 自带主题 default 为基础, 仅做学习参考使用, 修改过的文件有 header.php 和 style.css
主题已包含了页面导航菜单和分类导航菜单两个菜单栏. 为了演示方便, 我使用了 class="menubar" 来定义两个菜单栏的样式. 而正式使用只有一个菜单栏, 用 id 定义更为合适.

下载主题

default_with_menubar.zip

声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: WordPress 导航菜单