修改iNove主题默认导航菜单 同时显示分类目录和页面
iNove主题默认的导航菜单好看是好看，但是感觉用的人实在太多，而且我想要同时显示分类目录和页面，这在原来的设置下是没法实现的，只能改代码了。原来的inove/templates/header里是设置默认只显示页面或是显示分类，我要的是都显示，开始想把判断语句去掉，只剩两个函数wp_list_pages 和wp_list_categories 。这样试过后发现显示会有错位，另外IE下和FireFox下效果也不一样，只能再重新修改了。
下面是inove/templates/header里面我现在的导航栏的代码(搜索框还没修改好，暂时未加上)
<!-- navigation START -->
<div id="navigation">
<div id="homepage">
<a title="首页" href="http://www.zenoven.com"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/home.jpg" alt="首页" height="50" width="50"></img></a>
</div>
<div id="navs">
<div id="navigation_wp_list_categories">
<!-- menus START -->
<ul id="menus">
<?php
wp_list_categories('title_li=0&orderby=name&show_count=0');
?>
</ul>
<!-- menus END -->
</div>
<div id="navigation_wp_list_pages">
<ul id="menus" >
<?php
wp_list_pages('title_li=0&sort_column=menu_order');
?>
</ul>
</div>
</div>
<div></div>
</div>
<!-- navigation END -->
我原本是想在navigation实现3栏的，主页图标一栏，然后navs一栏(用来显示分类和页面)，搜索一栏，现在只有两栏,homepage和navs(navs下面有navigation_wp_list_categories和navigation_wp_list_pages)。
下面是CSS代码(我是CSS小菜一个 有错误的请大家指出 :lol: )
/* navigation START */
#navigation {
background:#FFF;
height:50px;
overflow:hidden;
}
#homepage {
width:50px;
height:50px;
float:left;
}
#homepage a {
display:block;
}
}
#navs {
float:left;
width:600px;
height:50px;
}
#navs #navigation_wp_list_pages {
background:#FFF;
float:left;
}
#navs #navigation_wp_list_categories {
background:#FFF;
float:left;
}
#menus li {
display:inline;
list-style:none;
}
#menus li a {
background-color:#FFF;
font-size:13px;
display:block;
color:#382E1F;
height:25px;
line-height:20px;
padding:0 10px;
text-decoration:none;
float:left;
z-index:1;
}
#menus li a:hover,
#menus li a.current {
color:#006699;
background-color:#CDE7FA;
}
#menus li.current_page_item a,
#menus li.current-cat a {
color:#006699;
background-color:#CDE7FA;
}
/* searchbox 我这里其实没有用到*/
#searchbox {
background: url(img/searchbox.gif) no-repeat;
width:209px;
height:21px;
display:block;
float:right;
margin-right:10px !important;
margin-right:5px;
padding:3px 2px;
}
#searchbox .textfield {
background:none;
border:0px;
width:185px;
float:left;
margin-right:2px;
padding-left:2px;
}
#searchbox .button {
background:none;
border:0px;
width:18px;
height:18px;
cursor:pointer;
float:left;
margin-top:1px;
}
#searchbox .searchtip {
color:#999;
}
/* navigation END */
这个虽然是写的针对iNove主题的，但其实其他主题的实现方法都是一样的，主要都是修改header.php和sytle.css文件，只要认真研究下想实现漂亮的导航都是很简单的。