大家可能在 WordPress 中写文章中经常需要很多补充资料，但是如果将这些补充资料都一一列出来的话，页面反而会变得很长，搜索了大量资料测试无数次后终于实现了此功能，下面就来教大家如何为 WordPress 添加“点击展开/收缩” 【collapse】 短代码功能，让你的网页在更加丰富的同时，也更加的简洁清晰！

步骤一：

首先将以下 JS 代码加入至你网站所引用的 JS 文件内（例如“functions.js”等）：

1. /* 为网站添加“点击展开/收缩”功能开始（由创客源码制作） */

2. jQuery(document).ready(

3. 	function(jQuery){

4. 	jQuery('.collapseButton').click(function(){

5. 		jQuery(this).parent().parent().find('.xContent').slideToggle('slow');

6. 	});

7. });

8. /* 为网站添加“点击展开/收缩”功能结束（由创客源码制作） */

步骤二：

然后将下方代码添加到“模板函数 (functions.php)”的最底部 ?> 之前：

1. /* 为WordPress添加“点击展开/收缩”功能开始（由创客源码制作） */

2. function xcollapse($atts, $content = null){

3. 	extract(shortcode_atts(array("title"=>""),$atts));

4. 	return '<div style="margin: 0.5em 0;">

5. 		<div class="xControl">

6. 			<span class="xTitle">'.$title.'</span> 

7. 			<a href="javascript:void(0)" class="collapseButton xButton">展开/收缩</a>

8. 			<div style="clear: both;"></div>

9. 		</div>

10. 		<div class="xContent" style="display: none;">'.$content.'</div>

11. 	</div>';

12. }

13. add_shortcode('collapse', 'xcollapse');

14. /* 为WordPress添加“点击展开/收缩”功能结束（由创客源码制作） */

短代码：

现在我们可以直接在文章中插入[collapse title="标题"]需点击展开的内容[/collapse]就可以使用本功能啦