WordPress 登录页美化完整方案（支持后台设置 Logo、背景透明美化）

好的，以下是NewVFX开发过程中完整整理的 WordPress 登录页美化方案分享记录，可直接用于项目归档、开发文档或开发者社区发布。

🎨 WordPress 登录页美化完整方案（支持后台设置 Logo、背景透明美化）

本方案适用于需要自定义登录页面视觉风格的 WordPress 站点，特别适合社区类或品牌类网站，具备以下特点：

• ✅ 登录页 logo 可后台设置

• ✅ 登录框圆角半透明、模糊背景风格

• ✅ 输入框、文字、按钮均为浅色系

• ✅ 所有样式仅在登录页生效，保持后台前台整洁

• ✅ 兼容暗色背景、自定义背景图等设计

🧩 1. 后台设置登录页 Logo 地址

将以下代码添加至 functions.php：

// 登录页 logo 链接跳转到首页
add_filter('login_headerurl', function () {
return home_url();
});

// 添加设置字段到“设置 → 常规”
add_action('admin_init', function () {
add_settings_field(
'custom_login_logo_url',
'登录页 Logo 地址',
function () {
$value = esc_url(get_option('custom_login_logo_url',));
echo '<input class="regular-text" name="custom_login_logo_url" type="text" value="' . $value . '" />';
echo '
<p class="description">请输入一个图片 URL，例如：https://example.com/logo.png</p>
';
},
'general'
);
register_setting('general', 'custom_login_logo_url', [
'type' => 'string',
'sanitize_callback' => 'esc_url_raw',
'default' => '',
]);
});

// 应用 Logo 样式（支持圆形头像风格）
add_action('login_head', function () {
$logo_url = esc_url(get_option('custom_login_logo_url));
if (!$logo_url) return;
echo '
<p class="p2"><style>
        .login h1 a {<br />
            background-image: url(. $logo_url .) !important;<br />
            height: 88px;<br />
            width: 88px;<br />
            background-size: 100px;<br />
            border-radius: 100%;<br />
        }<br />
    </style></p>
';
});

💎 2. 登录框样式美化（半透明背景 + 浅色风格）

以下样式确保只在登录页注入：

add_action('login_enqueue_scripts', function () {
    echo '<style id="custom-login-style">
        /* 登录表单样式 */
        #loginform {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 16px;
            padding: 30px;
            box-shadow: 0 8px 24px rgba(255, 255, 255, 0);
            -webkit-backdrop-filter: blur(6px);
        }

        /* 表单文字 */
        #loginform label,
        #loginform input,
        #loginform .forgetmenot label {
            color: #f0f0f0 !important;
        }

        /* 输入框样式 */
        #loginform input.input {
            background-color: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #f0f0f0;
        }

        #loginform input.input:focus {
            border-color: #ffffff;
            box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
        }

        /* 密码可见按钮图标 */
        #loginform .wp-hide-pw .dashicons {
            color: #f0f0f0;
        }

        /* 底部链接 */
        #nav,
        #nav a,
        #backtoblog,
        #backtoblog a {
            color: #f0f0f0 !important;
        }

        #nav a:hover,
        #backtoblog a:hover {
            color: #ffffff !important;
            text-decoration: underline;
        }
    </style>';
});

📷 3. 自定义背景图（可选）

你可以通过自定义登录页背景来搭配上述样式：

add_action('login_enqueue_scripts', function () {
    echo '<style>
        body.login {
            background: url(https://example.com/path/to/bg.jpg) no-repeat center center fixed;
            background-size: cover;
        }
    </style>';
});

✅ 背景图推荐使用深色+模糊视觉风格，配合透明登录框体验最佳。

✅ 效果展示

• Logo 使用后台地址，适配圆形或品牌图标

• 登录框半透明、圆角、模糊背景（类玻璃风）

• 所有字体为白色系，适配暗色背景

• 输入框聚焦时边框高亮

• 兼容第三方登录插件和扩展

🧠 使用建议

• 图片资源建议使用 CDN（例如图床或 Cloudflare）

• 可结合 localStorage 设置暗/亮模式切换

• 若需进一步定制背景/按钮/动画等，可扩展 CSS 或使用 login_enqueue_scripts 加载外部样式表