对文章内容进行折叠

发布于 2020-05-02  14 次阅读


刚刚发布了一个博客,但是聊天记录太长了…占据了很大一个篇幅

所以我就弄到了这样的代码 https://dedewp.com/2262.html

1 在主题文件夹目录内的footer.php文件内</body>标签前添加如下代码

<script>jQuery(document).ready(

    function(jQuery){

    jQuery('.collapseButton').click(function(){

        jQuery(this).parent().parent().find('.xContent').slideToggle('slow');

    });

});</script>

在主题文件夹目录内的functions.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');

在文章需要折叠的地方添加如下代码

{collapse title="标题"}需点击展开的内容{/collapse}

将上述代码中的{}分别替换为[]

效果:

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


若金色的阳光停止了它耀眼的光芒,你的一个微笑,将照亮我的整个世界