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

8.在WordPess導航條中使用CSS滑動門
# \+ H0 }7 j0 k) L9 Y2 V
  i. q# j9 M7 R# R# |' p% Y問題：雖然內置的wp_list_pages()和wp_list_categories()函數很有用，但它們不允許嵌入<span>元素。這樣一來，就只能使用目前最讚的CSS滑動門技術了。而且幸運的是，我們只要稍微借助一下PHP和正則表達式就能夠在WordPressBlog中使用超酷的滑動門技術了。
9 l5 n  F. t! B$ M) x0 Q6 z2 H- V
由於有關CSS滑動門的教程已經很多了，因此在這裡我們就不對其工作方式再做任何說明。如果你想對此技術進行更深入的瞭解，可以看看這篇精品文章。想看看實際效果的話，請點擊這裡。
創建你所需的圖片，並對WordPress外觀主題中的style.css文件進行編輯。這裡給出例子：
0 r  U. P2 l/ X#nav a, #nav a:visited {
3 a2 ]+ q6 n+ u6 t& u' x7 [: I, zdisplay:block;
5 p( M3 D- a* B}
, r" g; Y) [  @/ M7 v1 T; _# b#nav a:hover, #nav a:active {
$ z( P0 w" q# Nbackground:url(images/tab-right.jpg) no-repeat 100% 1px;
( g; ~, e* _' _# L! S1 \3 efloat:left;
}
#nav a span {
" ?) p/ u& c5 u; y9 G7 F0 W' {float:left;
display:block;
0 G5 q( j3 h5 K0 }$ w/ s}
  k5 G. m. S0 t9 K# I#nav a:hover span {
float:left;
  {7 T4 _' _9 G% ^+ t$ X9 Qdisplay:block;
. g& J( x% p/ Obackground: 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')); ?>
) _% {& |2 o4 ^( b</ul>
列出頁面：
9 M0 H% p1 J8 [3 M) E<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>
) F& S) H4 z" r, M- ?9 L% w0 A
+ S1 C! e1 T' {  E% \4 b) a. Y% y. W/ w代碼說明：此例中，我們在 wp_list_pages()和wp_list_categories()函數中使用了echo=0 參量，它允許你獲取函數結果而無需將其直接打印在屏幕上。接著函數結果將用於PHP preg_replace()函數，並最終顯示出來，此時<li>和<a>標籤之間已加入了<span>標籤。

這個看著有點難