为WordPress添加“点击展开/收缩”短代码 功能

以下代码由PHP站长网 52php.cn收集自互联网现在PHP站长网小编把它分享给大家，仅供参考

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

预览:

[collapse title="点击展开"]云模版数字市场是一个主题模板/创意作品/数字交易平台，欢迎全球顶级设计师加入，你可以出售最优秀的网页模板和平面设计作品！目前本站不收取任何佣金，只收取提现转账手续费 2%！本站全部主题模板为 100%正品模板，支持更新升级！如有任何问题，请在论坛发帖或是联系在线客服！[/collapse]

步骤一：

首先将以下 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 margin: 0.5em 0;">

<div class="xControl">

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

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

<div clear: both;"></div>

</div>

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

</div>';

}

add_shortcode('collapse','xcollapse');

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

短代码：

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

以上内容由PHP站长网【52php.cn】收集整理供大家参考研究如果以上内容对您有帮助，欢迎收藏、点赞、推荐、分享。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!