WordPress美化教程

2021-03-08 0 110

许多时刻我们在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;
}

 

 

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

一直被模仿,从未被超越!

常见问题
  • 本站所有源码都是通过互联网采集而来,不保证源码得完整性和可用性,如果介意请勿购买!
查看详情
  • 本站源码不提供任何服务帮助。本站只是提供源码,不提供服务帮助!
查看详情

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务