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