WordPress的10个杀手级Hack技巧 8转

lala

8.在WordPess导航条中使用CSS滑动门

问题：虽然内置的wp_list_pages()和wp_list_categories()函数很有用，但它们不允许嵌入<span>元素。这样一来，就只能使用目前最赞的CSS滑动门技术了。而且幸运的是，我们只要稍微借助一下PHP和正则表达式就能够在WordPressBlog中使用超酷的滑动门技术了。

由于有关CSS滑动门的教程已经很多了，因此在这里我们就不对其工作方式再做任何说明。如果你想对此技术进行更深入的了解，可以看看这篇精品文章。想看看实际效果的话，请点击这里。
创建你所需的图片，并对WordPress外观主题中的style.css文件进行编辑。这里给出例子：
#nav a, #nav a:visited {
display:block;
}
#nav a:hover, #nav a:active {
background:url(images/tab-right.jpg) no-repeat 100% 1px;
float:left;
}
#nav a span {
float:left;
display:block;
}
#nav a:hover span {
float:left;
display:block;
background: url(images/tab-left.jpg) no-repeat 0 1px;
}
现在让我们来编辑header.php文件吧。根据自身需要将如下代码复制粘贴进去即可：
<ul id="nav">
<li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
<?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_pages('echo=0&orderby=name&exlude=181&title_li=&depth=1')); ?>
</ul>
列出页面：
<ul id="nav">
<li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
<?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_categories('echo=0&orderby=name&exlude=181&title_li=&depth=1')); ?>
</ul>

代码说明：此例中，我们在 wp_list_pages()和wp_list_categories()函数中使用了echo=0 参量，它允许你获取函数结果而无需将其直接打印在屏幕上。接着函数结果将用于PHP preg_replace()函数，并最终显示出来，此时<li>和<a>标签之间已加入了<span>标签。

breaknew

这个看着有点难