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

8.在WordPess導航條中使用CSS滑動門
7 Q% i  M' C+ `4 A
+ W& p( i2 h8 m7 |; h( O問題：雖然內置的wp_list_pages()和wp_list_categories()函數很有用，但它們不允許嵌入<span>元素。這樣一來，就只能使用目前最讚的CSS滑動門技術了。而且幸運的是，我們只要稍微借助一下PHP和正則表達式就能夠在WordPressBlog中使用超酷的滑動門技術了。
7 b) F6 c3 z* ]$ ?: Z. [1 o
- P, l* m* N, D6 v0 D8 e由於有關CSS滑動門的教程已經很多了，因此在這裡我們就不對其工作方式再做任何說明。如果你想對此技術進行更深入的瞭解，可以看看這篇精品文章。想看看實際效果的話，請點擊這裡。
創建你所需的圖片，並對WordPress外觀主題中的style.css文件進行編輯。這裡給出例子：
#nav a, #nav a:visited {
" X% w: g' X$ p0 a  ^display:block;
6 _$ a2 E! l5 K" C: A: @}
#nav a:hover, #nav a:active {
$ I# Q+ W2 U3 K. Gbackground:url(images/tab-right.jpg) no-repeat 100% 1px;
8 n! _3 M$ h$ [float:left;
}
% l8 v4 U, J1 ?* q1 }#nav a span {
; e/ n% j3 p1 ^% j- ]float:left;
display:block;
}
* S5 p1 O0 X& Q) s#nav a:hover span {
8 J# I, v0 f& Rfloat:left;
display:block;
background: url(images/tab-left.jpg) no-repeat 0 1px;
}
, t  i* r) X% Q1 }& f2 n9 |/ B6 N9 ]現在讓我們來編輯header.php文件吧。根據自身需要將如下代碼複製粘貼進去即可：
0 c" E% c* T7 [6 r$ C<ul id="nav">
4 r3 u& G6 J. q! _<li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
2 H( r8 x5 J2 E! u% l# i5 b<?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>
" J/ q3 E# W5 ~列出頁面：
* d9 K( @* z3 \3 B  E<ul id="nav">
3 ^2 A& u# }! s<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')); ?>
7 ^# T6 q5 z' d. _</ul>
* n4 f$ F% F5 ]
代碼說明：此例中，我們在 wp_list_pages()和wp_list_categories()函數中使用了echo=0 參量，它允許你獲取函數結果而無需將其直接打印在屏幕上。接著函數結果將用於PHP preg_replace()函數，並最終顯示出來，此時<li>和<a>標籤之間已加入了<span>標籤。

這個看著有點難