如何制作 wordpress 分类的下拉式导航 at ︻┳═一 [zsk.akaka.com.cn]

如何制作 wordpress 分类的下拉式导航

5,412 Views 五月 20th, 2008 by peterzsk

最近在修改一个 wordpress 主题，准备开个新站，期间碰到一些之前没有碰到的问题，上网查了些资料，结合自己的实际使用，会陆陆续续写一些 wordpress 主题制作的文章。

今天先来说说如何制作 wordpress 分类的下拉式选单：

wordpress 默认的导航看起来很不爽（估计看多了），有一些网站里使用下拉式导航，觉得不错，决定将新站改成那样：

1 . 修改 PHP

首先，修改主题的 header.php 文件，用底下的代码代替旧的相应代码：

<ul id="nav" class="clearfloat">
<li><a href="<?php echo get_option('home'); ?>/" class="on">Home</a></li>
<?php wp_list_pages('title_li='); ?>
<li class="cat-item"><a href="#">Categories</a>
<ul class="children">
<?php wp_list_categories('orderby=name&title_li=');
$this_category = get_category($cat);
if (get_category_children($this_category->cat_ID) != "") {
echo "<ul>";
wp_list_categories('orderby=id&show_count=0&title_li=
&use_desc_for_title=1&child_of='.$this_category->cat_ID);
echo "</ul>";
}
?>
</ul>
</li>
</ul>

例如我原本的 header.php 文件里面相应部分是：

<ul id="nav">
<?php if ('page' != get_option('show_on_front')) { ?>
<li class="<?php if ( is_home() || is_archive() || is_single() || is_paged() || is_search() || (function_exists('is_tag') && is_tag()) ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>">
<a href="<?php echo get_settings('home'); ?>/" title="<?php _e('Home','unnamed'); ?>"><?php _e('Home','unnamed'); ?></a>
</li>
<?php } ?>
</ul>

最终被修改成：

<ul id="nav">
<?php if ('page' != get_option('show_on_front')) { ?>
<li class="<?php if ( is_home() || is_archive() || is_single() || is_paged() || is_search() || (function_exists('is_tag') && is_tag()) ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>">
<a href="<?php echo get_settings('home'); ?>/" title="<?php _e('Home','unnamed'); ?>"><?php _e('Home','unnamed'); ?></a>
</li>
<?php } ?>
<li class="cat-item"><a href="#">Categories</a>
<ul class="children">
<?php wp_list_categories('orderby=name&title_li=');
$this_category = get_category($cat);
if (get_category_children($this_category->cat_ID) != "") {
echo "<ul>";
wp_list_categories('orderby=id&show_count=0&title_li=
&use_desc_for_title=1&child_of='.$this_category->cat_ID);
echo "</ul>";
}
?>
</ul>
</li>
</ul>

这段代码是在导航栏里增加一个分类下拉式菜单。

2 . 修改 CSS

有了代码还不行，还需要设定一个 CSS 样式，每个人都有自己不同的 css 设定，这里用我测试blog（zsktest.akaka.com.cn) 里用的主题样式作为例子：

#nav{
background:#222;
font-size:1.1em;
}
#nav, #nav ul {
list-style: none;
line-height: 1;
}
#nav a, #nav a:hover {
display: block;
text-decoration: none;
border:none;
}
#nav li {
float: left;
list-style:none;
border-right:1px solid #a9a9a9;
}
#nav a, #nav a:visited {
display:block;
font-weight:bold;
color: #f5f5f4;
padding:6px 12px;
}
#nav a:hover, #nav a:active, .current_page_item a, #home .on {
background:#000;
text-decoration:none
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 174px;
border-bottom: 1px solid #a9a9a9;
}
#nav li li {
width: 172px;
border-top: 1px solid #a9a9a9;
border-right: 1px solid #a9a9a9;
border-left: 1px solid #a9a9a9;
background: #777;
}
#nav li li a, #nav li li a:visited {
font-weight:normal;
font-size:0.9em;
color:#FFF;
}
#nav li li a:hover, #nav li li a:active {
background:#000;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
a.main:hover {
background:none;
}

3 . 最后修改 Javascript 脚本

这一步的主要目的是为了使最终的页面在 IE6 里也能正常显示。如果你的 Javascript 在 ie6 已经是正常的，请跳过。需要的请加入：

<![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=” sfhover”;
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(” sfhover\\b”), “”);
}
}
}
if (window.attachEvent) window.attachEvent(”onload”, sfHover);
//–><!]]>

我的blog在ie6下已经是正常显示了，所以我跳过这步了。

最终就会显示和第一张图里一样的下拉式导航了。

参考：hackwordpress.com
作者：peterzsk
本文永久链接：http://zsk.akaka.com.cn/2008/05/how-to-make-drop-down-menu/
采用CC创作共用协议,转载需保留以上信息并<署名、非商业和保持一致>。

如果您喜欢我的文章，可以订阅我的

谢谢。

看过本篇的朋友，还看过：

8 Responses to “如何制作 wordpress 分类的下拉式导航”

1 paran

不错.

[回复]
peterzsk reply on 2008-05-20 1:02 pm:
谢谢

[回复]

Comment on May 20th, 2008 at 12:54 pm
2 一亿度

我也在考虑要不要做一个导航菜单，mark，以后回来参考

[回复]
peterzsk reply on 2008-05-20 5:44 pm:
主要是 css 很难搞，最近几天弄的头很晕

[回复]
一亿度 reply on 2008-05-20 8:56 pm:
-_-

[回复]

Comment on May 20th, 2008 at 5:35 pm
3 韩酷导航仪

这就是下拉式的导航吗

[回复]

Comment on Mar 31st, 2009 at 5:06 pm
4 Graygift@ye

我的主题用上去了，当然要留言感谢了！做人要厚道吗！

[回复]

Comment on Jul 31st, 2009 at 8:49 am

1 如何制作 wordpress 分类的下拉式导航 | boyeye

[…] 今天先来说说如何制作 wordpress 分类的下拉式选单： […]

Pingback on Dec 2nd, 2008 at 6:32 pm

︻┳═一 [zsk.akaka.com.cn]