您现在的位置是：首页 > WordPress教程WordPress教程

WordPress登录页太丑？3步自定义，让用户第一眼就记住你！

WP集市 2025-08-21 【WordPress教程】 507人已围观

咱做网站的都知道，登录页虽不是首页，但也是用户接触的第一个“门脸”。默认那个灰白配色，说难听点，跟十年前的后台似的，用户一看就没好感。今天咱就不用插件，纯代码搞定自定义，小白也能学会——别担心，代码不多，还都是人话，看完保准你会！

第一步：先把那“WordPress Logo”换了！

默认登录页最显眼的就是那个蓝色“W” logo，看着就膈应。咱先把它换成自己的品牌logo，这步最简单，就几行代码的事儿。

打开主题的functions.php（别直接改父主题啊！用子主题或自定义插件，不然主题一更新，代码全没了，哭都来不及），加这段：

// 替换登录页logo
function custom_login_logo() {
    echo '<style type="text/css">
        .login h1 a {
            background-image: url('.get_template_directory_uri().'/images/login-logo.png); // 你的logo路径
            background-size: 200px 80px; // 宽高根据你logo调整
            width: 200px;
            height: 80px;
        }
    </style>';
}
add_action('login_head', 'custom_login_logo');

哎对了！logo默认链接是WordPress官网，用户点一下跑别人家去了，多尴尬！咱顺手改了：

// 改logo链接为网站首页
function custom_login_logo_url() {
    return home_url(); // 首页链接
}
add_filter('login_headerurl', 'custom_login_logo_url');

// 改logo标题（鼠标悬停时显示的文字）
function custom_login_logo_title() {
    return '你的网站名称'; // 比如“张三的博客”
}
add_filter('login_headertitle', 'custom_login_logo_title');

保存刷新，你瞅瞅，logo换成自己的了，点一下还能跳回首页，这不就舒服了？

第二步：给登录框“化个妆”，按钮、输入框都整好看点

默认登录框那个灰色按钮，跟没睡醒似的。咱加点颜色，输入框也圆润点，看着就亲切。

还是在functions.php里，接着加代码（或者单独建个login-style.css，用wp_enqueue_style加载，更规范）：

// 加载自定义登录样式
function custom_login_styles() {
    wp_enqueue_style('custom-login', get_template_directory_uri().'/login-style.css');
}
add_action('login_enqueue_scripts', 'custom_login_styles');

然后在主题目录建个login-style.css，写样式：

/* 登录按钮样式 */
.login .button-primary {
    background: #2c3e50; /* 深蓝底色，换成你品牌色 */
    border-color: #2c3e50;
    box-shadow: none;
    text-shadow: none;
    border-radius: 4px; /* 圆角才好看嘛 */
    padding: 0 20px;
    height: 40px;
    font-size: 16px;
}
/* 输入框样式 */
.login input[type="text"], 
.login input[type="password"] {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    box-shadow: none; /* 去掉默认阴影，看着干净 */
}
/* 登录框整体背景 */
.login form {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 加个浅阴影，有层次感 */
}

改完你再看，按钮有颜色了，输入框也不方方正正了，是不是立马有那味儿了？

第三步：加个背景图，瞬间有“高级感”

光改框框还不够，背景光秃秃的也不行。找张好看的背景图（别太花，不然看不清文字），加进去：

在login-style.css里接着写：

/* 登录页背景 */
body.login {
    background-image: url('.get_template_directory_uri().'/images/login-bg.jpg); /* 图片路径 */
    background-size: cover; /* 铺满屏幕 */
    background-position: center;
    background-attachment: fixed; /* 固定背景，滚动不跟着动 */
}

哎对了！图片路径别写死，用get_template_directory_uri()获取主题目录，不然换个服务器路径就错了，咱程序员得有这细心劲儿。