WordPress 导航菜单

WordPress 菜单栏

难度:

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

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

这是效果演示

相关话题:

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

作业分析:

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

预想结构:

1
2
3
4
5
6
7
8
9
<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 进行升序排列
打印独立页面菜单项的语句是:

1
<?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:

1
2
3
4
5
6
7
8
9
10
11
<?php
 
// 如果是首页, class 是 current_page_item
if (is_home()) {
	$home_menu_class = 'current_page_item';
// 如果不是首页, class 是 page_item
} else {
	$home_menu_class = 'page_item';
}
 
?>

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 菜单项 */
#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
打印分类菜单项的语句是:

1
<?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.phpstyle.css
主题已包含了页面导航菜单和分类导航菜单两个菜单栏. 为了演示方便, 我使用了 class="menubar" 来定义两个菜单栏的样式. 而正式使用只有一个菜单栏, 用 id 定义更为合适.

下载主题: default_with_menubar.zip

声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: WordPress 导航菜单
  1. xiaoxie | #1
    2008-08-28 22:45

    我来占个位

  2. JAY | #2
    2008-08-28 23:32

    沙个发先

    话说这个要是做多级的话,和主题的设计依赖性挺大的,不太好通用哟~

  3. schuen | #3
    2008-08-29 06:24

    menu被点几率不大

  4. 锐风 | #4
    2008-08-29 09:49

    确实哈.
    米啥难度.

  5. 小马哥 | #5
    2008-08-29 10:09

    嘿 学习了

  6. Sparanoid | #6
    2008-08-29 10:18

    这个貌似过于简单了,虽然有 current-cat 样式但是在打开 "current-cat" 下的文章后当前分类的链接也没有点亮,同样的在这篇文章下,导航栏上连一个点亮的链接都没有了(应该是 Archive 被点亮)

  7. 锐风 | #7
    2008-08-29 10:47

    Sparanoid:
    这个貌似过于简单了,虽然有 current-cat 样式但是在打开 "current-cat" 下的文章后当前分类的链接也没有点亮,同样的在这篇文章下,导航栏上连一个点亮的链接都没有了(应该是 Archive 被点亮)

    这个我不清楚该怎么实现.
    我想过这个问题.

    强大的 mg12 同志来解答下?

  8. 加林 | #8
    2008-08-29 15:18

    谢谢分享。但是我觉得修改源代码也就可以了呀。

  9. mg12 | #9
    2008-08-29 23:11

    @JAY
    太遗憾了, 你不是沙发.

    @schuen
    因人而异吧, 我习惯点击菜单...

    @Sparanoid 和 锐风
    是比较简单, 热身, 哈哈~
    可能我们理解有差异, 我认为独立文章内是不会有任何菜单项属于当前的, 只有当进入某一分类页面是才显示为当前.
    当然, 如果你要实现那样的效果也不是不可能, 你只需要在 single.php 追加一段 SQL 和一段 JavaScript.

  10. 锐风 | #10
    2008-08-30 23:25

    mg12 :@JAY太遗憾了, 你不是沙发.
    @schuen因人而异吧, 我习惯点击菜单...
    @Sparanoid 和 锐风是比较简单, 热身, 哈哈~可能我们理解有差异, 我认为独立文章内是不会有任何菜单项属于当前的, 只有当进入某一分类页面是才显示为当前.当然, 如果你要实现那样的效果也不是不可能, 你只需要在 single.php 追加一段 SQL 和一段 JavaScript.

    其实这并不是用不到的.
    貌似有些 Blog 就有 Sparanoid 提到的那个效果.

  11. 向右 | #11
    2008-09-15 19:42

    落下好多天功课,大伙中秋愉快~

  12. yinheli | #12
    2008-10-17 01:07

    呵呵不错 学了,不过现在比较忙 我对wordpress还没有什么研究呢,等看看水煮鱼那些入了门先.

  13. dragongod | #13
    2008-12-26 14:49

    非常感谢你的这个教程。呵呵。终于实现了一直梦寐以求的效果

  14. metoit | #14
    2009-02-10 23:17

    It's great; thanks a lot!

  15. pzz | #15
    2009-03-09 10:58

    感谢你的教学,偶是个刚接触wordpress的菜鸟,导航栏不知道怎么弄~

  16. adeshen | #16
    2009-08-19 10:56

    怎么能让 分类目录和页面同时做导航栏呢??

    如果改了,又应该怎么调整顺序呢?

    谢谢

  17. meimei | #17
    2009-10-26 17:02

    我也想把分类目录和页面同时做导航栏呢!
    但是改了几次,都没能成功。
    想着还别的主题的,但是看来看去还是觉得inove比较清爽。
    希望能赐教了~

  18. Yusn | #18
    2009-10-26 17:09

    @meimei
    我的就是用分类目录和页面同时做导航栏

  19. blogtang | #19
    2009-10-27 08:44

    搜索引擎来到你的站,做的太漂亮了,呵呵
    讲的方式也非常棒,内容更棒,以后多来你这里学习,收藏了

  20. meimei | #20
    2009-10-27 13:14

    @Yusn
    如何做到的呢?教我一下嘛!我很想学~

  21. Yusn | #21
    2009-10-27 14:08

    @meimei
    我没用过inove主题,这个里面有,方法差不多你试一下吧:http://www.pp2008.cn/article.asp?id=130

  22. Vincent | #22
    2009-11-05 11:24

    非常感谢你的这个教程。呵呵。终于实现了一直梦寐以求的效果

  23. 孙伊卓 | #23
    2010-07-26 23:11

    不是很多 但觉得很有用 :grin:

  1. YY吧 » Blog Archive » 主题技巧: WordPress 导航菜单
    2008-08-30 15:55
  2. mg12's Blog » 二级导航菜单
    2008-08-30 19:26
  3. mg12's Blog » 主题技巧: 淡出淡入导航菜单
    2008-09-02 00:47
  4. mg12's Blog » 主题技巧: 滚动导航菜单
    2008-09-07 11:42
  5. 主题技巧: 二级导航菜单 - Moxida网摘
    2008-09-20 21:30
  6. 主题技巧: 淡出淡入导航菜单 - Moxida网摘
    2008-09-20 21:32
  7. 主题技巧: 滚动导航菜单 - Moxida网摘
    2008-09-20 21:40
  8. 这能叫主题吗 - 乱世浮生
    2008-11-13 17:20
  9. WordPress 3.0 导航菜单 (使用篇)
    2010-06-24 18:01

Twitter Email feed
RSS feed