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