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

这个功能想必都知道，下面直接说教程吧，如想看效果请前往 歪迪·歪分享

实现方式：

1.首先将以下JS代码加入至你网站所引用的JS文件(公共JS文件)

或者新建一个js文件，然后粘贴以下代码，header.php文件中引入。

// 文字展开
// https://www.waizhuti.com/1072.html
$('.collapseButton').click(function() {
        $(this).next('.xContent').slideToggle('slow');
        if ($(this).hasClass('yes')) {
            $(this).removeClass('yes');
            $(this).addClass('no');
        } else {
            $(this).removeClass('no');
            $(this).addClass('yes');
        }
    });

2.然后将下方代码添加到 function.php 的最底部?>之前

// 文字展开
// https://www.waizhuti.com/1072.html
function xcollapse($atts, $content = null){
    extract(shortcode_atts(array("title"=>""),$atts));
    return '<div>
        <div class="collapseButton yes">
            <a href="javascript:void(0)">
                <i class="fa fa-angle-double-right"></i>&nbsp'.$title.'
            </a>
        </div>
        <div class="xContent" style="display: none; padding:0 13px;">'.$content.'</div>
        </div>';
}
add_shortcode('collapse', 'xcollapse');
// 短代码按钮-文字展开 
add_action('after_wp_tiny_mce', 'Icollapse' );
      function Icollapse() {
      ?>
      <script type="text/javascript">
          QTags.addButton( 'collapse', '展开/收缩按钮', '【collapse title="折叠内容标题"】\n这里填写需要折叠的东西\n【/collapse】\n',"" );//这里在使用的时候把括号改成英文的！
      </script>
      <?php }

3.最后为该按钮引入CSS样式

直接将以下CSS代码加入到style.css文件中。

/*文章展开短代码样式*/
.collapseButton{
    margin: 5px 0;
}
.collapseButton:hover{
    padding: 0 13px;
}
.collapseButton,.collapseButton a{
    color: #07630e;
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
    transition: all .5s linear;
}
.collapseButton:hover a{
    color: #ff0000;
    border-bottom: 1px dotted #ddd;
}
.collapseButton.yes:before {
    content: "\f0fe    展开";
    display: inline-block;
    font-family: FontAwesome;
    color: #07630e;
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
    transition: all .5s linear;
}
.collapseButton.no:before {
    content: "\f146    收缩";
    display: inline-block;
    font-family: FontAwesome;
    color: #07630e;
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
    transition: all .5s linear;
}