Wordpress登录页面DIY

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

源码下载地址：https://gitcode.com/weixin_72610956/Blog/tree/login

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

核心代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
/* 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?imageslim') 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中调用该模块

1
require_once get_theme_file_path( '/self-innovate/login-style.php' );