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

8.在WordPess導航條中使用CSS滑動門
  {, e* z. F8 G4 i- |7 t
1 x- i! a' q" F! M問題：雖然內置的wp_list_pages()和wp_list_categories()函數很有用，但它們不允許嵌入<span>元素。這樣一來，就只能使用目前最讚的CSS滑動門技術了。而且幸運的是，我們只要稍微借助一下PHP和正則表達式就能夠在WordPressBlog中使用超酷的滑動門技術了。

由於有關CSS滑動門的教程已經很多了，因此在這裡我們就不對其工作方式再做任何說明。如果你想對此技術進行更深入的瞭解，可以看看這篇精品文章。想看看實際效果的話，請點擊這裡。
創建你所需的圖片，並對WordPress外觀主題中的style.css文件進行編輯。這裡給出例子：
( c4 ]. Z6 @0 o#nav a, #nav a:visited {
% W5 J( ?/ s4 Y3 y$ T! C( Udisplay:block;
}
#nav a:hover, #nav a:active {
9 E5 ^3 s/ v7 D4 w) Bbackground:url(images/tab-right.jpg) no-repeat 100% 1px;
float:left;
}
, N% L# G( i+ `. Y% v( ?#nav a span {
, o' q+ O2 G0 p7 B4 c! P  nfloat:left;
  s2 ]5 p) e! P5 s& s( Edisplay:block;
" I3 c9 C7 K5 d$ r* o}
#nav a:hover span {
float:left;
  r0 l# Z, d, d( A8 kdisplay:block;
background: url(images/tab-left.jpg) no-repeat 0 1px;
! G. |6 E: i( F4 P}
1 f4 l5 Z  f$ X1 m6 e1 Z* k: `現在讓我們來編輯header.php文件吧。根據自身需要將如下代碼複製粘貼進去即可：
. g. p+ S1 z; U/ e# K8 ^<ul id="nav">
' |& r3 I& ]& Q2 O- Q2 w5 n* I- a<li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
9 c7 T/ E( B0 U<?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>
$ e, z4 S' R, _& R- X$ z列出頁面：
5 \; U0 s4 }5 C% G2 J5 C8 E<ul id="nav">
0 V& v0 ^1 J: C, l' U, W<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')); ?>
$ {; Y/ n( |* o3 o! r/ q7 h</ul>

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

這個看著有點難