传递价值资讯
SocialMedia运营解决方案

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

大家可能在WordPress中写文章中经常需要很多补充资料,但是如果将这些补充资料都一一列出来的话,页面反而会变得很长,嗯哌搜索了大量资料测试无数次后终于实现了此功能,下面就来教大家如何为WordPress添加“点击展开/收缩” 【collapse】 短代码功能,让你的网页在更加丰富的同时,也更加的简洁清晰!

预览

[collapse title=”“点击展开”预览”]嗯哌,传递价值资讯;SocialMedia运营解决方案。[/collapse]

教程

1丶首先将以下JS代码加入至你网站所引用的JS文件内(例如“main.js”等):

/* 为网站添加“点击展开/收缩”功能开始 */
jQuery(document).ready(
function(jQuery){
jQuery('.collapseButton').click(function(){
jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
});
});
/* 为网站添加“点击展开/收缩”功能结束 */

2丶然后将下方代码添加到“模板函数 (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添加“点击展开/收缩”功能结束 */

3丶现在我们可以直接在文章中插入 【collapse title="标题"】需点击展开的内容【/collapse】 将【】替换成[]就可以使用本功能啦!

赞(1) 打赏
文章由小哌编辑,资料来源于网络,如需转载请载明出处:嗯哌网 » 为WordPress添加“点击展开/收缩”短代码功能
分享到: 更多 (0)

评论 3

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    没找到能加 js 的地方

    zxc1213年前 (2015-08-10)回复
    • 嗯哌

      就放到JS文件最后就行

      嗯哌3年前 (2015-08-10)回复
  2. #2

    really great points

    HaroldSuism2年前 (2017-01-05)回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏