（WordPress教程）纯代码实现文章页添加展开/收缩功能

正文：

在 WordPress 上发布文章时，经常会包含大量代码。我个人不喜欢将代码压缩在一起，而是喜欢以格式化的方式展示代码。然而，格式化显示会导致文章内容变得很长，不方便访问者浏览。因此，今天我要介绍一种可以展开/收缩文章内容的功能。

效果图展示：

方法：

1.在 header.php 中添加下面的代码，或者也可以单独写进一个 js 文件中然后在 header.php 中引入也可以。我是引入的。

<script type="text/javascript">
    jQuery(document).ready(function(jQuery) {
        jQuery('.collapseButton').click(function() {
            jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
        });
    });
</script>

2.在 function.php 中加入下面的代码：

//展开收缩功能
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');

3.为了让显示效果更美观，我们可以对代码进行优化，使其居中显示。具体的距离可以根据需要进行调整。当然，如果忽略这一步也是可以的。
在style.css文件中添加以下代码：

 .xControl {
    padding-left: 32px;
}  

4.现在，我们可以在文章中插入短代码来使用此功能了。
[@collapse title=”标题”]需点击展开的内容[/@collapse]

其中，title 是可选的提示内容，您也可以省略不写。记住把@号去掉。

本文章已结束，如转载请注明：汇站网 » （WordPress 教程）纯代码实现文章页添加展开/收缩功能