WordPress主题添加点击展开/收缩短代码功能
我们在写博客文章的时候经常会有很长篇幅内容,特别是技术类文章经常需要很多补充资料,但是如果将这些补充资料都一一列出来的话,页面反而会变得很长,用户体验效果不好。下面码云笔记就来教大家如何为 WordPress 主题添加“点击展开/收缩” 短代码功能,让一些部分内容可以优先隐藏起来,重点内容优先展示给用户,让你的网页在更加丰富的同时,也更加的简洁清晰!也方便用户的浏览体验,岂不完美。
步骤一:
首先将以下 JS 代码加入至你网站所引用的 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主题添加点击展开/收缩短代码功能
码云笔记 » WordPress主题添加点击展开/收缩短代码功能