记录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]