很多時候我們在WordPress上發布一些文章的時候里面都包含了很多的代碼，又不喜歡把代碼壓縮起來而喜歡讓代碼格式化顯示，但是格式化顯示通常會讓文章內容看起來很多，不便于訪問者瀏覽，所以今天就介紹一種可以展開/收縮文章內容的功能。
教程
1、在header.php中添加下面的代碼，或者也可以單獨寫進一個js文件中然后在header.php中引入也可以。我是引入的。
<script type=\"text/javascript\">
jQuery(document).ready(function(jQuery) {
jQuery(\'.collapseButton\').click(function() {
jQuery(this).parent().parent().find(\'.xContent\').slideToggle(\'slow\');
});
});
</script>2、在function.php中加入下面的代碼：
//展開收縮功能
function xcollapse($atts, $content = null){
extract(shortcode_atts(array(\"title\"=>\"\"),$atts));
return \'<div style=\"margin: 0.5em 0;\">
<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\');3、可以優化一下代碼，因為默認是靠左的，不好看，我們讓他往中間一點顯示，具體的距離可以自行調整。當然這一步忽略也是可以的。 在diy.css中添加以下代碼：
.xControl {
padding-left: 32px;
}4、下面就可以在文章中通過插入短代碼
[collapse title="標題"]需點擊展開的內容[/collapse]
來使用此功能了。其中title是指添加一些提示內容，當然也可以省略title不寫。
這樣一來，一方面可以優化WordPress主題內容頁面的加載速度，另一方面可以有效提升用戶體驗。
