记录WordPress全文收缩阅读全文实现策略（点击展开）

老蒋看到不少的网友博客内容页较长的话会通过阅读全文的方式展开，通过JS展开的全文内容，体验度上比较好，比如我们看到的CSDN也是有这样的实现的。这里我先把过程记录下来，等我晚上在测试环境中测试没有问题再添加到网站中。不过有些WP网站主题是自带的，那就比较简单，而我这个主题不自带。

1、JS部分

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

我们可以添加这个JS到头部或者全局引用。

2、功能代码

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

功能部分添加到Functions.php中。

3、CSS样式部分

.xControl {
    padding-left: 32px;
}

可以根据需要调整样式包括按钮样式。

4、调用方法

[collapse title="标题"]需点击展开的内容[/collapse]

这里可以在需要隐藏的位置包含到代码中。

参考地址：https://www.cnblogs.com/shenjieblog/p/5061366.html

本文出处：老蒋部落 » 记录WordPress全文收缩阅读全文实现策略（点击展开） | 欢迎分享（ 公众号：老蒋朋友圈 ）