WordPress用代码实现展开、收缩项

WordPress主题站文章的编写是用不同的内容进行填充创作的，当有过多内容需要陈列时会占用过长的页面布局，如果想要进行页面的长短修改，那么今天就教大家如何用代码实现页面点击展开、收缩的功能项：

步骤一：

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

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

jQuery(document).ready(

function(jQuery){

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

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

});

});

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

步骤二：

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

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

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');

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

短代码：

现在我们可以直接在文章中插入[-collapse title="标题"]需点击展开的内容[-/collapse]就可以使用本功能啦 (填写简码时其中 - 删除）！