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

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

下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。内存溢出小编现在分享给大家，也给大家做个参考。

大家可能在 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 >

<span >'.$Title.'</span>

<a href="JavaScript:voID(0)" >展开/收缩</a>

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

</div>

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

</div>';

}

add_shortcode('collapse','xcollapse');

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

短代码：

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

以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

总结

以上是内存溢出为你收集整理的为WordPress添加“点击展开/收缩”短代码 功能全部内容，希望文章能够帮你解决为WordPress添加“点击展开/收缩”短代码 功能所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。