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

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

8 D$ v" A# I# _9 K問題：雖然內置的wp_list_pages()和wp_list_categories()函數很有用，但它們不允許嵌入<span>元素。這樣一來，就只能使用目前最讚的CSS滑動門技術了。而且幸運的是，我們只要稍微借助一下PHP和正則表達式就能夠在WordPressBlog中使用超酷的滑動門技術了。

, @- I# @& i, w% L6 ^6 O& u由於有關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;
3 u* A/ a, D2 ~( J' Pfloat:left;
}
#nav a span {
float:left;
" a9 F( L- C( V9 P  qdisplay:block;
}
* x$ z' Y! U0 |/ r/ |8 l#nav a:hover span {
+ m+ `) B5 i# i  `0 Gfloat:left;
display:block;
, M6 S( n* N+ X: ]$ k0 xbackground: url(images/tab-left.jpg) no-repeat 0 1px;
1 y, V8 t8 J  r9 O6 B}
$ o! _+ ?# Z7 J' _3 D$ g現在讓我們來編輯header.php文件吧。根據自身需要將如下代碼複製粘貼進去即可：
<ul id="nav">
) a- R: X( z* v( N- w& b' z<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')); ?>
* z7 a# {$ P* m" h! X* }- F, g  j</ul>
列出頁面：
, {4 r. ^6 n, f. Q& ~3 h<ul id="nav">
% Y$ P& E6 c2 R. x; `<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')); ?>
) n5 L- h: }6 G6 }! W$ V5 Z</ul>

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

這個看著有點難