WordPress子比主题美化教程合集（持续更新中）

将下面的代码放到：子比主题–>>自定义CSS样式即可！

::selection {
    background: transparent;
    color:#0045FF;
}

将下面的代码放到：子比主题–>>自定义CSS样式即可！

.navbar-top .sub-menu,.theme-popover{background:linear-gradient(135deg,#ffffffb0 35%,#ffffffb0 100%);backdrop-filter:saturate(5) blur(20px)}

将下面的代码放到：子比主题–>>自定义CSS样式即可！

.user-avatar .avatar-img, .img-ip:hover, .w-a-info img {
   -webkit-animation: swing 3s .4s ease both;
   -moz-animation: swing 3s .4s ease both;
}
@-webkit-keyframes swing {
   20%, 40%, 60%, 80%, 100% {
       -webkit-transform-origin:top center
   }
   20% {
       -webkit-transform:rotate(15deg)
   }
   40% {
       -webkit-transform:rotate(-10deg)
   }
   60% {
       -webkit-transform:rotate(5deg)
   }
   80% {
       -webkit-transform:rotate(-5deg)
   }
   100% {
       -webkit-transform:rotate(0deg)
   }
}
@-moz-keyframes swing {
   20%, 40%, 60%, 80%, 100% {
       -moz-transform-origin:top center
   }
   20% {
       -moz-transform:rotate(15deg)
   }
   40% {
       -moz-transform:rotate(-10deg)
   }
   60% {
       -moz-transform:rotate(5deg)
   }
   80% {
       -moz-transform:rotate(-5deg)
   }
   100% {
       -moz-transform:rotate(0deg)
   }
}

自定义代码–自定义CSS样式添加下面的CSS代码：

/*加点颜色加点料*/
.user-ranking-item.relative {
    background: #ffd1d8;
    border-radius: var(--main-radius);
}  
  
.user-ranking-item.relative:nth-child(1) {  
    background: #ffd1d8;  
}  
  
.user-ranking-item.relative:nth-child(2) {  
    background: #ffa50085;  
}  
  
.user-ranking-item.relative:nth-child(3) {  
    background: #ffff0080;  
}  
  
.user-ranking-item.relative:nth-child(4) {  
    background: #98ff0073;  
}  
  
.user-ranking-item.relative:nth-child(5) {  
    background: #c4cffa;  
}  
  
.user-ranking-item.relative:nth-child(6) {  
    background: #c97eff75;  
}  
  
.user-ranking-item.relative:nth-child(7) {  
    background: #82eee782;  
}  
  
.user-ranking-item.relative:nth-child(8) {  
    background: #ff559480;  
}  
  
.user-ranking-item.relative:nth-child(9) {  
    background: #089e0f7d;  
}

.enlighter-default .enlighter{max-height:400px;overflow-y:auto !important;}.posts-item .item-heading>a {font-weight: bold;color: unset;}.lazyloaded{--lazy-animation: lazy_fade;}@media (max-width:640px) {
    .meta-right .meta-view{
      display: unset !important;
    }
  }

javascript代码：

//复制提示
document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处！',showConfirmButton: false,timer: 2000});};

子比主题设置—>自定义代码—>自定义底部HTML代码,添加以下代码：

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

CSS代码：

/*进度条加载显示*/
#percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #339933,#FF6666);border-radius:5px;}

javascript代码：

//进度条加载显示
$(window).scroll(function() {
    var a = $(window).scrollTop(),
    c = $(document).height(),
    b = $(window).height();
    scrollPercent = a / (c - b) * 100;
    scrollPercent = scrollPercent.toFixed(1);
    $("#percentageCounter").css({
        width: scrollPercent + "%"
    });
}).trigger("scroll");

在主题目录header.php中，添加以下代码，放在body标签下（最后一行）

<div id="percentageCounter"></div>

在自己网站主题的CSS中加入以下代码：

.fa-spin {
    animation: 2s linear 0s normal none infinite running fa-spin;
}

在Wordpress后台，将“fa-spin”添加到菜单中要旋转的图标代码的“class”中。

<svg class="icon fa-spin" aria-hidden="true"><use xlink:href="#iconziyuan"></use></svg> 文章分类

1、后台主题设置—>自定义代码—>自定义 CSS 样式代码把下面的代码添加到里面

/*左边联系站长 css 开始*/
.contact-help{position: fixed; z-index: 101; left: 0; top: calc(50% - 30px); margin-top: -36px; width: 28px; height: 72px; transition: all .3s; font-size: 12px;background: var(--main-bg-color);border-radius: 0 5px 5px 0; padding: 8px 7px; line-height: 14px;}@media screen and (max-width: 768px){.contact-help{display:none;}}
/*左边联系站长 css 开始*/

2、在主题目录下 themes/zibll/footer.php 下，添加下面的 PHP 代码：

PHP 代码：

<!--左侧联系站长-->
<a href="http://wpa.qq.com/msgrd?v=3&uin=12345678&site=qq&menu=yes" target="_blank" class="contact-help main-shadow"  style="font-weight:700;" />联系站长</a>