WordPress后台登录页怎么自定义？2种方法换Logo+改配色+加背景

WordPress默认的登录页，那个蓝色大W的logo、灰白色背景、没有任何品牌感的表单，每次打开都提醒你这是个”开箱即用”的网站。如果你是外贸电商站、或者腾腾博客这种有一定访客量的独立站，这个页面会有其他人（不只是你自己）看到，尤其是装了访客注册功能的站，用户每次登录都会看到这个页面。

把登录页改成你自己的Logo、自己的配色、甚至一张品牌背景图，不只是视觉上好看，从品牌感知上也会让整个网站看起来更专业。

这件事有两种做法：装插件（不需要写代码）和写CSS（更轻量，需要改几行代码）。按你的技术水平选一种就行。

方法一：LoginPress插件（推荐，不需要会代码）

📥 插件下载：wordpress.org/plugins/loginpress/

LoginPress是WordPress后台登录页自定义类插件里装机量最高的选择之一，活跃安装量超过20万，支持定制登录页的布局、错误提示文字等，不需要编写代码。

安装激活

WordPress后台 → 插件 → 安装插件，搜索”LoginPress”，安装并激活。激活后左侧菜单会出现LoginPress入口。

进入定制界面

点击LoginPress → Settings（设置），然后点击Settings（设置）下方的”Customize”按钮，会跳转到WordPress原生的实时预览定制器（Customizer），左侧是设置面板，右侧是登录页面的实时预览，调整任何选项右侧立刻显示效果，不用猜最终长什么样。

核心设置逐项说明

Logo设置：上传你的品牌Logo替换默认的WordPress大W图标，可以调整Logo的大小和位置。建议上传透明背景的PNG文件，在深色背景上效果更好，文件名用品牌相关的名称，比如blog-ctzpj-login-logo.png。

背景设置：可以选择纯色背景、渐变色背景，或者上传一张背景图片。外贸站选一张和产品或品牌调性相符的图片效果最好，比如你做工业产品的就放一张工厂或产品的实拍图，把登录页的品牌感直接拉满。背景图建议控制在500KB以内，不要上传太大的图片拖慢登录页加载速度。

表单样式：可以自定义表单的边框样式、输入框样式、标签文字颜色、表单背景色、输入框背景色，以及登录按钮的样式——按钮颜色、hover悬停效果、文字都可以改。

错误提示文字：这个大多数教程都不提，但挺有用的。WordPress默认的登录失败提示会明确告诉用户”用户名不存在”或者”密码不正确”，这反而给暴力破解提供了信息。LoginPress允许你把这些提示改成统一的模糊提示，比如”用户名或密码有误”，不透露到底是哪个错了。

“忘记密码”和”返回”链接文字：登录页底部的”忘记密码？”和”← 返回网站”这两个链接的文字和颜色也可以自定义，甚至可以完全隐藏它们。

页脚版权信息：LoginPress支持在登录表单下方加一行版权声明或自定义文字，可以用来放你的网站名称或联系方式。

保存和验证

所有设置调完之后，点击右上角”发布”保存，然后退出登录，用无痕模式打开blog.ctzpj.com/wp-login.php验证效果，确认所有视觉元素都正确显示。

LoginPress免费版和Pro版的区别

LoginPress免费版已经能覆盖大多数基础定制需求：换Logo、改背景、改表单样式、改按钮颜色、自定义错误提示。Pro版的主要增值在于：预制模板（直接套用设计好的登录页模板）、登录后按角色跳转不同页面、reCAPTCHA V2/V3集成防垃圾提交。

LoginPress Pro的Startup计划起价$99/年（单站点），Agency计划$199/年，也有$499的终身授权。

对于外贸独立站来说，免费版已经够用，不需要为了Pro版专门花这笔钱——除非你需要按角色重定向（比如管理员登录跳后台、普通用户登录跳个人中心）或者想用预制模板省设计时间。

方法二：纯CSS代码（不装插件，更轻量）

如果你不想给后台再加一个插件，可以直接用几行CSS实现基础的登录页自定义。这个方法更轻量，不会带来插件冲突或多余的数据库记录，缺点是只能处理样式，没有LoginPress那么多交互层面的控制。

进入WordPress后台 → 外观 → 自定义 → 附加CSS，粘贴以下代码（按你的实际需求替换颜色值和图片路径）：

css

/* 替换登录页Logo */
.login h1 a {
    background-image: url('https://cdn.blog.ctzpj.com/wp-content/uploads/your-logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 200px;
    height: 80px;
}

/* 修改登录页背景颜色 */
body.login {
    background-color: #1a1a2e;
}

/* 也可以用背景图片替换背景色 */
body.login {
    background-image: url('https://cdn.blog.ctzpj.com/wp-content/uploads/login-bg.jpg');
    background-size: cover;
    background-position: center;
}

/* 修改登录表单背景和边框 */
.login form {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    border: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* 修改登录按钮颜色 */
.login .button-primary {
    background: #0073aa;
    border-color: #0073aa;
    width: 100%;
    height: 40px;
    border-radius: 4px;
}

.login .button-primary:hover {
    background: #005b8e;
    border-color: #005b8e;
}

/* 隐藏登录页底部的WordPress标语 */
.login #backtoblog,
.login #nav {
    display: none;
}

保存后用无痕模式打开登录页验证效果，颜色值和图片路径按你的实际情况替换。

顺便隐藏后台登录URL

改完登录页样式，推荐配合做另一件事，把默认的/wp-login.php换成一个自定义URL，比如/enter或者/admin-access。

默认登录URL是所有WordPress站点一样的，扫描机器人每天都在爆破这个地址。把它改掉之后，爆破脚本连登录页面都找不到，自然也就打不进来。具体操作可以参考WPS Hide Login使用教程，装好插件填一个自定义URL保存，不需要其他配置，效果立竿见影。

另外，登录安全这块还有一个值得配的设置——限制登录失败次数，防止暴力破解，详细配置在WordPress限制登录失败次数防暴力破解教程里讲得很清楚，可以配合这篇一起做，两件事加一起把登录入口的安全性大幅提升。