WordPress,文章內展開收縮短代碼的實現函數分享

公元2011年12月21日被人拍了一磚打醬油看熱鬧的有:4,035 views

WordPress,文章內展開收縮短代碼的實現函數分享

個很多主題都已經用了,以前折騰的有,但是後來給忘記了,今天就來分享下方法,對於經常貼代碼又希望能保持文章頁面整潔的人來說,這個還是挺好用的說,為了美麗,無所不用其極嘛!

老規矩,首先鳴謝企鵝君,代碼是他整理寫出來的,當然,這個也有其他寫過,只不過沒被我看到嘛!

下面先給個演示,自己斟酌下是不是要使用,嘿嘿,展示如下:

這裡填寫折疊內容的提示語 ===此處為隱藏內容,點擊後可展開閱讀===

實現方法不難,首先,在函數模板(functions.php)內加入以下代碼:

1
2
3
4
5
6
7
8
9
10
//折疊
function xcollapse($atts, $content=null){
extract(shortcode_atts(array("title"=>""),$atts));
return '<div style="margin:0.5em 0;width:98%"><div class="xControl">
<span class="xTitle">'.$title.'</span>
<a href="javascript:void(0)" class="collapseButton xButton">展開/收縮</a>
<div style="clear:both"></div></div>
<div class="xContent" style="display:none">'.$content.'</div></div>';
}
add_shortcode('collapse','xcollapse');

如果還不知道添加位置的童靴,可以谷歌或者度娘下,這裏不詳解了!

其次是JS代碼,至於你是想加入主題的JS文件裏還是獨立保存,這個自己決定,代碼如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
jQuery(document).ready(
function($){
 
//折疊 1 :只對本框操作。請選其中一個,不能同時使用。
$('.collapseButton').click(function(){
$(this).parent().parent().find('.xContent').slideToggle('slow');
});
//折疊 2 : A框展開,其它已展開的框自動收縮。請選其中一個,不能同時使用。
$('.collapseButton').click(function(){
$(this).parent().parent().find('.xContent').removeClass("xContent");
$('.xContent').slideUp('slow');
$(this).parent().parent().find('div:last').addClass("xContent");
$(this).parent().parent().find('.xContent').slideToggle('slow');
});
 
});

如果不知道JS怎麼調用或者添加的童靴,依舊找谷歌和度娘問問吧,不難的!

最後就是CSS樣式了,也就是外觀美化,下面提供一段代碼,直接復制進樣式(style.css)文件裏即可,如下:

1
2
3
4
.xControl,.xContent{border:1px solid silver;display:block;padding:2px 2px;}
.xControl{background:#F3F8D7}
.xContent{border-top:none}
.xTitle{float:left}

這個玩WP的基本都會添加吧,無位置限制,隨便貼到哪,這個就可以讓度娘和谷歌省點心了!

使用方法:在需要的地方加入一下段代碼即可

1
[collapse title="折疊內容的標題"]折疊內容[/collapse]

特別註意:在JS裏添加的那是兩段代碼,顯示方式不同,只能選其中一種使用,

兩者區別是,當你設置了多個隱藏段時,

一種是你點擊展開一個後,再去點其他的展開,對剛才已經展開的那個無影響!

一種是你點擊展示一個後,再去點其他的展開,剛才展開的那個會自動收縮起來!

僅此而已,自己斟酌使用!

OK!搞定收工,下次繼續!

1 位最佳損友留下了真知見解!