大家可能在 WordPress 中写文章中经常需要很多补充资料,但是如果将这些补充资料都一一列出来的话,页面反而会变得很长,搜索了大量资料测试无数次后终于实现了此功能,下面就来教大家如何为 WordPress 添加“点击展开/收缩” 【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 style="margin: 0.5em 0;">
- <div class="xControl">
- <span class="xTitle">’.$title.‘</span>
- <a href="javascript:void(0)" class="collapseButton xButton">展开/收缩</a>
- <div style="clear: both;"></div>
- </div>
- <div class="xContent" style="display: none;">’.$content.‘</div>
- </div>’;
- }
- add_shortcode(‘collapse’, ‘xcollapse’);
- /* 为WordPress添加“点击展开/收缩”功能结束(由创客源码制作) */
短代码:
现在我们可以直接在文章中插入[collapse title="标题"]需点击展开的内容[/collapse]
就可以使用本功能啦
文章标题:为WordPress添加“点击展开/收缩”短代码 功能
文章链接:https://www.wuyanshuo.cn/843.html
更新时间:2022年05月27日
本站大部分内容均收集于网络!若内容若侵犯到您的权益,请发送邮件至:service@wuyanshuo.cn我们将第一时间处理!
资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持。
所有资源仅限于参考和学习,版权归原作者所有,更多请阅读无言说网络服务协议。