WordPress自定义登录和注册页面样式并且添加验证码
通过一番尝试和验证以及网络搜索，终于实现了WordPress默认的登录和注册界面的样式修改，下面把过程记录下来。笔者主要是通过在主题中添加WordPress的钩子来实现登录和注册界面的样式修改的。WordPress的 登录和注册页面的主要样式id都是一样的名称，下面就针对登录页面来说明。
主题functions脚本中添加钩子函数
修改登录页面的logo和背景图片，如果读者仅仅只是进行固定设置的话，可以在下面的登录样式文件中直接修改，就不需要进行钩子设置了，我在functions中设置主要是为了在主题设置中添加logo和背景图片的设置链接，可以随时更换图片而不需要每次都修改样式文件。同时，我们为默认的登录界面添加自定义的css样式文件，这样就可以通过样式文件来修改样式了。
|
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
|
//主题options文件中添加设置项目
$options[] = array(
'name' => '站点Logo',
'desc' => '不添加显示文字标题，推荐图片尺寸 200px*50px，保存成功则自动显示Logo图片',
'id' => 'site_logo',
'std' => get_template_directory_uri() . '/images/Logo.png',
'type' => 'upload');
$options[] = array(
'name' => '登录界面背景',
'desc' => '推荐图片为jpg',
'id' => 'site_login',
'std' => get_template_directory_uri() . '/images/background_2.jpg',
'type' => 'upload');
//以下代码写在functions.php文件中
//插入自定义的Logo和背景图片，其实就是一个css样式，下面的写法是为了方便在主题设置里面添加图片链接
function custom_login_logo() {
echo '
';
}
add_action('login_head', 'custom_login_logo');
//自定义登录界面Logo点击链接
add_filter('login_headerurl', create_function(false,"return get_bloginfo('url');"));
//自定义登录页面的LOGO提示为网站名称
add_filter('login_headertitle', create_function(false,"return get_bloginfo('name');"));
//自定义登录和注册页面底部信息
function custom_html() {
echo '';
}
add_action('login_footer', 'custom_html');
//添加自定义CSS，用于修改登录页面样式，可以先打开默认的登录界面，进入页面调试，通过自定义样式来覆盖默认的样式
function custom_login() {
echo '';
}
add_action('login_head', 'custom_login');
|
登录和注册界面添加验证码并且可以自定义密码
首先添加验证码生成方法，读者可以自行寻找其他的验证码生成方法，例如图片验证码之类的，这里使用数字验证码。在主题的目录添加vcode.php文件，这里需要在主题的functions.php中开头添加：session_start();来开启session，否则不能获取到图片验证码的内容，vcode文件内容为：
|
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
|
session_start();
//生成验证码图片
Header("Content-type: image/PNG");
$im = imagecreate(65,25); // 画一张指定宽高的图片
$back = ImageColorAllocate($im, 245,245,245); // 定义背景颜色
imagefill($im,0,0,$back); //把背景颜色填充到刚刚画出来的图片中
$vcodes = "";
srand((double)microtime()*1000000);
//生成6位数字
for($i=0;$i<6;$i++){
$font = ImageColorAllocate($im, rand(100,255),rand(0,100),rand(100,255)); // 生成随机颜色
$authnum=rand(0,9);
$vcodes.=$authnum;
imagestring($im, 12, 2+$i*10, 5, $authnum, $font);
}
$_SESSION['VCODE'] = $vcodes;
for($i=0;$i<250;$i++) //加入干扰象素
{
$randcolor = ImageColorallocate($im,rand(0,255),rand(0,255),rand(0,255));
imagesetpixel($im, rand()%70 , rand()%30 , $randcolor); // 画像素点函数
}
ImagePNG($im);
ImageDestroy($im);
?>
|
在登录界面添加验证码输入框，注册界面添加验证码输入框和密码重复输入验证：
|
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
|
//在登录框添加验证码
function custom_login_message() {
?>
}
add_action('login_form', 'custom_login_message');
//登录时进行输入验证码
function check_extra_login_fields($user, $username='', $password='') {
if ( $_POST['check_human'] !== $_SESSION['VCODE'] ) {
$error = new WP_Error();
$error->add( 'not_human', "错误: 输入的验证码不对" );
return $error;
}else{
return $user;
}
}
add_filter( 'wp_authenticate_user', 'check_extra_login_fields', 10, 2 );
/*注册时添加验证码*/
add_action( 'register_form', 'show_extra_register_fields' );
function show_extra_register_fields(){
?>
}
//检查两次密码是否输入一致，以及检查验证码是否正确
add_action( 'register_post', 'check_extra_register_fields', 10, 3 );
function check_extra_register_fields($login, $email, $errors) {
if ( $_POST['password'] !== $_POST['repeat_password'] ) {
$errors->add( 'passwords_not_matched', "错误：两次密码不一致" );
}
if ( $_POST['check_human'] !== $_SESSION['VCODE'] ) {
$errors->add( 'not_human', "错误：输入的验证码不对" );
}
}
//存储用户输入的密码，如果用户不输入密码，由系统自动生成，并邮件通知用户
add_action( 'user_register', 'register_extra_fields', 100 );
function register_extra_fields( $user_id ){
$userdata = array();
$userdata['ID'] = $user_id;
if ( $_POST['password'] !== '' ) {
$userdata['user_pass'] = $_POST['password'];
}
$new_user_id = wp_update_user( $userdata );
}
//修改注册时的提示信息
add_filter( 'gettext', 'edit_password_email_text' );
function edit_password_email_text ( $text ) {
if ( $text == '注册确认信将会被寄给您。' ) {
$text = '如果您没有输入密码，系统会自动产生密码，并通过电子邮件通知您，请注意查收。';
}
return $text;
}
|
笔者使用的自定义css文件内容为：
|
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
|
@charset "UTF-8";
/*登录页面背景*/
/*
body.login{
background:url(../images/background_2.jpg) 0 0 no-repeat;
}
/*登录页面Logo
.login h1 a {
width: 320px;
height: 60px;
background:url(../images/Logo.png) no-repeat center top;
}*/
.login .message, .login #login_error{
background-color: #D9F2F7;
border-radius: 0.25rem;
}
#login #nav, #login #backtoblog{
background-color: #D9F2F7;
margin-top: 0px;
height: 32px;
font-size: 1.125rem;
line-height: 1.125rem;
color: #0068A1;
}
#login #nav a, #login #backtoblog a{
color: #0068A1;
}
#login #backtoblog{
border-radius: 0rem 0rem 0.25rem 0.25rem;
}
#login #loginform, #login #registerform, #login #lostpasswordform{
background-color: #D9F2F7;
border-radius: 0.25rem 0.25rem 0rem 0rem;
padding: 20px ;
}
#login #loginform p label, #login #registerform p label, #login #lostpasswordform p label{
font-size: 1.125rem;
line-height: 1.125rem;
color: #0068A1;
}
#login #loginform p .input, #login #registerform p .input, #login #lostpasswordform p .input{
margin-top: 0.55rem;
border-radius: 0.25rem;
padding: 5px;
height: 2.625rem;
line-height: 2.125rem;
}
#login #loginform p #check_human, #login #registerform p #check_human{
width: 180px;
}
#login .forgetmenot, #login #wp-submit{
float: none;
width: 100%;
height: 32px;
margin-top: 5px;
}
#login #wp-submit{
font-size: 1.125rem;
}
.login .login_footer{
text-align: center;
font-size: 1.125rem;
font-weight: bold;
color: #D9F2F7;
}
|
好了，设置完毕后，把主题文件更新，重新登录网站，登录和注册界面已经改变了，如下图所示：