WordPress短代码实现文章内容折叠

1、

想自行创建库和js文件加载的看这第一步。如果想直接调用本网站的库和js文件的可以直接进行第二步。

加载jQuery库（已加载过的请无视）。

创建JS文件foldcontent.js。然后再head中调用：

[scfc id=”scfctxt” title=”foldcontent.js内容          +++点击收缩/展开—“]

jQuery(function($){
 $('.foldcontent-title').css({cursor:"s-resize"});
 $('span.foldcontent-title').click(function(){
 $(this).next('div').slideToggle('500');return false;     // 注意下一个'div'即为折叠内容的尾部
 });
});

[/scfc]

2、

加入代码到./wp-content/themes/$theme/header.php文件的head标签中：

[scfc id=”scfctxt” title=”+++点击收缩/展开—“]

	<style>
		.foldcontent{}
		.foldcontent-title{overflow:auto;white-space:nowrap;}
		#scfccd,#scfctxt,#scfcvd,#scfcpe{
		display:block;     /*-- 滑动初始效果 --*/
		background-repeat:no-repeat;     /*-- 背景图片不重复 --*/
		position:relative;     /*-- 定位 --*/
		color:#00c;     /*-- 标题默认颜色 --*/
		}
		#scfccd:hover,#scfctxt:hover,#scfcvd:hover,#scfcpe:hover{
		color:#e14d43;     /*-- 鼠标经过变色 --*/
		}
		.foldcontent-content{
		display:block;
		}
	</style>
	
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://www.laihp.top/zqb/wp-content/themes/generatepress/foldcontent.js"></script>

[/scfc]

3、

加入代码到./wp-content/themes/$theme/functions.php文件中适当位置：

[scfc id=”scfctxt” title=”+++点击收缩/展开—“]

 function shortcodefoldcontent($atts,$content = null) {
	extract(shortcode_atts(array("id"=>'',"title"=>''),$atts));
	$scfccd = 'fa fa-file-code-o';
	$scfcpe = 'fa fa-file-picture-o';
	return '<div id="foldcontent"><span class="foldcontent-title" id="'.$id.'" title="OPEN/CLOSE"><div style="float:right"><i class="'.$$id.'"></i></div><div style="float:left">'.$title.'</div></span><div class="foldcontent-content" style="display:block;">'.$content.'</div></div>';
}
add_shortcode("scfc","shortcodefoldcontent");

[/scfc]

4、

大功告成，只需要在文章中使用短代码：（以下中文大括号改成英文大括号）

 

参考文献：

WordPress加载 jQuery库、js文件、css样式