纯代码实现登录页面的DIY

发布地址：Eucalyptus-Blog

由于部分WordPress主题在默认配置下没有对后台登录界面进行定制化开发，用户只能使用系统自带的原生登录页面，这种页面往往设计简陋、缺乏品牌特色，与网站整体风格格格不入，影响了用户体验和品牌形象；为此，我通过深入研究WordPress的login_head和login_footer钩子，对原生登录页面进行了全面的二次开发，不仅替换了默认的WordPress logo为网站品牌标识，还重新设计了登录表单的布局和配色方案，增加了背景图片和CSS3动画效果，同时优化了移动端的响应式布局，使登录页面与网站主题风格完美统一，大大提升了后台管理的专业性和视觉体验。

#下述了两个代码文件均放置到主题目录下的自建self-innovate文件中
login-style.php
login-style.css

核心代码

<?php
/*** 登录页美化（Logo 完全禁用点击）*/
add_action( 'login_enqueue_scripts', function () {wp_enqueue_style( 'my-login', get_theme_file_uri( '/self-innovate/login-style.css' ), [], '1.0.0' );
} );/* 完全移除 <a> 的 href，避免刷新 */
add_filter( 'login_headerurl', function () {return 'javascript:void(0);';   // 真正无动作
} );/* 悬停文字留空，防止提示 */
add_filter( 'login_headertext', '__return_empty_string' );

下述是css代码，需替换css中body.login和login::before的background:url(”)路径

/* 1. 背景与斜遮罩 */
body.login{height:100vh;margin:0;display:flex;align-items:center;justify-content:center;background:url('https://mingliang.net.cn/wp-content/uploads/2025/05/16-scaled.jpg') center/cover no-repeat;position:relative;
}
body.login::before{content:'';position:absolute;inset:0;background:linear-gradient(-75deg, transparent 0% 50%, rgba(255,255,255,.6) 50% 100%);z-index:1;
}/* 2. 登录框整体定位与 Logo */
#login{position:relative;z-index:2;width:340px;padding:40px 40px 40px; /* 40px+140px空间已含在顶部padding */padding-top:140px;      /* 给Logo留空间 */margin-left:150px;
}
#login::before{           /* Logo伪元素 */content:'';position:absolute;top:20px;left:50%;transform:translateX(-50%);width:160px;aspect-ratio:1;background:url('https://lanantrees.mingliang.net.cn/logo/logo1.png') center/contain no-repeat;pointer-events:none;
}/* 3. 表单 */
body.login form#loginform{margin:24px 0 !important;padding:26px 24px !important;box-shadow:0 1px 3px rgba(0,0,0,.04) !important;background:transparent !important;border:none !important;
}/* 4. 文字Logo */
.login h1 a{background:none !important;text-indent:0;width:auto;height:auto;font:700 24px/1.2 sans-serif;color:#333;margin-bottom:24px;
}/* 5. 输入框 */
.login form .input{border:1px solid #e1e5e9;border-radius:8px;padding:12px 16px;font-size:15px;transition:border-color .3s, box-shadow .3s;
}
.login form .input:focus{border-color:#667eea;box-shadow:0 0 0 2px rgba(102,126,234,.25);
}/* 6. 按钮 */
.wp-core-ui .button-primary{width:100%;border:none;border-radius:30px;padding:12px 0;font:600 16px/1 sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);transition:transform .3s;
}
.wp-core-ui .button-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(102,126,234,.45);
}/* 7. 隐藏语言切换 */
#language-switcher{display:none !important;}

最后需再functions.php中调用

/* 登录页面优化 */
require_once get_theme_file_path( '/self-innovate/login-style.php' );