如何为WordPress网站添加“点击展开/收缩”短代码?

如何为WordPress网站添加“点击展开/收缩”短代码?

WordPress撰写文章的时候需要很多补充资料,但是这些资料一一列出来的话,页面反而会变得很长,所以很多站长都会添加“点击展开/收缩” 功能,那么如何为WordPress网站添加“点击展开/收缩”短代码?

如何为WordPress网站添加“点击展开/收缩”短代码? (https://www.wpzt.net/) WordPress开发教程 第1张

步骤一:

首先将以下 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>

<div class=”xControl”>

<span class=”xTitle”>’.$title.'</span>

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

<div></div>

</div>

<div class=”xContent”>’.$content.'</div>

</div>’;

}

add_shortcode(‘collapse’, ‘xcollapse’);

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

短代码:

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

本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。如有需求,建议购买正版!如果源码侵犯了您的利益请留言告知!!
优质资源共享平台-811轩轩资源 » 如何为WordPress网站添加“点击展开/收缩”短代码?

发表评论