你的會員還在用 wp-login.php？資深工程師帶你手刻 WordPress 登入與會員系統，打造無縫品牌體驗！

嗨，我是浪花科技的 Eric。身為一個整天跟程式碼打交道的工程師，我最看不慣的事情之一，就是一個設計精美的品牌官網，使用者點擊「登入」後，卻被一腳踹到 WordPress 那個萬年不變、充滿「WordPress」Logo 的 wp-login.php 頁面。那感覺就像是穿著高級訂製西裝，腳上卻踩著一雙藍白拖，瞬間品牌體驗就破功了。

很多客戶會問：「裝個會員外掛不就好了嗎？」嗯，是沒錯，市面上像是 MemberPress、Ultimate Member 這類外掛功能很強大。但說句老實話，它們就像是多功能瑞士刀，為了應付所有人的需求，塞了一大堆你可能一輩子都用不到的功能。結果就是網站變慢、程式碼臃腫，而且當你需要一個非常客製化的功能時，常常會被外掛的框架綁死，改起來比自己寫還痛苦。這就是我們工程師的小小堅持啦，與其用一個80%符合但充滿妥協的方案，不如自己動手，打造一個100%貼合業務邏輯、輕巧又高效的專屬系統。

這篇文章，我就是要帶你跳脫外掛的舒適圈，從零開始，用最「WordPress」的方式，一步步打造屬於你自己的登入與會員系統。我們會從客製化登入頁面開始，一路講到如何建立會員專屬內容、個人資料頁，甚至是一些進階的安全議題。準備好了嗎？泡杯咖啡，我們開工了！

為什麼我們該拋棄 wp-login.php，走向客製化之路？

在我們動手寫 Code 之前，得先搞清楚「為什麼要這麼麻煩」。這不是為了炫技，而是為了解決實際的商業與使用者體驗問題。

H3: 品牌一致性：別讓預設頁面毀了你的使用者旅程

想像一下，使用者在你的網站上瀏覽了精美的商品、閱讀了引人入勝的文章，整個體驗非常流暢。當他決定註冊或登入，準備成為你的忠實顧客時，卻看到一個跟網站風格完全無關的頁面。這種割裂感會瞬間拉遠使用者與品牌的距離。一個客製化的登入、註冊頁面，能確保從訪客到會員的每一步，都沉浸在你精心設計的品牌氛圍中。

H3: 使用者體驗 (UX)：更友善的錯誤提示與流程引導

WordPress 預設的錯誤提示，老實說，寫得有點「工程師思維」。像是「錯誤：使用者名稱或密碼不正確。」雖然沒錯，但非常生硬。我們可以透過客製化，提供更友善、更具引導性的提示，例如：「哎呀，帳號或密碼好像有點問題，要不要試試忘記密碼功能呢？」。此外，我們還可以自訂登入後的跳轉邏輯，根據不同會員等級將他們引導到不同的歡迎頁面，而不是千篇一律地進到後台儀表板。

H3: 安全性提升：隱藏預設路徑，降低攻擊風險

wp-login.php 是全世界駭客和惡意機器人最喜歡「拜訪」的頁面之一。他們會不斷嘗試暴力破解密碼。雖然有其他方法可以防禦（例如WAF 或 Bot 防護），但將登入頁面移到一個自訂的 URL，本身就是一種有效的安全策略，我們稱之為「安全性的模糊化」(Security through obscurity)。讓攻擊者找不到門，自然就減少了被攻擊的機會。

第一步：打造一個品牌專屬的登入頁面

理論說完了，來點實際的。我們的第一個任務，就是建立一個完全自訂的登入頁面，讓 wp-login.php 成為過去式。

H3: 建立自訂登入頁面範本

首先，在你的子佈景主題資料夾中，建立一個新的 PHP 檔案，例如 page-login.php。並在檔案開頭加入以下註解，讓 WordPress 知道這是一個頁面範本：

<?php
/*
 * Template Name: Custom Login Page
 */

get_header(); ?>

<!-- 你的登入表單 HTML 會放在這裡 -->

<?php get_footer(); ?>

接著，到 WordPress 後台新增一個頁面，例如「會員登入」，然後在右側的「頁面屬性」中，選擇我們剛剛建立的「Custom Login Page」範本。這樣，這個頁面的內容就會由 page-login.php 來控制了。

H3: 撰寫登入表單與後端邏輯

現在，我們要在 page-login.php 裡加入登入表單的 HTML。一個基本的表單看起來像這樣：

<form id="custom-login-form" action="" method="post">
    <p class="login-username">
        <label for="custom_user_login">使用者名稱或 Email</label>
        <input type="text" name="log" id="custom_user_login" class="input" value="" size="20">
    </p>
    <p class="login-password">
        <label for="custom_user_pass">密碼</label>
        <input type="password" name="pwd" id="custom_user_pass" class="input" value="" size="20">
    </p>
    <p class="login-submit">
        <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary" value="登入">
        <input type="hidden" name="action" value="custom_login">
    </p>
    <?php wp_nonce_field( 'custom-login-nonce', 'security' ); ?>
</form>

注意到了嗎？我特地加入了 <?php wp_nonce_field( 'custom-login-nonce', 'security' ); ?> 這一行。這是在利用 WordPress 的 Nonces 機制來防止 CSRF 攻擊，確保表單提交是來自我們網站本身，而不是惡意來源。資安這種事，一開始就要養成好習慣。

接下來是處理表單提交的 PHP 邏輯。我們可以用一個簡單的判斷式來處理 POST 請求，並使用 WordPress 核心的 wp_signon() 函式來驗證使用者身份。

<?php
if ( isset( $_POST['action'] ) && $_POST['action'] == 'custom_login' ) {
    if ( ! isset( $_POST['security'] ) || ! wp_verify_nonce( $_POST['security'], 'custom-login-nonce' ) ) {
        // Nonce 驗證失敗，處理錯誤
        echo '<p class="error">安全性驗證失敗，請重試。</p>';
        return;
    }

    $creds = array(
        'user_login'    => sanitize_user( $_POST['log'] ),
        'user_password' => $_POST['pwd'],
        'remember'      => true
    );

    $user = wp_signon( $creds, false );

    if ( is_wp_error( $user ) ) {
        // 登入失敗，顯示友善的錯誤訊息
        echo '<p class="error">' . $user->get_error_message() . '</p>';
    } else {
        // 登入成功，跳轉到會員專區
        wp_redirect( home_url( '/member-area/' ) );
        exit;
    }
}
?>

進階改造：完整的會員系統體驗

只有登入頁面還不夠，一個完整的會員系統還需要註冊、忘記密碼、會員專屬內容和個人資料頁面。

H3: 打造自訂註冊與忘記密碼流程

這個邏輯跟登入頁面很像。你可以建立 page-register.php 和 page-lost-password.php 兩個範本，並在其中建立對應的表單。

• 註冊：使用 wp_create_user() 或 wp_insert_user() 來建立新使用者。記得要對所有使用者輸入的資料進行清理 (Sanitize) 和驗證 (Validate)，這非常重要！
• 忘記密碼：這部分稍微複雜一點，因為它涉及到產生重設密碼的連結並寄送 Email。你可以參考 wp-login.php 裡面 action=lostpassword 的原始碼，但說實話，這部分如果沒有特殊需求，直接引導使用者到 /wp-login.php?action=lostpassword 處理，會是比較省時省力且安全的做法。

H3: 建立會員才能看的專屬內容

這大概是會員系統最核心的功能了。在 WordPress 中，要保護內容非常簡單，只需要在你的範本檔案 (例如 single.php) 中，用 is_user_logged_in() 這個函式做個判斷就好。

<?php if ( is_user_logged_in() ) : ?>

    <!-- 會員專屬內容 -->
    <div class="member-only-content">
        <h2>歡迎回來，尊貴的會員！</h2>
        <p>這是只有會員才能看到的獨家資訊...</p>
    </div>

<?php else : ?>

    <!-- 給非會員看的提示訊息 -->
    <div class="login-prompt">
        <p>想看更多精彩內容嗎？請先 <a href="/login/">登入</a> 或 <a href="/register/">註冊</a> 成為會員。</p>
    </div>

<?php endif; ?>

如果你想做得更精細，例如根據不同的使用者角色顯示不同內容，可以使用 current_user_can('capability_name') 來做更細緻的權限控制。

H3: 讓會員管理自己的個人資料

每個會員都需要一個可以修改自己資料的地方。同樣地，我們可以建立一個「我的帳戶」頁面範本。在這個頁面中，首先要取得當前登入使用者的資訊。

<?php
$current_user = wp_get_current_user();

echo '使用者名稱: ' . $current_user->user_login . '<br />';
echo '電子郵件: ' . $current_user->user_email . '<br />';
echo '暱稱: ' . $current_user->display_name . '<br />';
?>

接著，提供一個表單讓使用者可以更新他們的資料。處理表單提交時，可以使用 wp_update_user() 來更新核心的使用者資料（如 email、密碼），以及用 update_user_meta() 來更新自訂的欄位（如地址、電話）。

最後一哩路：無縫整合與安全性加固

我們已經建立了自訂的頁面，但 WordPress 預設的 /wp-login.php 和 /wp-admin/ 還是可以被直接存取。這不行，我們要把它們處理掉，打造一個真正無縫的體驗。

把以下這段程式碼加到你主題的 functions.php 檔案中。它的作用是：當未登入的使用者嘗試直接訪問後台時，將他們重新導向到我們自訂的登入頁面。

function custom_redirect_non_logged_in_users() {
    if ( ! is_user_logged_in() && is_admin() && ! defined('DOING_AJAX') ) {
        wp_redirect( home_url('/login/') );
        exit;
    }
}
add_action('init', 'custom_redirect_non_logged_in_users');

// Bonus: 過濾登入頁面的 URL，讓所有登入連結都指向我們的自訂頁面
function custom_login_url( $login_url, $redirect ) {
    return home_url( '/login/?redirect_to=' . $redirect );
}
add_filter( 'login_url', 'custom_login_url', 10, 2 );

這樣一來，整個會員系統的流程就完全在你的品牌網站框架下了。從登入、註冊到瀏覽專屬內容，使用者再也看不到 WordPress 的預設蹤跡。這就是我們工程師追求的細節與完美。雖然過程比裝個外掛複雜，但你獲得的是完全的控制權、更佳的效能和無可取代的品牌體驗。

總結：不只是程式碼，更是品牌體驗的延伸

打造一個客製化的 WordPress 登入與會員系統，遠不只是寫幾行 PHP 程式碼那麼簡單。這是一個從使用者角度出發，重新思考整個會員旅程的過程。我們擺脫了預設模板的束縛，將品牌精神注入到每一個與使用者互動的細節中。

從一個無縫的登入頁面，到一個功能齊全且安全的會員專區，你所建立的不只是一個功能，更是一種信任感和歸屬感。當使用者感受到你對細節的用心，他們也更有可能成為你品牌的忠實擁護者。這其中的價值，遠遠超過省下的一點開發時間。

推薦閱讀

• 登入畫面還在用 WordPress Logo？資深工程-師帶你打造品牌專屬會員系統，從登入到後台體驗全面升級！
• 別再只會分管理員和編輯！WordPress 終極權限寶典，打造滴水不漏的使用者角色管理系統
• 你的表單安全嗎？揭開 WordPress Nonces 的神秘面紗，杜絕 CSRF 攻擊的終極防線！

當然，客製化開發是一條需要專業知識的路。如果你在打造自己的會員系統時遇到了瓶頸，或是有更複雜的商業邏輯需要實現，例如金流整合、課程系統、多層級會員等等，別忘了，浪花科技的團隊隨時都在這裡。我們專注於提供深度的 WordPress 客製化開發服務，能幫助你打造一個真正符合商業需求的強大平台。歡迎點擊這裡與我們聯繫，讓我們聊聊你的想法，一起把藍圖變成現實！