大家可能在 WordPress 中写文章中经常需要很多补充资料，但是如果将这些补充资料都一一列出来的话，页面反而会变得很长，搜索了大量资料测试无数次后终于实现了此功能，下面就来教大家如何为 WordPress 添加“点击展开/收缩” 【collapse】. x K = 短代码功能，让你的网页在更加丰富的同时，也更加的简洁清晰！I M 5 K % O S
步骤一：
首先将以下 JS 代码加入至你网站所引用的 JS 文件内（例如“functions.js”等）：
- /* 为网站添加“点击展开/收h 0 3 R & $ k缩”功能开始（由创客源码制作） */
- jQueryI 9 k d -(document).ready(
- function(jQueB O s G 2ry){
- jQuery('.collapseButton').click(functio_ $ . % 8n(){
- jQuerB ] B - { v H l zy(this).parent().parent().find('.xContek ( ` X Unt').d . H 6 O 0slideToggle3 S ^0;'slow');
- });
- });
- /* 为网站添加“点击展开/收缩”功能结束V * L y : { z t（由创客源码制作） */
步骤二：
然后将下方代码添加到“模板函数 (functions.php)”的最底部 ?> 之前：
- /* 为WordPress添加“点击展开/收缩”功能开始（由创U e -客源码制作） */
- function xcollapseN J U ? ` | H @ S40;$atts, $content = nullB o M1;{
- extrc z c 1act(shortcode_atts(array("title"=>""),$atts));
- return '<div style="margin: 0.5em 0;">
- <div clas) B + F )s="xControl">
- <span class="xTitlc O I 2 B ^ `e">'.$title.'</span>
- <a href="javascript:void(0)" rel="external nofollow" class=&quom 0 V 4 @t;collapseButton xButton">展开/收缩</a>
- <div style="clear: both;"></div>
- </div>
- <div c# E =lass="xConten@ C M 3 5 ~t" style=z = t 0"display: noC I , ( 2ne;"&gR 2 c 2 ` ~ s [t;'.$content.'</div>
- </div>';
- }
- add_shortcode('collapse', 'xcollapse');
- /* 为WordPress添加“点击展开/收缩”功能结束（由创客v a \ R U =源码制作） */
短代码：
现在我们可以直接在文章中插入[collapse title="标题"]需点击展开的内容[/collapse]就可以使用本功能啦
