简单自定义WordPress登录与注册界面

发表于 | 更新于 | 分类于

想在不添加第三方插件的前提下，稍微改一下WordPress登陆注册界面 让他能更符合自己的需求。

页面原本只包括了用户名和邮件地址两项，用户输入注册信息后提示去邮箱激活完成注册 大概就是这么个流程。不少插件提供了跳过验证直接注册功能，不过这样可能会造成大量垃圾账号，而且保留一个有效的联系方式还是必要的。手机验证目前来说有点难，需要通过第三方服务实现，以后有需求了再说。

修改页面logo，背景和样式

1
2
3
4
5
6
//通过自定义CSS修改logo和背景等内容
function custom_login() {
    //由于是采用插件模式开发的，所以css文件位置被设定在插件目录下
    echo '<link rel="stylesheet" type="text/css" href="' . plugin_dir_url( __FILE__ ) . '/login_style.css" />';
}
add_action('login_head', 'custom_login');

剩下的就是编辑login_style.css定制样式。

修改logo的链接地址

1
2
3
4
5
//将LOGO链接改为网站首页
function custom_logo_url() {
	return get_bloginfo('url');
}
add_filter( 'login_headerurl', 'custom_logo_url' );

添加注册页表单项

1
2
3
4
5
6
7
8
9
10
11
12
//添加一个性别选项到注册页
function custom_login_gender() {
    echo '<p><label for="user_gender">性别<br />
		男性：<input type="radio" name="gender" id="user_gender" value="male" />
		女性：<input type="radio" name="gender" id="user_gender" value="female" />
		</label></p>'; }
add_action('register_form', 'custom_login_gender'); 
//把输入的值保存到数据库
function custom_gender_save($user_id){
    if ( isset( $_POST['gender'] ) ) update_user_meta($user_id, 'gender', $_POST['gender']); 
    }
add_action('user_register', 'custom_gender_save');

“gender”的值会被保存到数据库的“wp_usermeta”表里，现在这项为非必填项，不管什么值都能注册成功。如果想做成必填项，还要再加上几行。

1
2
3
4
5
6
7
8
9
10
11
12
//验证一下输入
function custom_registration_errors($errors) {

    if ( empty( $_POST['gender'] ) || ! empty( $_POST['gender'] ) && trim( $_POST['gender'] ) == '' ) {
        $errors->add( 'gender_error', sprintf('%s : %s','错误','未选择性别。' ) );
        //加上这句让表单抖起来
	add_action( 'login_head', 'wp_shake_js');
    }

    return $errors;
}
add_filter( 'registration_errors', 'custom_registration_errors');

在注册页加上太多项挺影响体验的，没谁愿意注册个网站先得填一堆单子，但拿它来收集一些诸如ip，默认语言等不必主动填写的信息应该不错。其他次要信息可以放到验证邮件后或者让用户在个人页面提交。