登入畫面還在用 WordPress Logo？資深工程師帶你打造品牌專屬會員系統，從登入到後台體驗全面升級！

嗨，我是浪花科技的資深工程師 Eric。坦白說，每次我看到一個設計精美的網站，點擊「登入」後卻跳轉到那個熟悉的、帶有 WordPress Logo 的 `wp-login.php` 頁面時，我內心總會忍不住小小的哀嚎一下。這感覺就像穿著一身高級訂製西裝，腳上卻配了一雙藍白拖，瞬間就「破功」了。

對使用者來說，這不僅僅是一個登入框，它是品牌體驗的延伸。一個預設的登入頁面，大聲地告訴全世界：「嘿！我是一個 WordPress 網站！」這不僅削弱了品牌的獨特性，也錯失了提升使用者信任感與專業形象的大好機會。更不用說，預設的 `/wp-login.php` 或 `/wp-admin/` 網址，也等於是給了全世界的駭客和機器人一個明確的攻擊目標。身為一個有點龜毛的工程師，我認為我們絕對可以做得更好。

今天，就讓我帶你動手改造，從登入頁面客製化、登入後智慧重導向，到打造專屬的註冊流程，一步步將 WordPress 預設的會員系統，打磨成符合你品牌形象、提供絕佳使用者體驗的專屬領地。準備好了嗎？讓我們開始吧！

改造第一站：客製化你的 WordPress 登入頁面

我們的首要任務，就是把 WordPress 的標記從登入頁面上清除，換上我們自己的品牌識別。這不僅是美觀問題，更是建立品牌一致性的第一步。這裡有兩種主流作法，一種是工程師偏愛的「硬派作法」，另一種是適合所有人的「外掛懶人包」。

方法一：用 Code 說話！functions.php 的黑魔法

身為工程師，我當然首推這個方法。直接在佈景主題的 `functions.php` 檔案（強烈建議在子佈景主題中操作，免得主題一更新，你的心血全白費）中加入幾段程式碼，就能擁有完全的控制權，而且不會增加任何外掛的負擔。這就是我們工程師的浪漫，乾淨、俐落、高效。

1. 更換 Logo 圖片與連結：

預設的 Logo 會連結到 WordPress.org，這對你的使用者來說毫無意義。我們用 `login_headerurl` 和 `login_headertext` 這兩個 filter hook 來修正它。

// 更改登入頁面的 Logo 連結
function roamer_tech_login_logo_url() {
    return home_url(); // 讓 Logo 點擊後回到網站首頁
}
add_filter( 'login_headerurl', 'roamer_tech_login_logo_url' );

// 更改登入頁面 Logo 的提示文字
function roamer_tech_login_logo_url_title() {
    return get_bloginfo( 'name' ); // 顯示網站名稱
}
add_filter( 'login_headertext', 'roamer_tech_login_logo_url_title' );

2. 載入自訂 CSS 樣式：

光改連結還不夠，我們要徹底改頭換面。使用 `login_enqueue_scripts` 這個 action hook 來載入我們專屬的 CSS 檔案。

// 在登入頁面載入自訂的 CSS 檔案
function roamer_tech_login_stylesheet() {
    // 記得將路徑換成你自己的 CSS 檔案位置
    wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/assets/css/login-styles.css' );
}
add_action( 'login_enqueue_scripts', 'roamer_tech_login_stylesheet' );

接著，在你的子佈景主題資料夾中建立 `/assets/css/login-styles.css` 檔案，你就可以在裡面大展身手了。例如：

body.login {
    background-color: #f1f1f1; /* 換成你的品牌背景色 */
}

#login h1 a, .login h1 a {
    background-image: url('../images/your-brand-logo.png'); /* 換成你的 Logo 圖片路徑 */
    height: 80px; /* 你的 Logo 高度 */
    width: 320px; /* 你的 Logo 寬度 */
    background-size: contain; /* 確保 Logo 完整顯示 */
    background-repeat: no-repeat;
    padding-bottom: 30px;
}

#loginform {
    border: 1px solid #ddd;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.login #nav a, .login #backtoblog a {
    color: #0073aa !important; /* 換成你的品牌連結顏色 */
}

透過這幾段程式碼，你的登入頁面就能完全脫胎換骨，完美融入你的品牌視覺。

方法二：善用外掛，省時又省力

如果你不想碰程式碼，或是專案時程很趕，市面上也有許多優秀的外掛可以幫你完成任務，例如 `LoginPress` 或 `WPS Hide Login`。它們通常提供圖形化的介面，讓你像操作 Word 一樣，點一點、選一選就能客製化登入頁面，甚至還能輕鬆更改登入網址，提升安全性。

• 優點：快速、直觀，適合非技術人員。
• 缺點：增加網站負擔，多一個外掛就多一個潛在的效能或安全風險。選擇外掛時務必挑選評價高、更新頻繁的，才不會哪天變成網站的後門。

登入後，使用者該何去何從？無縫的登入重導向

想像一下，你的客戶（Subscriber 角色）登入網站後，卻被丟到充滿各種設定選項的 WordPress 後台（/wp-admin/），他們肯定一頭霧水。這使用者體驗，我只能給零分。一個貼心的系統，應該根據使用者的身份，將他們引導到最合適的地方。

這時候，`login_redirect` 這個 filter hook 就派上用場了。我們可以檢查使用者的角色，然後決定要把他們送到哪裡去。

function roamer_tech_login_redirect( $redirect_to, $request, $user ) {
    // 檢查使用者物件是否存在
    if ( isset( $user->roles ) && is_array( $user->roles ) ) {
        // 如果是管理員 (administrator)，就維持預設行為，進入後台
        if ( in_array( 'administrator', $user->roles ) ) {
            return $redirect_to;
        }

        // 如果是客戶 (customer) 或訂閱者 (subscriber)
        if ( in_array( 'customer', $user->roles ) || in_array( 'subscriber', $user->roles ) ) {
            // 將他們重導向到「我的帳號」頁面
            return get_permalink( get_page_by_path( 'my-account' ) ); 
        }
    }

    // 其他未指定角色的使用者，一律導回首頁
    return home_url();
}
add_filter( 'login_redirect', 'roamer_tech_login_redirect', 10, 3 );

看看，就這麼一小段程式碼，使用者體驗立刻從「困惑」提升到「貼心」。使用者一登入就看到自己的會員儀表板，而不是那個跟他們無關的 WordPress 後台，這才是專業的表現。

打造專屬會員註冊流程

當你的會員系統需要收集比「使用者名稱」和「Email」更多的資訊時（例如：公司名稱、電話、地址），預設的註冊表單就顯得捉襟見肘了。我們當然也可以對它動手腳。

擴充預設註冊表單：新增客製化欄位

我們可以利用 `register_form` 這個 action 來在註冊表單上添加新的欄位，再用 `registration_save` 這個 action 來儲存這些額外的資訊。

// 步驟一：在註冊表單上新增「電話號碼」欄位
function roamer_tech_add_phone_to_registration() {
    ?>
    <p>
        <label for="phone_number">電話號碼<br />
        <input type="text" name="phone_number" id="phone_number" class="input" value="<?php echo ( isset( $_POST['phone_number'] ) ? esc_attr( $_POST['phone_number'] ) : '' ); ?>" size="25" /></label>
    </p>
    <?php
}
add_action( 'register_form', 'roamer_tech_add_phone_to_registration' );

// 步驟二：儲存註冊時提交的電話號碼
function roamer_tech_save_phone_number( $user_id ) {
    if ( isset( $_POST['phone_number'] ) ) {
        // 記得要對使用者輸入的資料進行清理 (Sanitize)
        update_user_meta( $user_id, 'phone_number', sanitize_text_field( $_POST['phone_number'] ) );
    }
}
add_action( 'user_register', 'roamer_tech_save_phone_number' );

透過這兩段程式碼，我們就成功地在註冊時收集了使用者的電話號碼，並將它安全地存放在 `wp_usermeta` 資料表中。當然，你也可以依此類推，加入任何你需要的欄位。不過，記得在處理使用者提交的任何資料前，都要做好驗證（Validation）與清理（Sanitization），這是網站安全的基礎！

權限控管：不只是管理員與訂閱者

一個成熟的會員系統，往往需要更精細的權限劃分。例如，「白金會員」可以看到特定內容，而「一般會員」不行。WordPress 內建的角色與權限系統（Roles and Capabilities）非常強大，雖然這本身就是一個可以寫成好幾篇文章的巨大主題，但我們可以先從建立一個自訂角色開始。

想深入了解權限系統的複雜世界嗎？強烈推薦你先閱讀這篇《WordPress 終極權限寶典》，絕對讓你功力大增。

在這裡，我們先簡單示範如何用 `add_role()` 函式新增一個「白金會員」（Premium Member）的角色：

// 新增一個名為「白金會員」的自訂角色
add_role(
    'premium_member',
    '白金會員',
    array(
        'read'         => true,  // 擁有讀取權限
        'edit_posts'   => false, // 不能編輯文章
        'delete_posts' => false, // 不能刪除文章
    )
);

建立角色後，你就可以在使用者管理介面指派這個角色，並在你的登入重導向邏輯中，為「白金會員」設定專屬的歡迎頁面，打造尊榮的會員體驗。

總結：別讓細節毀了你的品牌

從客製化登入頁面，到智慧重導向與專屬註冊流程，我們今天所做的每一個調整，看似微小，卻都圍繞著一個核心目標：提供無縫、一致且專業的品牌體驗。別再讓你的網站看起來像「WordPress 模板 No.87」，這些細節的堆砌，正是區分專業網站與業餘作品的關鍵。

透過親手撰寫程式碼，我們不僅能精準地控制每一個環節，更能確保網站的輕量與高效。當然，外掛是我們的好朋友，但在追求極致的路上，理解其背後的原理，才能讓你走得更遠、更穩。

---

延伸閱讀：

• 別再只會分管理員和編輯！WordPress 終極權限寶典，打造滴水不漏的使用者角色管理系統
• 你的表單安全嗎？揭開 WordPress Nonces 的神秘面紗，杜絕 CSRF 攻擊的終極防線！
• 別再給客戶萬年不變的後台！資深工程師教你打造 WordPress 品牌化後台，UX 體驗大升級

---

如果你覺得這些客製化工程太過複雜，或者你有更進階的會員系統需求，例如金流整合、分級訂閱、內容保護等，需要一個專業的技術團隊來為你規劃與執行，歡迎隨時與浪花科技的我們聯繫。讓我們一起打造一個讓使用者愛不釋手的強大網站！