效果是这样的：

代码部署

将以下代码放在很熟悉的 WP后台-外观-小工具-自定义HTML 即可！ 

<style>
    .input__container {
        position: relative;
        padding: 10px 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
        border-radius: 22px;
        max-width: 300px;
        transition: transform 400ms;
        transform-style: preserve-3d;
        perspective: 500px;
    }

    .shadow__input {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        z-index: -1;
        filter: blur(40px);
        border-radius: 20px;
        background: radial-gradient(circle at 25% 25%, #ff8fa0, transparent 40%),
            radial-gradient(circle at 75% 25%, #8ed6ff, transparent 40%),
            radial-gradient(circle at 25% 75%, #d08cff, transparent 40%),
            radial-gradient(circle at 75% 75%, #93ffcf, transparent 40%);
        background-size: 300% 300%;
        animation: gradientMove 8s infinite ease-in-out;
    }

    @keyframes gradientMove {
        0% {
            background-position: 0% 0%;
        }

        25% {
            background-position: 50% 25%;
        }

        50% {
            background-position: 100% 50%;
        }

        75% {
            background-position: 25% 75%;
        }

        100% {
            background-position: 0% 100%;
        }
    }

    .input__search {
        flex-grow: 1;
        border-radius: 20px;
        outline: none;
        border: none;
        padding: 8px;
        padding-left: 20px;
        position: relative;
    }

    .input__button__shadow {
        cursor: pointer;
        border: none;
        background: none;
        transition: transform 400ms, background 400ms;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 12px;
        padding: 5px;
    }

    .input__button__shadow:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    .wniui-seach {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100px;
        background-color: var(--main-bg-color);
        border-radius: 10px;
    }

    .wniui-baidu {
        position: absolute;
        top: 0;
        left: 0;
    }

    .wniui_prefix {
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        padding: 5px 5px;
        margin-right: 2px;
        height: 19px;
        vertical-align: middle;
        font-size: 12px;
        border-radius: .6em 2px;
        line-height: 1.4rem
    }

    .wniui_prefix:after {
        position: absolute;
        content: " ";
        display: block;
        width: 15px;
        height: 145%;
        background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
        animation: sweepTitle 3s ease-in-out infinite;
        transform: rotate(28deg)
    }

    @keyframes sweepTitle {
        0% {
            left: -100%
        }

        100% {
            left: 100%
        }
    }
</style>

<div class="wniui-seach">
    <span class="wniui_prefix wniui-baidu jb-pink">百度一下</span>
    <div class="input__container">
        <div class="shadow__input"></div>
        <input type="text" name="text" class="input__search" placeholder="是浩宝呀博客">
        <button class="input__button__shadow">
            <img src="https://www.xkzhi.cn/zatu/c9a03fb2b220241229141747.svg" alt="搜索">
        </button>
    </div>
</div>

<script>
    document.querySelector('.input__button__shadow').addEventListener('click', function () {
        const query = document.querySelector('.input__search').value.trim() || '是浩宝呀博客';
        const searchUrl = `https://www.baidu.com/s?wd=${encodeURIComponent(query)}`;
        window.open(searchUrl, '_blank');
    });
</script>

然后就可以了！

教程结束！