原文：

WordPress文章页添加展开/收缩功能

https://dedewp.com/2262.html  by.陌小雨

需求：

之前在做窝窝屎殉爆榜的用户消失记录时，因为每周都有几十位用户消失，几周后页面过长，不方便用户查看，因此考虑将每一周详细的用户消失记录先折叠隐藏起来，需要查看时再手动展开查看。善用搜索引擎后， 找到上述文章进行学习，实现了该功能，特此记录。

步骤：

1 在主题文件夹目录内的footer.php文件内</body>标签前添加如下代码

<script>jQuery(document).ready(
	function(jQuery){
	jQuery('.collapseButton').click(function(){
		jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
	});
});</script>

2  在主题文件夹目录内的functions.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  在文章需要折叠的地方添加如下代码

[collapse title="标题"]需点击展开的内容[/collapse]

效果：

[collapse title=”标题”]需点击展开的内容[/collapse]

编辑文章时快速添加折叠块：

在主题文件夹目录内的functions.php文件末尾添加如下代码

//添加展开/收缩快捷标签按钮
function appthemes_add_collapse() {if (wp_script_is('quicktags')){
?><script type="text/javascript">// <![CDATA[
QTags.addButton( 'collapse', '展开/收缩按钮', '[collapse title="说明文字"]','[/collapse]' );
// ]]></script><?php }} add_action('admin_print_footer_scripts', 'appthemes_add_collapse' );

即可在编辑文章的文本界面看到展开/收缩按钮。