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

有时候 WordPress 文章里面一些不太重要的内容，想隐藏起来，免得文章太长影响用户体验，可以通过展开/收缩功能，下面教大家给 WordPress 文章 添加展开/收缩功能：

1.下面的 JS 代码加入到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.代码使用：

4.CSS代码：

.xControl {
padding-left: 32px;
}

5.添加按钮到编辑器，下面的代码加入到 functions.php 文件中

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

按钮使用方法：先单击一次，然后输入你想要收缩的内容，再单击一次按钮，然后替换替换其中的说明文字

# 更多WordPress技巧，请关注「WordPress专题」

方法来源：dedewp