WordPress 主题开发教程手记：wp-login.php 登录页面优化

在 WordPress 站点开发时，某些开发人员可能因为考虑到网站访客之间互动性的而开放站点的注册，开放注册的话将网站后台暴露在访客面前是必然的。一个好的登录界面可以给访客带来一个好的印象，在登录 WordPress 时，如果输入的密码或账号错误的话，那么 WordPress 的登陆框就会抖动，然后提示错误信息，这个功能刚出来觉得还挺好的，多抖几次就觉得心烦了，为了提高用户体验还是去除掉这个效果比较好。只要将以下代码加入到 functions.php 里就行了：

function my_login_head() {
       remove_action('login_head', 'wp_shake_js', 12);
   }
   add_action('login_head', 'my_login_head');

很多网站都能使用用户名与 email 登录网站，而 WordPress 登陆默认是使用用户帐号登陆的，这样对于用户体验是不友好的，那么我们可以让 WordPress 支持 email 登录，仅仅只需要在 functions.php 加入几行代码即可。

//登陆默认的过滤器
remove_filter( 'authenticate', 'wp_authenticate_username_password', 20, 3 );
//添加自定义过滤器
add_filter( 'authenticate', 'fb_authenticate_username_password', 20, 3 );
function fb_authenticate_username_password( $user, $username, $password ) {

    // 如果在帐号模式中输入了 email 地址
    // 则使用这个 email 地址去搜索相应的用户名再去验证
    if ( ! empty( $username ) )
       $user = get_user_by( 'email', $username );

    if ( isset( $user->user_login, $user ) )
       $username = $user->user_login;

    // 使用通过 email 找到的用户名去验证登陆
    return wp_authenticate_username_password( NULL, $username, $password );
}

既然网站可以使用 email 登录了，但访客不知道，我们该如何去提示他们呢？我们可以在登陆框中显示提示信息来提示访客。

<?php
   function username_or_email_login() {
       if ( 'wp-login.php' != basename( $_SERVER['REQUEST_URI'] ) )
           return;

       ?><script type="text/javascript">
       // 更改表单的 Label
       if ( document.getElementById('loginform') )
           document.getElementById('loginform').childNodes[1].childNodes[1].childNodes[0].nodeValue = '<?php echo esc_js( __( '用户名或邮箱', 'email-login' ) ); ?>';

       // 错误信息
       if ( document.getElementById('login_error') )
           document.getElementById('login_error').innerHTML = document.getElementById('login_error').innerHTML.replace( '<?php echo esc_js( __( '用户名' ) ); ?>', '<?php echo esc_js( __( '用户名或邮箱' , 'email-login' ) ); ?>' );
       </script><?php
   }
   add_action( 'login_form', 'username_or_email_login' );
   ?>