WordPress的10個殺手級Hack技巧 8轉

8.在WordPess導航條中使用CSS滑動門
  T7 ?; {. Y' y3 L
6 |) M& E/ F5 v- {+ N7 P6 Y5 I問題：雖然內置的wp_list_pages()和wp_list_categories()函數很有用，但它們不允許嵌入<span>元素。這樣一來，就只能使用目前最讚的CSS滑動門技術了。而且幸運的是，我們只要稍微借助一下PHP和正則表達式就能夠在WordPressBlog中使用超酷的滑動門技術了。

, l2 H5 ^) K: s1 O) }- `7 e由於有關CSS滑動門的教程已經很多了，因此在這裡我們就不對其工作方式再做任何說明。如果你想對此技術進行更深入的瞭解，可以看看這篇精品文章。想看看實際效果的話，請點擊這裡。
創建你所需的圖片，並對WordPress外觀主題中的style.css文件進行編輯。這裡給出例子：
+ @/ j2 f8 h% A. n#nav a, #nav a:visited {
display:block;
4 W! e6 F3 n* x# Z: i' H* j}
#nav a:hover, #nav a:active {
4 {- C" [, I& M1 X1 rbackground:url(images/tab-right.jpg) no-repeat 100% 1px;
( I' N9 v) u2 e3 ofloat:left;
}
#nav a span {
4 p) y! W  y  d; S: K% n# Xfloat:left;
5 s4 X( E% k3 L/ X+ t6 p/ P5 z1 Rdisplay:block;
}
#nav a:hover span {
float:left;
display:block;
background: url(images/tab-left.jpg) no-repeat 0 1px;
}
現在讓我們來編輯header.php文件吧。根據自身需要將如下代碼複製粘貼進去即可：
8 t3 |* M; b. f<ul id="nav">
& x5 J! _4 e2 G/ y2 t% W<li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
- M# `6 p  h4 a* _* r% p: O6 z4 T6 s<?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>
1 a4 O, M" S) o6 h6 g! q列出頁面：
<ul id="nav">
7 Z3 v: U) S3 Q( y! Y: C, T<li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
! L' w! M. V7 E4 \- A8 s<?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')); ?>
* D+ \8 O' c- V; Q/ E& A9 R</ul>

6 r& x; [6 c8 [  B$ v代碼說明：此例中，我們在 wp_list_pages()和wp_list_categories()函數中使用了echo=0 參量，它允許你獲取函數結果而無需將其直接打印在屏幕上。接著函數結果將用於PHP preg_replace()函數，並最終顯示出來，此時<li>和<a>標籤之間已加入了<span>標籤。

這個看著有點難