Zibll子比主题搜索框打字粒子特效教程：两种实现方法

本文介绍两种为子比主题搜索框添加打字粒子特效的方法：一是通过安装 Zibll Add-ons 美化插件 快速实现；二是通过手动添加 自定义 JavaScript 代码 实现。两种方法均无需修改主题核心文件，升级主题时效果不会丢失。

适用人群：使用 Zibll 子比主题并希望为搜索框增加动态视觉特效的 WordPress 站长

Zibll子比主题搜索框打字粒子特效教程

核心价值：通过插件或代码方式，为网站搜索框添加打字粒子特效，提升交互体验和视觉吸引力。

操作前准备

在开始配置之前，需要先确认以下几点：

无需修改主题文件：两种方法均通过插件或主题后台的自定义代码实现，升级主题时效果不会丢失。
操作入口：
- 插件法：WordPress 后台 → 「插件」→「安装插件」
- 代码法：WordPress 后台 → 「Zibll子比主题」→「主题设置」→「全局&功能」→「自定义代码」→「自定义JavaScript代码」
适用范围：代码法不仅适用于子比主题，所有 WordPress 站点都可以使用。如果用在其他主题或其他位置，记得在代码外面加上 <script> 标签。
备份建议：在添加任何自定义代码前，建议先备份网站。

方法一：使用 Zibll Add-ons 美化插件（推荐）

如果你希望更便捷地实现粒子特效，可以使用专为子比主题开发的美化插件 Zibll Add-ons。

插件介绍

Zibll Add-ons 是一款为子比主题打造的美化插件，其中包含了 《粒子特效》背景组件，可以快速为网站的搜索框或页面添加粒子效果。插件还提供了《轻论坛同款动态背景》《点击点击彩色粒子掉落》等其他美化组件。

安装步骤

下载插件：获取 Zibll Add-ons 插件压缩包（zibll_Add_ons.zip）。
上传插件：登录 WordPress 后台，进入 「插件」→「安装插件」。
上传并安装：点击 「上传插件」，选择下载的插件压缩包并上传。
启用插件：安装完成后，点击 「启用插件」。
配置粒子特效：插件激活后，在插件配置界面中找到 《粒子特效》 组件，启用并保存设置即可。

提示：如果找不到粒子特效的设置入口，可以检查插件是否已更新到最新版本，或查看插件自带的说明文档。

方法二：手动添加自定义 JavaScript 代码

如果不想安装额外插件，可以通过在主题后台添加自定义 JavaScript 代码来实现打字粒子特效。

操作步骤

登录 WordPress 后台，进入 「Zibll子比主题」→「主题设置」。
在左侧菜单找到 「全局&功能」，点击 「自定义代码」 选项卡。
找到 「自定义JavaScript代码」 文本框。
将打字粒子特效的 JavaScript 代码完整复制并粘贴到文本框中。
点击页面底部的 「保存设置」 按钮。

代码获取说明

由于打字粒子特效的 JavaScript 代码通常较长，且不同实现方式的代码有所差异。

提示：如果代码中未包含 <script> 标签，而你是将代码放在 「自定义底部HTML代码」 中，记得在代码外面加上 <script> 标签。

<!--彩色粒子特效 - 渡漳文档网 - www.dzcrv.com -->
(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);
<!--彩色粒子特效结束-->

功能验证

配置完成后，建议进行以下验证：

验证步骤

保存配置：确保已点击「保存设置」按钮（代码法）或已启用插件组件（插件法）。
刷新前台：打开网站首页，在搜索框中输入文字，观察是否有粒子特效出现。
测试交互：尝试快速输入、删除文字，验证粒子特效的响应是否流畅。

排障指引

如效果未生效，请依次检查：

插件法：确认 Zibll Add-ons 插件已启用，《粒子特效》组件已开启。
代码法：确认 JavaScript 代码已完整复制、无遗漏；确认粘贴在 「自定义JavaScript代码」 文本框（而非「自定义CSS样式」）。
缓存问题：清除浏览器缓存后刷新（按 Ctrl+F5 强制刷新）。
代码位置：如果使用 「自定义底部HTML代码」 位置，确认代码已包裹 <script> 标签。

常见问题

问题	解决方法
粒子特效未显示	检查插件是否启用或 JS 代码是否正确；清除浏览器缓存后刷新
粒子特效影响搜索框功能	检查 JS 代码是否与主题其他脚本冲突；尝试调整代码加载顺序
升级主题后效果丢失	插件法：插件独立于主题，升级不影响；代码法：代码保存在主题设置中，升级不影响
页面加载变慢	粒子特效依赖 JS 渲染，如感觉卡顿可尝试精简代码或更换轻量级实现
代码放在哪个位置	子比主题：全局&功能 → 自定义代码 → 自定义JavaScript代码；其他主题：放在 `footer.php` 中并加 `<script>` 标签