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

8.在WordPess導航條中使用CSS滑動門
6 Y  ]+ m, p1 ^, u' f' [" d
" H1 M  C3 m0 ~8 K' O問題：雖然內置的wp_list_pages()和wp_list_categories()函數很有用，但它們不允許嵌入<span>元素。這樣一來，就只能使用目前最讚的CSS滑動門技術了。而且幸運的是，我們只要稍微借助一下PHP和正則表達式就能夠在WordPressBlog中使用超酷的滑動門技術了。

2 q; y1 i5 Y9 U6 i, s3 F2 u( |6 v# M由於有關CSS滑動門的教程已經很多了，因此在這裡我們就不對其工作方式再做任何說明。如果你想對此技術進行更深入的瞭解，可以看看這篇精品文章。想看看實際效果的話，請點擊這裡。
% J7 M+ j/ r+ v6 q/ o創建你所需的圖片，並對WordPress外觀主題中的style.css文件進行編輯。這裡給出例子：
/ b( P1 ]0 {! G& R#nav a, #nav a:visited {
display:block;
}
: J- L# F+ B3 V0 o$ n+ {#nav a:hover, #nav a:active {
0 C6 F1 o. [/ _' q. ?; wbackground:url(images/tab-right.jpg) no-repeat 100% 1px;
2 q) Z( _! F) |# b( c" p' Jfloat:left;
}
#nav a span {
2 Z/ a+ {' }+ c3 f2 R: f0 qfloat:left;
display:block;
! M. U5 u/ j1 W0 N3 H}
#nav a:hover span {
, M. ?6 Y+ X# q7 l/ _& dfloat:left;
display:block;
1 @5 B& ~6 L% L6 u( R' _7 ~background: url(images/tab-left.jpg) no-repeat 0 1px;
}
3 E: A$ w: ~# ]現在讓我們來編輯header.php文件吧。根據自身需要將如下代碼複製粘貼進去即可：
9 G* i1 A7 N! J. N<ul id="nav">
<li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
: C) h3 K- m' o<?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')); ?>
4 f7 g  p7 U9 |! F</ul>
列出頁面：
<ul id="nav">
<li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
# H* j+ b2 p1 ]1 t3 m0 J# f% b<?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')); ?>
& J9 B+ z( }9 P8 i  I</ul>

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

這個看著有點難