[/collapse]代码实现WordPress文章展开/收缩的效果

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
加入到主题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>&nbsp;==>&nbsp;<a href="javascript:void(0)" class="collapseButton xButton"><span class="xbtn02">展开/收缩</span></a>
 <div style="clear: both;"></div>
 </div>
 <div class="xContent" style="display: none;">'.$content.'</div>
 </div>';
}
add_shortcode('collapse', 'xcollapse');

3、代码使用：

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

补刀：css美化一下吧

/* 展开收缩*/
.xControl {
 background: #f6f6f6;
}
.xTitle {
 color: #333;
}
.xbtn02{
 color: #428bca;
 text-decoration: underline;
}

在编辑文章的时候快速添加该按钮

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

将上述代码添加到主题functions.php文件中，然后在编辑文章的时候切换到文本模式，就可以看到该按钮.
按钮使用方法：先单击一次，然后输入你想要收缩的内容，再单击一次按钮，然后替换替换其中的说明文字。