搬码资源网广告位 搬码资源网广告位

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

下面是搬码源码网 abnma.com 通过网络收集整理的代码片段。搬码源码网小编现在分享给大家,也给大家做个参考。

大家可能在 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]就可以使用本功能啦 (填写简码时其中 – 删除)!

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

声明:
本站发布的文章及附件仅限用于学习和研究目的;不得将上述内容用于商业或非法用途,否则后果请用户自负。
本站资源来自网络收集,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。
如果您喜欢该程序,请支持正版软件,得到更好的正版服务。
本文链接:https://www.abnma.com/11402.html,转载请注明出处。
如有侵权,请邮件联系我们删除处理。

0
搬码资源网广告位

评论0

请先

没有账号? 注册  忘记密码?