调整CSS，做更好的wordpress导航菜单
前一篇文章我们沿用了我爱水煮鱼的教程来做wordpress水平导航菜单，基本了解怎么用CSS来使得导航水平化，但是按照这个教程所作出的菜单还不够美观，熟用CSS的同学当然可以自己去创新。如果你是学习代码的新手，或许今天的文章可以给你带来一些好的学习经验。
WordPress导航菜单设计要点
熟悉wordpress系统的人一定知道，导航菜单一般有三种状态：
- 系统默认的页面导航菜单
- 分类导航菜单
- 页面和分类兼有的导航菜单
- 使用系统自带的自定义导航菜单
本文主要简述前两种导航菜单的做法，而这两种导航菜单又由首页菜单项和一般菜单项组成。同时，我们需要注意的是当前页的菜单项应该与其他菜单项区别开来。这样看来，我们要做的是，使用函数调用首页菜单项和其他菜单项，并用CSS样式化，同时分辨当前菜单项，赋予新的样式。
预想结构:
<div id="menubar"> <ul> <li><a href="http://.../">Home</a></li> <li><a href="http://.../">菜单项1</a></li> <li><a href="http://.../">菜单项2</a></li> <li><a href="http://.../">菜单项3</a></li> ... </ul> </div>
WordPress页面导航菜单
1、判断菜单项是否为当前菜单项
<?php
// 如果是首页, class 是 current_page_item
if (is_home()) {
$home_menu_class = 'current_page_item';
// 如果不是首页, class 是 page_item
} else {
$home_menu_class = 'page_item';
}
?>
由于一般独立页面的 class 是 page_item, 当前独立页面的 class 是 current_page_item. 当页面是首页时, 首页菜单项的 class 应该是 current_page_item, 其他情况则是 page_item. 为此, 我们需要一段分支代码来为它确定 class。
2、打印首页菜单项的语句是:
<li color: rgb(0, 0, 0); font-weight: bold; ">
<?php echo($home_menu_class); ?>">
<a title="Home" href="<?php echo get_settings('home'); ?>/">Home</a>
</li>
3、独立页面列表作为菜单项
打印独立页面菜单项的语句是:
<?php wp_list_pages('depth=1&title_li=0&sort_column=menu_order'); ?>
调用 wp_list_pages 获取独立页面列表, 并使用以下参数:
depth: 列表深度(层的最大数量), 本文讨论的是一级菜单, 故最大深度为 1；
title_li: 标题字符串, 这里不需要, 设为 0；
sort_column: 列表项的排序方式, 根据创建页面时所设定的 order 进行升序排列；
4、菜单项样式
/* 菜单项 */
#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
实例演示
修改header和style文件，分别添加以下代码:
以下是导航菜单函数调用
<!-- 页面导航菜单 START -->
<div id="header">
<div id="headerimg">
<h1><a href="<?php echo get_option('home'); ?>/">
<?php bloginfo('name'); ?></a></h1>
<div><?php bloginfo('description'); ?></div>
</div>
</div>
<div class="menubar">
<ul class="menus">
<?php
if (is_home()) {
$home_menu_class = 'current_page_item';
} else {
$home_menu_class = 'page_item';
}
?>
<li>
<a title="<?php _e('Home', 'default'); ?>" href="<?php echo get_settings('home'); ?>/">
<?php _e('Home', 'default'); ?></a>
</li>
<?php wp_list_pages('depth=1&title_li=0&sort_column=menu_order'); ?>
</ul>
</div>
<!-- 页面导航菜单 END -->
<div style="clear:both;"></div>
<!-- 分类菜单 START -->
<div class="menubar">
<ul class="menus">
<?php
if (is_home()) {
$home_menu_class = 'current-cat';
} else {
$home_menu_class = 'cat-item';
}
?>
<li class="<?php echo($home_menu_class); ?>">
<a title="<?php _e('Home', 'default'); ?>" href="<?php echo get_settings('home'); ?>/">
<?php _e('Home', 'default'); ?></a>
</li>
<?php wp_list_categories('depth=1&title_li=0&orderby=name&show_count=0'); ?>
</ul>
</div>
<!-- 分类菜单 END -->
<div style="clear:both;"></div>
以下是导航菜单样式化
/* 导航菜单 START */
.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,
.menubar ul.menus li.current-cat a {
background:#5495CD;}
.menubar ul.menus li a:hover {
background:#4281B7;}
/* 导航菜单 END */
效果如图所示：
Incoming search terms:
- wordpress导航菜单
- wordpress CSS
- CSS
- 导航菜单样式
- wordpress 自定义菜单 css
- wordpress css 菜单
- wordpress 3
- css wordpress 导航
- wordpress 菜单 样式
- wordpress修改导航栏样式
