纯代码实现WordPress文章页展开折叠功能
 doctorrm      2019-02-23 00:14:17      103      0      

在WordPress中,有时候我们需要将部分过长的内容折叠起来,方便阅读,这时候可以按下面的步骤操作:

1.将以下代码添加到你主题header.php文件的<body>里面

// 添加文章页展开折叠JS效果
<script type="text/javascript">
    jQuery(document).ready(
        function(jQuery){
            jQuery('.collapseButton').click(
                function(){
                    jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
                }
            );
        }
    );
</script>

2.编辑主题functions.php文件

将一下代码添加到你主题的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><i class="fa fa-plus-square" aria-hidden="true"></i><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.至此,你就可以通过使用下面的短代码在编辑文章时为文章内容添加“展开/折叠”按钮了。

<!--展开/折叠功能短代码:(记得将中文中括号换成英文的)-->
【collapse title="说明文字"]需点击展开的内容[/collapse】
说明文字展开/折叠
去打赏

您的支持将鼓励我们继续创作!

[微信] 扫描二维码打赏

[支付宝] 扫描二维码打赏

正在跳转到PayPal...

发表评论