为 WordPress 添加“点击展开/收缩”短代码 [collapse] 功能
     2016-4-21    +0°    1242  

大家可能在WordPress中写文章中经常需要很多补充资料,但是如果将这些补充资料全部都一一列出来,页面反而会变得很累赘…所以BT天堂就来给大家说下如何给WordPress添加“点击展开/收起” 【collapse】短代码功能,让你的网页在更加丰富的同时,也更加的简洁清晰!

预览

教程

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

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

// 文字展开
$('.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 的最底部?>之前

// 文字展开
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;
}

 

使用

现在我们可以直接在文章中插入【collapse title=“标题”】需点击展开的内容【/collapse】(注意使用半角符号)就可以使用本功能啦。

再次预览