WordPress子比主题美化教程合集

CSS 代码：

/* 主题logo扫光 */
.navbar-brand {
    position: relative;
    overflow: hidden;
    margin: 0px 0 0 0px;}

.navbar-brand:before {
    content: "";
    position: absolute;
    left: -665px;
    top: -460px;
    width: 200px;
    height: 15px;
    background-color: rgba(255, 255, 255, .5);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: searchLights 6s ease-in 0s infinite;
    -o-animation: searchLights 6s ease-in 0s infinite;
    animation: searchLights 6s ease-in 0s infinite;}

@-moz-keyframes searchLights {
    50% {left: -120px;top: 0;}
    65% {left: 350px;top: 0px;}}

@keyframes searchLights {
    40% {left: -120px;top: 0;}
    60% {left: 350px;top: 0px;}
    80% {left: -120px;top: 0px;}}
/* 主题logo扫光 */

CSS 代码：

/* 文章缩略图动态图标 */
.item-thumbnail:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    transition: background .35s;
    border-radius: 8px;
    z-index: 2;
    max-width: 765px;
    margin: 0 auto;
    pointer-events: none;}

.item-thumbnail:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    background: url(图标链接);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 3;
    -webkit-transform: scale(2);
    transform: scale(2);
    transition: opacity .35s, -webkit-transform .35s;
    transition: transform .35s, opacity .35s;
    transition: transform .35s, opacity .35s, -webkit-transform .35s;
    opacity: 0;
    pointer-events: none;}

.item-thumbnail:hover:before {
    background: rgba(0, 0, 0, .5)}

.item-thumbnail:hover:after {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1}
/* 文章缩略图动态图标 */

CSS 代码：

/* 文章标题渐变彩色文字 */
.pink {background-color: #777777 !important;}

@media screen and (min-width: 680px) {
    .joe_div {
        background: url(https://cdn.7uun.com/bq.png) right 10px bottom 10px no-repeat;
        background-size: 12%;}}

.joe_div {
    color: #989898;
    word-break: break-all;
    line-height: 25px;
    border-radius: 10px;
    border: 1px solid #777777;
    padding: 28px 14px 14px 14px;}

.item-heading :hover,
.text-ellipsis :hover,
.text-ellipsis-2 :hover,
.links-lists :hover {
    background-image: -webkit-linear-gradient(30deg, #32c5ff 25%, #b620e0 50%, #f7b500 75%, #20e050 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation: maskedAnimation 4s infinite linear;}

@keyframes maskedAnimation {
    0% {background-position: 0 0}
    100% {background-position: -100% 0}}
/* 文章标题渐变彩色文字 */

CSS 代码：

/* 昵称流彩字体效果 */
.display-name {
    background-image: -webkit-linear-gradient(90deg, #07c160, #fb6bea 25%, #3aedff 50%, #fb6bea 75%, #28d079);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-size: 100% 600%;
    animation: wzw 10s linear infinite;}

@keyframes wzw {
    0% {background-position: 0 0;}
    100% {background-position: 0 -300%;}}
/* 昵称流彩字体效果 */

CSS 代码：

/* 昵称抖音故障风格 */
.display-name {
    text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
    animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);}

@keyframes shake-it {
    0% {text-shadow: 0 0 rgba(0, 255, 255, .5), 0 0 rgba(255, 0, 0, .5);}
    25% {text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);}
    50% {text-shadow: -5px 0 rgba(0, 255, 255, .5), 3px 0 rgba(255, 0, 0, .5);}
    100% {text-shadow: 3px 0 rgba(0, 255, 255, .5), 5px 0 rgba(255, 0, 0, .5);}}
/* 昵称抖音故障风格 */

CSS 代码：

/* 网站底部二维码跑马灯 */
.footer-miniimg {
    p {position: relative;
        &:hover {filter: contrast(1.1);}
        &:active {filter: contrast(0.9);}
        &::before,
        &::after {
            content: "";
            border: 2px solid;
            border-image: linear-gradient(45deg, gold, deeppink) 1;
            position: absolute;
            top: -5px;
            left: -5px;
            right: -5px;
            bottom: -5px;
            animation: clippath 3s infinite;}
        &::before {animation: clippath 3s infinite -1.5s linear;}}}

@keyframes clippath {
    0%,
    100% {clip-path: inset(0 0 96% 0);filter: hue-rotate(0deg);}
    25% {clip-path: inset(0 96% 0 0);}
    50% {clip-path: inset(96% 0 0 0);filter: hue-rotate(360deg);}
    75% {clip-path: inset(0 0 0 96%);}}
/* 网站底部二维码跑马灯 */

CSS 代码：

/* 禁止拖动网站图片 */
   img {-webkit-user-drag: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;}
/* 禁止拖动网站图片 */

CSS 代码：

/* 文章图片圆角 */
.wp-posts-content img {border-radius: 13px};
/* 文章图片圆角 */

CSS 代码：

/* 列表Mini版缩略图 */
.posts-item .item-thumbnail {
    width: 150px;
}
/* 列表Mini版缩略图 */

CSS 代码：

/* 隐藏文章底部分类和标签 */
.article-tags{
    display:none;
}
/* 隐藏文章底部分类和标签 */

两种 JS 代码选择一个粘贴到 子比主题设置 - 全局功能 - 自定义代码 - 自定义javascript代码

JS 代码

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('a[href*="?golink="]').forEach(link => {
        link.target = '_blank';
    });
});

window.onload = function() {
    var links = document.getElementsByTagName('a');
    for (var i = 0; i < links.length; i++) {
        if (links[i].href.includes('?golink=')) {
            links[i].setAttribute('target', '_blank');
        }
    }
};