WordPress美化教程-为文章内容页添加展开收缩功能

本文共1481个字,预计阅读时间需要4分钟 发布时间: 2021-12-19 共51人阅读

很多时候我们在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、可以优化一下代码,因为默认是靠左的,不好看,我们让他往中间一点显示,具体的距离可以自行调整。当然这一步忽略也是可以的。 在diy.css中添加以下代码:

.xControl {
    padding-left: 32px;
}

 

本站声明:
1. 本站所有资源来源于网络,分享目的仅供大家学习和交流! 2. 不得使用于非法商业用途,不得违反国家法律。否则后果自负! 3. 本站提供的资源,都不包含技术服务请大家谅解! 4. 如有链接无法下载、失效或广告,请联系站长处理!

再次声明:如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。


HI模板网 » WordPress美化教程-为文章内容页添加展开收缩功能

常见问题FAQ

本站下载资源解压密码是什么?
本站所有资源解压密码均为www.hmoban.com、www.huziy.com或者www.92luntan.com
免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
开通VIP 享更多特权,为了您的账户安全HI模板网建议您使用QQ登录!