给 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