为wordpress文章添加折叠区块
在编写文章时，有些内容稍显次要，但仍需要展示在文章中，尤其是占据较长的篇幅的时候，为了保持文章主体结构的完整，我们可能需要将一些内容折叠起来，在希望阅读的时候将之展开，而不需要的时候则保持折叠状态。在Wordpress中可以利用jQuery实现这个功能，而不需要安装复杂的插件，只需要对functions.php进行编辑即可。
functions.php在主题的目录下，即wp-content/themes/主题名/functions.php,在其最后添加这样一个函数，并在函数定义之后使用add_shortcode()，使wordpress能通过shortcode方式快速将区域转换成折叠区块
function xcollapse($atts, $content = null) {
extract(shortcode_atts(array("title"=>""),$atts));
return '<div style="margin: 0.5em 0;">
<hr>
<div class="xControl">
<a href="javascript:void(0)" class="collapseButton xButton">
<span class="collapseIcon">+</span>
<span class="collapseIcon" style="display: none;">-</span>
<span class="xTitle">'.$title.'</span></a>
<div style="clear: both;"></div>
</div>
<div class="xContent">'.$content.'</div>
<hr>
</div>';
}
add_shortcode('collapse','xcollapse');
其中第8-9行的class="collapseIcon"，是表示折叠和展开的图标，这里简单地使用了 + / - ，当然为了美观也可以利用是font-awesome的折叠与展开图标，或者当前主题使用框架的图标库。
折叠的响应动作在footer.php中指定，在functions.php同一目录下。在footer.php的</body></html>之前加入这样的script：
<script>
jQuery(document).ready(
function(jQuery){
jQuery(".xContent").hide();
jQuery('.collapseButton').click(function(){
jQuery(this).children('.collapseIcon').toggle();
jQuery(this).parent().parent().find('.xContent').slideToggle('fast');
});
});
</script>在页面加载之后，会将class含有xContent的div区域隐藏。点击展开按钮，则响应collapseButton事件，查找当前点击按钮的控制下的xContent区域并进行toggle().
这样，在编写文章时，就可以使用如下方式表示一块折叠区域:
使用效果：
目前存在的已知问题是collapse区域内使用Codemirror Blocks的代码高亮插件区块，首次展开后的代码段的行号和样式需要点击一下才能显示出来。