蓝盟诗人[LUC]蓝客联盟

WordPress导航栏个性化设置最终教程

2010-09-18 14:29 作者: 来源: 本站 浏览: 2,083 views 我要评论 字号:

在WordPress主题中一般有两种定义导航栏的方式:

1. 调用函数展示页面 :

<?php wp_list_pages(‘depth=1&title_li=’); ?>

这个语句的意思是调用wordpress中的页面,也就你是在后台-撰写的所有页面(page)将会被按顺序显示。

Tips:如果由于自己的页面比较多或者导航栏空间有限,不想列出所有的页面,那么可以通过以下方式实现:

在后台-Manage(管理)-Pages(页面) 中查看页面,可以看到每个页面都有一个ID:

然后把上面的调用语句改为以下:

<?php wp_list_pages(‘title_li=&depth=1&exclude=6,4′); ?>

这样可以展示除了ID为4 和6的所有page.

<?php wp_list_pages(‘title_li=&depth=1&include=6,4′); ?>

这样可以实现只展示ID为4和6的page.

2. 自定义html语句展示页面

<li><a href=”http://wap.82men.com”>82们WAP</a></li>
<li><a href=”http://shop.82men.com“>淘宝频道</a></li>
<li><a href=”http://guid.82men.com”>82导航</a></li>

这样的定义方法自由性更大, 使用静态的html也有利于提高加载速度,

代码如下:

<div id=”topnav”>
<ul>
<li id=”ihome” <?php if(is_home()) {?>class=”current_page_item”<?php } ?>><a href=”<?php echo get_option(‘home’); ?>/” title=”HomePage”>Home</a></li>
<?php wp_list_pages(‘title_li=&depth=1&exclude=1194,1191,370′); ?>
<li><a href=”http://wap.bluenoob.com"WAP</a></li>
<li><a href=”http://shop.bluenoob.com">淘宝频道</a></li>
<li><a href=”http://guid.bluenoob.com”>菜鸟导航</a></li>
</ul>
</div>

另外你还可以 设置样式表,让你的导航栏,变成你想要的效果,丰富多彩!

<div id=”subnavbar”>
<ul id=”subnav”>
<?php wp_list_categories(‘sort_column=name&title_li=&depth=2′); ?>
</ul>
</div>

style.css,在最后一行加入以下代码
/************************************************
* SubNavbar *
************************************************/
#subnavbar {
background: #4776C5;
width: 968px;
height: 30px;
color: #FFFFFF;
margin: 0px auto 0px;
padding: 0px;
}
#subnav {
margin: 0px;
padding: 0px;
list-style: none;
}
#subnav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#subnav a {
background: #4776C5;
color: #FFFFFF;
display: block;
font-size: 10px;
font-weight: normal;
text-transform: uppercase;
margin: 0px;
padding: 6px 15px 5px 15px;
font-size:12px
}
#subnav a:hover {
background: #95A469;
color: #FFFFFF;
display: block;
text-decoration: none;
margin: 0px;
padding: 6px 15px 5px 15px;
}
#subnav li {
float: left;
margin: 0px;
padding: 0px;
}
#subnav li li {
float: left;
margin: 0px;
padding: 0px;
width: 140px;
}
#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #4776C5;
width: 140px;
float: none;
margin: 0px;
padding: 6px 10px 5px 10px;
border-top: 1px solid #FFFFFF;
font-size:12px
}
#subnav li li a:hover, #subnav li li a:active {
background: #95A469;
margin: 0px;
padding: 6px 10px 5px 10px;
}
#subnav li ul {
position: absolute;
width: 10em;
left: -999em;
}
#subnav li:hover ul {
left: auto;
display: block;
}
#subnav li:hover ul, #subnav li.sfhover1 ul {
left: auto;
}

打印
分享到:
复制链接

发表评论

*

* (保密)

Ctrl+Enter 快捷回复

会员登录关闭

记住我 忘记密码

注册会员关闭

小提示: 您的密码会通过填写的"电子邮箱"发送给您.