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>
<div class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”xControl\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”>
<span class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”xTitle\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”>\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’.$title.\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'</span>
<a href=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”https://www.wpzt.net/javascript:void(0)\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\” class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”collapseButton xButton\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”>展开/收缩</a>
<div></div>
</div>
<div class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”xContent\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”>\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’.$content.\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'</div>
</div>\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’;
}
add_shortcode(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’collapse\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’xcollapse\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’);
/* 为 WordPress 添加“点击展开/收缩”功能结束(由创客源码制作) */
短代码:
现在我们可以直接在文章中插入[-collapse title=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”标题\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”]需点击展开的内容[-/collapse]就可以使用本功能啦 (填写简码时其中 – 删除)!