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

8.在WordPess導航條中使用CSS滑動門
  s# I; U  o* q
2 L0 n0 J1 Y: o) R( A  [問題：雖然內置的wp_list_pages()和wp_list_categories()函數很有用，但它們不允許嵌入<span>元素。這樣一來，就只能使用目前最讚的CSS滑動門技術了。而且幸運的是，我們只要稍微借助一下PHP和正則表達式就能夠在WordPressBlog中使用超酷的滑動門技術了。
6 Y3 \, ~6 o; o& {" ?1 Y) a
由於有關CSS滑動門的教程已經很多了，因此在這裡我們就不對其工作方式再做任何說明。如果你想對此技術進行更深入的瞭解，可以看看這篇精品文章。想看看實際效果的話，請點擊這裡。
+ f1 `& M% c" h' p# ]* U% r創建你所需的圖片，並對WordPress外觀主題中的style.css文件進行編輯。這裡給出例子：
& o3 X* _+ r) |#nav a, #nav a:visited {
display:block;
}
#nav a:hover, #nav a:active {
; ~% i" Y# B5 c0 z- ~2 u0 Nbackground:url(images/tab-right.jpg) no-repeat 100% 1px;
1 ]3 {4 x0 ?( f7 Nfloat:left;
  M  T, ]& K) g  l( m}
3 w2 u; T9 R5 X1 N#nav a span {
float:left;
5 q: T0 [: ~  o% O5 ]! W5 ddisplay:block;
}
% n: A" l* l5 B. n) Q& |6 n8 s#nav a:hover span {
4 W4 M% \3 P3 g+ Z  jfloat:left;
& j8 U4 D3 R% I: K+ ?  ^display:block;
% o6 {, K5 t2 [. i3 p2 T0 [- sbackground: url(images/tab-left.jpg) no-repeat 0 1px;
}
現在讓我們來編輯header.php文件吧。根據自身需要將如下代碼複製粘貼進去即可：
$ |# @# l. U* X  d<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')); ?>
</ul>
4 O' V. C: ?- ~! M列出頁面：
' q8 D4 z7 A; j- V7 K* t<ul id="nav">
' }! D  b2 H, I# w6 S/ Z$ i<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>

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

這個看著有點難