WordPress登录页面wp-login.php优化

分类:图标设计 74 次浏览 0 2018-5-18

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' );
   ?>