纯代码实现文章部分内容的展开与收缩测试

〇、样式测试

{collapse title=””} 支持古登堡编辑器。{/collapse}

把上文中{}换成[]即可

一、js加入到footer.php

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

二、加入到主题 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');

三、在编辑文章的时候快速添加该按钮(仅支持经典编辑器)

//添加展开/收缩快捷标签按钮
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' );

四、在主题css文件中优化一下

.xControl {
padding-left: 32px;
}