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

8.在WordPess導航條中使用CSS滑動門

5 A: X: `" z, m% F1 K9 T6 X問題：雖然內置的wp_list_pages()和wp_list_categories()函數很有用，但它們不允許嵌入<span>元素。這樣一來，就只能使用目前最讚的CSS滑動門技術了。而且幸運的是，我們只要稍微借助一下PHP和正則表達式就能夠在WordPressBlog中使用超酷的滑動門技術了。
. W( ~$ p% v# G* }9 L& ~, H
% T& |4 R6 y# o$ o% I由於有關CSS滑動門的教程已經很多了，因此在這裡我們就不對其工作方式再做任何說明。如果你想對此技術進行更深入的瞭解，可以看看這篇精品文章。想看看實際效果的話，請點擊這裡。
創建你所需的圖片，並對WordPress外觀主題中的style.css文件進行編輯。這裡給出例子：
; p7 g' Y1 `, V2 |: ^#nav a, #nav a:visited {
display:block;
6 H- _3 l* @# ^" p. }. U- G  C4 W}
4 p$ u5 i3 _# C#nav a:hover, #nav a:active {
background:url(images/tab-right.jpg) no-repeat 100% 1px;
, H: Q' N0 T& D2 }9 ifloat:left;
}
#nav a span {
float:left;
  V) F3 i; k8 A! j/ l" ]display:block;
5 G4 ]- n6 U3 @* ^+ H. w7 s1 F}
#nav a:hover span {
float:left;
display:block;
background: url(images/tab-left.jpg) no-repeat 0 1px;
}
現在讓我們來編輯header.php文件吧。根據自身需要將如下代碼複製粘貼進去即可：
<ul id="nav">
; B6 {9 k8 u! q6 n; B8 `- k<li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
: w& t. N* t$ c<?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')); ?>
! R' J$ P8 c& Z6 k- R</ul>
3 @$ e" S8 J- H1 R, E0 e列出頁面：
<ul id="nav">
<li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
; d2 F5 p8 V( f& z: ^8 `5 z5 Y<?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>

8 y5 L& N; l9 {" T5 P' h0 b代碼說明：此例中，我們在 wp_list_pages()和wp_list_categories()函數中使用了echo=0 參量，它允許你獲取函數結果而無需將其直接打印在屏幕上。接著函數結果將用於PHP preg_replace()函數，並最終顯示出來，此時<li>和<a>標籤之間已加入了<span>標籤。

這個看著有點難