子比主题美化教程

评论、搜索框打字粒子特效

使用方法

子比主题设置——全局&功能——自定义代码——自定义javascript代码

其实所有WP站点都可以用，直接复制就行，如果用在其他主题或者其他位置，记得加<script>标签。

代码如下

<!--彩色粒子特效-->
(function webpackUniversalModuleDefinition(a, b) {
    if (typeof exports === "object" && typeof module === "object") {
        module.exports = b()
    } else {
        if (typeof define === "function" && define.amd) {
            define([], b)
        } else {
            if (typeof exports === "object") {
                exports["POWERMODE"] = b()
            } else {
                a["POWERMODE"] = b()
            }
        }
    }
})(this, function() {
    return (function(a) {
        var b = {};
 
        function c(e) {
            if (b[e]) {
                return b[e].exports
            }
            var d = b[e] = {
                exports: {},
                id: e,
                loaded: false
            };
            a[e].call(d.exports, d, d.exports, c);
            d.loaded = true;
            return d.exports
        }
        c.m = a;
        c.c = b;
        c.p = "";
        return c(0)
    })([function(c, g, b) {
        var d = document.createElement("canvas");
        d.width = window.innerWidth;
        d.height = window.innerHeight;
        d.style.cssText = "position:fixed;top:0;left:0;pointer-events:none;z-index:999999";
        window.addEventListener("resize", function() {
            d.width = window.innerWidth;
            d.height = window.innerHeight
        });
        document.body.appendChild(d);
        var a = d.getContext("2d");
        var n = [];
        var j = 0;
        var k = 120;
        var f = k;
        var p = false;
        o.shake = true;
 
        function l(r, q) {
            return Math.random() * (q - r) + r
        }
        function m(r) {
            if (o.colorful) {
                var q = l(0, 360);
                return "hsla(" + l(q - 10, q + 10) + ", 100%, " + l(50, 80) + "%, " + 1 + ")"
            } else {
                return window.getComputedStyle(r).color
            }
        }
        function e() {
            var t = document.activeElement;
            var v;
            if (t.tagName === "TEXTAREA" || (t.tagName === "INPUT" && t.getAttribute("type") === "text")) {
                var u = b(1)(t, t.selectionStart);
                v = t.getBoundingClientRect();
                return {
                    x: u.left + v.left,
                    y: u.top + v.top,
                    color: m(t)
                }
            }
            var s = window.getSelection();
            if (s.rangeCount) {
                var q = s.getRangeAt(0);
                var r = q.startContainer;
                if (r.nodeType === document.TEXT_NODE) {
                    r = r.parentNode
                }
                v = q.getBoundingClientRect();
                return {
                    x: v.left,
                    y: v.top,
                    color: m(r)
                }
            }
            return {
                x: 0,
                y: 0,
                color: "transparent"
            }
        }
        function h(q, s, r) {
            return {
                x: q,
                y: s,
                alpha: 1,
                color: r,
                velocity: {
                    x: -1 + Math.random() * 2,
                    y: -3.5 + Math.random() * 2
                }
            }
        }
        function o() {
            var t = e();
            var s = 5 + Math.round(Math.random() * 10);
            while (s--) {
                n[j] = h(t.x, t.y, t.color);
                j = (j + 1) % 500
            }
            f = k;
            if (!p) {
                requestAnimationFrame(i)
            }
            if (o.shake) {
                var r = 1 + 2 * Math.random();
                var q = r * (Math.random() > 0.5 ? -1 : 1);
                var u = r * (Math.random() > 0.5 ? -1 : 1);
                document.body.style.marginLeft = q + "px";
                document.body.style.marginTop = u + "px";
                setTimeout(function() {
                    document.body.style.marginLeft = "";
                    document.body.style.marginTop = ""
                }, 75)
            }
        }
        o.colorful = false;
 
        function i() {
            if (f > 0) {
                requestAnimationFrame(i);
                f--;
                p = true
            } else {
                p = false
            }
            a.clearRect(0, 0, d.width, d.height);
            for (var q = 0; q < n.length; ++q) {
                var r = n[q];
                if (r.alpha <= 0.1) {
                    continue
                }
                r.velocity.y += 0.075;
                r.x += r.velocity.x;
                r.y += r.velocity.y;
                r.alpha *= 0.96;
                a.globalAlpha = r.alpha;
                a.fillStyle = r.color;
                a.fillRect(Math.round(r.x - 1.5), Math.round(r.y - 1.5), 3, 3)
            }
        }
        requestAnimationFrame(i);
        c.exports = o
    }, function(b, a) {
        (function() {
            var d = ["direction", "boxSizing", "width", "height", "overflowX", "overflowY", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth", "borderStyle", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "fontStyle", "fontVariant", "fontWeight", "fontStretch", "fontSize", "fontSizeAdjust", "lineHeight", "fontFamily", "textAlign", "textTransform", "textIndent", "textDecoration", "letterSpacing", "wordSpacing", "tabSize", "MozTabSize"];
            var e = window.mozInnerScreenX != null;
 
            function c(k, l, o) {
                var h = o && o.debug || false;
                if (h) {
                    var i = document.querySelector("#input-textarea-caret-position-mirror-div");
                    if (i) {
                        i.parentNode.removeChild(i)
                    }
                }
                var f = document.createElement("div");
                f.id = "input-textarea-caret-position-mirror-div";
                document.body.appendChild(f);
                var g = f.style;
                var j = window.getComputedStyle ? getComputedStyle(k) : k.currentStyle;
                g.whiteSpace = "pre-wrap";
                if (k.nodeName !== "INPUT") {
                    g.wordWrap = "break-word"
                }
                g.position = "absolute";
                if (!h) {
                    g.visibility = "hidden"
                }
                d.forEach(function(p) {
                    g[p] = j[p]
                });
                if (e) {
                    if (k.scrollHeight > parseInt(j.height)) {
                        g.overflowY = "scroll"
                    }
                } else {
                    g.overflow = "hidden"
                }
                f.textContent = k.value.substring(0, l);
                if (k.nodeName === "INPUT") {
                    f.textContent = f.textContent.replace(/\s/g, "\u00a0")
                }
                var n = document.createElement("span");
                n.textContent = k.value.substring(l) || ".";
                f.appendChild(n);
                var m = {
                    top: n.offsetTop + parseInt(j["borderTopWidth"]),
                    left: n.offsetLeft + parseInt(j["borderLeftWidth"])
                };
                if (h) {
                    n.style.backgroundColor = "#aaa"
                } else {
                    document.body.removeChild(f)
                }
                return m
            }
            if (typeof b != "undefined" && typeof b.exports != "undefined") {
                b.exports = c
            } else {
                window.getCaretCoordinates = c
            }
        }())
    }])
});
POWERMODE.colorful = true;
POWERMODE.shake = false;
document.body.addEventListener("input", POWERMODE);
<!--彩色粒子特效结束-->

新用户注册滚动播报

分享一段函数代码，挺简单的一个小功能，可以实现新用户注册滚动播报，有能力可以自行二次开发成小工具。

function DearLicy_notice() {    
    global $wpdb;    
    
    // 定义SQL查询来获取最新注册的十个用户    
    $sql = "SELECT ID, user_login, user_registered    
            FROM $wpdb->users    
            ORDER BY user_registered DESC    
            LIMIT 10";    //将10改为20则获取20个用户
    
    // 执行查询    
    $users = $wpdb->get_results($sql);    
    
    $slides = ''; // 初始化$slides变量，用于存储每个用户的HTML代码片段    
    
    // 遍历结果集并生成HTML代码    
    if ($users) {    
        foreach ($users as $user) {    
            $user_name = $user->user_login;    
            $avatar     = zib_get_avatar_box($user->ID, 'avatar-img avatar-mini mr6', false, true);
            $link     = zib_get_user_home_url($user->ID);
            $registration_date = date('Y-m-d H:i:s', strtotime($user->user_registered));  
  
            // 为每个用户生成一个swiper-slide  
            $slide = '<div class="swiper-slide notice-slide">';  
            $slide .= '<a class="text-ellipsis" href="'.$link.'">' . $avatar . $user_name . ' 在 ' . $registration_date . ' 加入了本站</a>';  
            $slide .= '</div>';  
  
            // 拼接每个用户的HTML代码片段  
            $slides .= $slide;  
        }    
    } 
  
    // 构建完整的HTML结构  
    $html = '<div class="swiper-bulletin c-red radius8">';  
    $html .= '<div class="new-swiper" data-interval="5000" data-direction="vertical" data-loop="true" data-autoplay="1">';  
    $html .= '<div class="swiper-wrapper">';  
    $html .= $slides; // 插入所有用户的HTML代码片段  
    $html .= '</div>';  
    $html .= '<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>';  
    $html .= '</div>';  
    $html .= '</div>';  
  
    return $html; // 返回生成的HTML代码    
}

想要在自己网站显示这个效果就自行二开成小工具或者在合适的文件位置输出函数代码。

例如在主题目录下的index.php文件main标签下方插入一行。

今日签到增加五彩缤纷的背景颜色

添加教程：zibll主题后台–自定义代码–自定义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;
    }
  }

禁止中文用户名注册

WordPress子比主题优化：注册时禁止使用中文用户名，我们可以通过禁止非英文数字注册，达到我们想要的效果。

在主题根目录下的func.php文件第一行写<?php换行插入下方的代码：

/*禁止非英文数字注册*/
function restrict_chinese_usernames($username) {
  $error_msgs = array();
    if (preg_match('/[^\x20-\x7F]/', $username)) {
       if ( empty( $error_msgs ) ) {
        $error_msgs[] = '仅允许字母数字作为用户名';
        }
    }
     if ( ! empty( $error_msgs ) ) {
        wp_send_json( array( 'error' => 1, 'msg' => $error_msgs ) );
    }
    return $username;
}
add_filter('sanitize_user', 'restrict_chinese_usernames', 10, 3);

代码也可以放在主题根目录下functions.php，效果是一样的。

粉色细节优化

给你的worpdress网站增加一个粉色果冻泡泡loading动画，经测试，这个动画特效会稍微拉低网站的访问速度。

增强视觉吸引力：粉色是一种温馨、甜美的颜色，可以给网站增添一份柔和、温暖的感觉，使得文章框更加引人注目。

提升用户体验：通过为文章框添加外框，可以使得文章内容更加突出，更容易被用户注意到。而粉色的外框则可以增加文章框的辨识度，使得用户在浏览网页时能够更快地找到所需的信息。

增加页面层次感：外框可以将文章框与其他页面元素区分开来，增加页面的层次感。粉色的外框可以作为一种视觉引导，帮助用户更好地理解页面结构。

体现品牌形象：如果网站的目标受众是年轻人群，那么粉色的外框可以更好地符合目标受众的审美需求，体现品牌的年轻、时尚、温馨的形象。

需要注意的是，设计元素的选择应根据网站的整体风格和定位来进行。粉色外框可能不适合所有类型的网站或文章内容，所以在实际应用中需要综合考虑自己更换喜欢的颜色。

将下方CSS放置于后台——自定义代码——自定义CSS内即可

/*粉色细节优化*/
.navbar-top .navbar-right .sub-menu {
    -webkit-box-shadow: 0 1px 4px 0 #FFD1D8 inset;
    -moz-box-shadow: 0 1px 4px 0 #FFD1D8 inset;
    box-shadow: inset 0 1px 4px 0 #FFD1D8;
}
.posts-item.card{
    -webkit-box-shadow: 0 1px 4px 0 #FFD1D8 inset;
    -moz-box-shadow: 0 1px 4px 0 #FFD1D8 inset;
    box-shadow: inset 0 1px 4px 0 #FFD1D8;
}
.zib-widget{
    -webkit-box-shadow: 0 1px 4px 0 #FFD1D8 inset;
    -moz-box-shadow: 0 1px 4px 0 #FFD1D8 inset;
    box-shadow: inset 0 1px 4px 0 #FFD1D8;
}
.plate-lists .plate-item{
    -webkit-box-shadow: 0 1px 4px 0 #FFD1D8 inset;
    -moz-box-shadow: 0 1px 4px 0 #FFD1D8 inset;
    box-shadow: inset 0 1px 4px 0 #FFD1D8;
}
.forum-posts{
    -webkit-box-shadow: 0 1px 4px 0 #FFD1D8 inset;
    -moz-box-shadow: 0 1px 4px 0 #FFD1D8 inset;
    box-shadow: inset 0 1px 4px 0 #FFD1D8;
}
.article{
    -webkit-box-shadow: 0 1px 4px 0 #FFD1D8 inset;
    -moz-box-shadow: 0 1px 4px 0 #FFD1D8 inset;
    box-shadow: inset 0 1px 4px 0 #FFD1D8;
}
.radius8{
    -webkit-box-shadow: 0 1px 4px 0 #FFD1D8 inset;
    -moz-box-shadow: 0 1px 4px 0 #FFD1D8 inset;
    box-shadow: inset 0 1px 4px 0 #FFD1D8;
}

导航菜单添加彩色渐变的文字

以下代码放到菜单

<span class="meihua">你的菜单名称</span>

以下代码放入css样式

.meihua {
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 33.3%, rgba(252, 176, 69, 1) 66.6%, rgba(131, 58, 180, 1) 100%);
-webkit-background-clip: text;
color: transparent !important;
background-size: 300% 100%;
animation: text 4s infinite linear
}
@media (max-width:768px) {
span.ua-info {
display: none
}
.comment-author .user-title {
width: 40% !important
}
}
.comment-author .user-title {
font-size: 13px;
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 33.3%, rgba(252, 176, 69, 1) 66.6%, rgba(131, 58, 180, 1) 100%);
-webkit-background-clip: text;
color: transparent !important;
background-size: 300% 100%;
animation: text 4s infinite linear
}
@keyframes text {
0% {
background-position: 0 0
}
100% {
background-position: -150% 0
}
}
.b2-qr-code-fill {
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 33.3%, rgba(252, 176, 69, 1) 66.6%, rgba(131, 58, 180, 1) 100%);
-webkit-background-clip: text;
color: transparent !important;
background-size: 300% 100%;
animation: text 4s infinite linear
}

纯代码实现未登录时图片高斯模糊显示

将以下提供的代码添加到主题根目录下的 functions.php 中

//未登录时全站图片模糊
function n_yingcang_css(){
echo '<style>
img {
-webkit-filter: blur(10px)!important;
-moz-filter: blur(10px)!important;
-ms-filter: blur(10px)!important;
filter: blur(6px)!important;}
</style>';
}
if( !is_user_logged_in()) {add_action( 'wp_head', 'n_yingcang_css' );};
//未登录时全站图片模糊

👋 感谢您的观看！

版权声明 1、文章版权归作者所有，未经允许请勿转载。
2、本站所有文章，如无特殊说明或标注，均为本站原创发布。任何在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们邮箱：526009505@qq.com进行处理。
3、咨询请联系QQ：526009505

THE END

产品项目
# WordPress

子比主题美化教程

评论、搜索框打字粒子特效

新用户注册滚动播报

今日签到增加五彩缤纷的背景颜色

禁止中文用户名注册

粉色细节优化

导航菜单添加彩色渐变的文字

纯代码实现未登录时图片高斯模糊显示

DuckDuckGo搜索引擎使用方法

网站出现403 Forbidden错误原因以及解决方法

欢迎关注[鹿泽笔记]微信公众号

优良中差五个等级是怎么分的？

小红书营销策略流量分发逻辑（CES评分流量分发模型）解析

深圳SEO优化技术如何对博客网站进行调整

seo网页排名下降的原因是什么？

自媒体平台图片尺寸汇总

1688关键词优化四大步骤，1688怎么优化产品排名？

视频直播切片剪辑软件哪个好用？