🎉 恭喜你发现了宝藏!

WordPress子比美化教程(持续更新中) 25/12/19更新

文章最后更新时间:2025-12-21 00:58:26

子比主题设置—自定义CSS样式,添加下面的CSS代码:

textarea#comment {background-color:transparent;background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(图片链接) right 10px bottom 10px no-repeat;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;}
textarea#comment:focus {background-position-y:789px;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;}

图片自己保存到本地,图片大小(162 X 75,建议透明的png图片),自己添加喜欢的背景图片。

效果

图片[1] - WordPress子比美化教程(持续更新中) 25/12/19更新 - 诺守博客
图片[2] - WordPress子比美化教程(持续更新中) 25/12/19更新 - 诺守博客

将下面代码放到子比主题-自定义CSS样式里面即可

/*文章随机彩色标签*/
.widget-tag-cloud.fixed-width .but:hover{opacity: 1;}.widget-tag-cloud.fixed-width .but{opacity: 0.6;line-height: 20px !important;padding: 4px 10px !important;font-size: 12px !important;}.widget-tag-cloud.fixed-width .but:nth-child(5n){background-color: #4A4A4A;color: #FFF}.widget-tag-cloud.fixed-width .but:nth-child(5n+1){background-color: #ff5e5c;color: #FFF}.widget-tag-cloud.fixed-width .but:nth-child(5n+2){background-color: #ffbb50;color: #FFF}.widget-tag-cloud.fixed-width .but:nth-child(5n+3){background-color: #1ac756;color: #FFF}.widget-tag-cloud.fixed-width .but:nth-child(5n+4){background-color: #19B5FE;color: #FFF}
图片[3] - WordPress子比美化教程(持续更新中) 25/12/19更新 - 诺守博客

将下面代码放到子比主题设置=>>文章列表=>>文章页面=>>在文章内容后-插入内容

<div class="shangye">本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负!</div>

将下面的代码放到自定义CSS即可实现

.shangye {
    color: #fff;
    background: #5282f7 url(https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01BCJh7X1QbIi6fiBx8_!!2210123621994.png) 3px 7px no-repeat;
    border: 1px solid #5282f7;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 50px;
    border-radius: 4px;
}
图片[4] - WordPress子比美化教程(持续更新中) 25/12/19更新 - 诺守博客

如果要每个页面显示,将代码放入footer.php文件即可

<style>@keyframes shangxa {

    0%,
    100%,
    20%,
    50%,
    80% {
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
        transform: translate3d(0, 0, 0);
    }

    40%,
    43% {
        transition-timing-function: cubic-bezier(0.755, 0.50, 0.855, 0.060);
        transform: translate3d(0, -10px, 0);
    }

    70% {
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translate3d(0, -6px, 0);
    }

    90% {
        transform: translate3d(0, -3px, 0);
    }
}

.leke {
    display: flex;
    position: fixed;
    left: 0;
    top: calc(50% - 103px);
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 5px 6px -4px, rgba(13, 206, 158, .37) 0px 6px 10px;
    z-index: 10;
    overflow: hidden;
    background: #0dce9e;
    padding: 12px 8px 12px 5px;
    border-radius: 0 14px 14px 0;
    transition: height 0.2s ease 0s, top 0.2s ease 0s;
}

.leke:hover {
    opacity: .8;
}

.leke .upload-icon {
    flex-shrink: 0;
    width: 28px;
    height: auto;
    display: block;
    margin-bottom: 2px;
    -webkit-animation: shangxa 2s infinite;
    animation: shangxa 2s infinite;
}

@media screen AND (max-width: 768px) {
    .leke {
        display: none;
    }
}

#qidiana {
    cursor: pointer;
}

.class_qidian_wpa {
    border-radius: 6px !important;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
}

</style>

<a href="http://wpa.qq.com/msgrd?v=3&uin=8442606&site=qq&menu=yes" target="_blank">
    <div id="qidiana" class="leke"><svg t="1599210542874" class="upload-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16321" width="30" height="30">
            <path d="M224.99 512a287.01 287.01 0 1 0 574.02 0 287.01 287.01 0 1 0-574.02 0z" fill="#FFDA33" p-id="16322"></path>
            <path d="M659.18375 635.7275c5.61375-6.55875 3.74625-16.86375-2.82375-22.5-6.5475-5.61375-16.86375-3.735-22.48875 2.82375-33.75 37.485-70.30125 55.305-121.86 55.305-51.55875 0-84.375-14.0625-121.87125-55.305-5.625-6.57-15.94125-8.4375-22.5-2.82375-6.57 5.63625-8.4375 15.94125-2.8125 22.5 44.055 49.69125 85.30875 68.43375 147.18375 68.43375 61.86375 0 107.7975-22.48875 147.1725-68.43375zM390.15125 469.8125v-56.25c0-14.99625-12.18375-28.125-28.125-28.125-14.99625 0-28.11375 12.18375-28.11375 28.125v56.25c0 14.99625 12.1725 28.125 28.11375 28.125 14.99625 0 28.125-12.18375 28.125-28.125z m494.94375-59.0625c-42.1875-170.6175-193.10625-297.1575-373.08375-297.1575-179.98875 0-330.9075 126.54-373.10625 297.1575-45 16.875-76.87125 66.555-76.87125 124.68375 0 66.56625 42.1875 121.86 97.4925 130.30875 0 0 0 0.93375 0.945 0.93375h62.80875a339.87375 339.87375 0 0 1-39.375-159.3675c0-186.5475 147.18375-337.4775 328.10625-337.4775s328.08375 150.93 328.08375 337.4775c0 125.60625-66.54375 234.36-165.915 292.48875A54.9 54.9 0 0 0 661.0625 797.91875c-30.9375 0-56.25 25.30125-56.25 56.2275 0 30.94875 25.3125 56.26125 56.25 56.26125 30.92625 0 56.23875-25.3125 56.23875-56.26125 0-4.68-0.93375-9.36-1.87875-13.10625 64.6875-42.1875 117.18-103.12875 148.12875-175.2975 55.29375-9.39375 98.415-63.7425 98.415-130.30875 0-58.12875-32.81625-107.80875-76.87125-124.68375z m-194.985 59.0625v-56.25c0-14.99625-12.18375-28.125-28.11375-28.125-15.0075 0-28.125 12.18375-28.125 28.125v56.25c0 14.99625 12.18375 28.125 28.125 28.125 14.99625 0 28.11375-12.18375 28.11375-28.125z" fill="#515151" p-id="16323" data-spm-anchor-id="a313x.7781069.0.i0" class=""></path>
        </svg><span>联</span><span>系</span><span>站</span><span>长</span></div>
</a>
图片[6] - WordPress子比美化教程(持续更新中) 25/12/19更新 - 诺守博客

子比主题设置–>>自定义代码–>>自定 CSS 代码,把下面的 css 代码复制粘贴到里面即可,里面的 8px 大小可自行调节,颜色代码#63B8FF 也可自行设置

/*鼠标移动图片外发光*/
.wp-posts-content img:hover {
box-shadow:0px 0px 8px #63B8FF;
}
图片[8] - WordPress子比美化教程(持续更新中) 25/12/19更新 - 诺守博客

直接将下面代码放到自定义CSS即可!

body::before {
            background-image: linear-gradient(90deg, rgba(60, 10, 30, .04) 3%, transparent 0), linear-gradient(1turn, rgba(60, 10, 30, .04) 3%, transparent 0);
            background-size: 20px 20px;
            background-position: 50%;
            background-repeat: repeat;
}
图片[10] - WordPress子比美化教程(持续更新中) 25/12/19更新 - 诺守博客

将代码放到自定义CSS里面即可!!

1 2 3 4 5

© 版权声明
THE END
点赞900赞赏 分享
评论 共1条

请登录后发表评论