WordPress 登入登出連結：登出後回原頁、顯示會員名稱、依登入狀態換選單

會員網站常見的小困擾：會員在課程頁按「登入」，登入完卻被帶到後台或首頁，要自己再找回剛才那一頁；登出時又跳出一個「確定要登出嗎？」的畫面，多點一次。

這篇整理幾個不用外掛的寫法：

• 登入、登出後回到原本那一頁。
• 一個短代碼，沒登入顯示「登入｜註冊」，登入後顯示「你好，名字｜登出」。
• 傳統佈景主題的主選單，最後面自動加上登入或登出。
• 區塊佈景主題直接用內建的「登入/登出」區塊。

兩個關鍵函式

• wp_login_url( $網址 )：產生登入頁的網址，登入成功後會回到 $網址。
• wp_logout_url( $網址 )：產生登出的網址，登出後回到 $網址。

wp_logout_url() 產生的網址裡帶有安全碼（_wpnonce），WordPress 認得是本人按的，直接登出、不再確認。很多人手寫 wp-login.php?action=logout，沒有安全碼，WordPress 就會停在「你已從網站登出……確定要登出嗎？」的確認畫面。測試時直接打開手寫的登出網址，確實停在這個畫面。所以登出連結一定要用 wp_logout_url() 產生。

程式碼

放在子佈景主題的 functions.php，或用 Code Snippets 這類外掛新增：

// 取得目前這一頁的網址（登入、登出後要回到這裡）
function zw_current_url() {
	global $wp;
	return home_url( add_query_arg( $_GET, trailingslashit( $wp->request ) ) );
}

// 短代碼 [zw_account_links]：沒登入顯示「登入｜註冊」，登入後顯示「你好，名字｜登出」
add_shortcode( 'zw_account_links', function () {
	$here = zw_current_url();
	if ( is_user_logged_in() ) {
		$user = wp_get_current_user();
		return '<span class="zw-account">你好，' . esc_html( $user->display_name )
			. '｜<a href="' . esc_url( wp_logout_url( $here ) ) . '">登出</a></span>';
	}
	$links = '<a href="' . esc_url( wp_login_url( $here ) ) . '">登入</a>';
	if ( get_option( 'users_can_register' ) ) {
		$links .= '｜<a href="' . esc_url( wp_registration_url() ) . '">註冊</a>';
	}
	return '<span class="zw-account">' . $links . '</span>';
} );

// 傳統佈景主題：主選單最後面自動加「登入」或「登出」
add_filter( 'wp_nav_menu_items', function ( $items, $args ) {
	if ( 'primary' !== $args->theme_location ) {
		return $items;
	}
	$here = zw_current_url();
	if ( is_user_logged_in() ) {
		$items .= '<li class="menu-item"><a href="' . esc_url( wp_logout_url( $here ) ) . '">登出</a></li>';
	} else {
		$items .= '<li class="menu-item"><a href="' . esc_url( wp_login_url( $here ) ) . '">登入</a></li>';
	}
	return $items;
}, 10, 2 );

取得目前這一頁的網址

zw_current_url() 用 WordPress 解析好的網址路徑（$wp->request），加上網址後面的參數，組成目前這一頁的完整網址。網址有參數時（例如 ?tab=2）也會保留，回來時還是同一個分頁。

登入、登出後要跳轉到的網址，WordPress 會先用 wp_safe_redirect() 檢查，只允許跳回自己的網站，別人沒辦法利用這個連結把會員帶到外面的網站。

短代碼 [zw_account_links]

在頁面、文章或小工具裡放一個「短代碼」區塊，填入 [zw_account_links]：

• 沒登入：顯示「登入」，網站有開放註冊的話，再加「註冊」。
• 登入後：顯示「你好，林小美｜登出」，名字用的是會員的「公開顯示名稱」。

名字用 esc_html() 輸出，會員把名字改成一段 HTML 程式碼，也只會顯示成文字。

傳統佈景主題：主選單自動加登入登出

wp_nav_menu_items 可以在選單輸出之前加項目。程式碼裡只處理 primary 這個位置（大部分佈景主題的主選單都叫這個名字），頁尾選單、社群選單不受影響。不知道自己的佈景主題用哪個名字，到 外觀 → 選單 的「管理選單位置」分頁看。

區塊佈景主題：用內建的「登入/登出」區塊

區塊佈景主題（例如 Twenty Twenty-Five）的選單是「導覽列」區塊，不會經過 wp_nav_menu_items，上面那段選單程式碼沒有作用。不過 WordPress 本來就有一個「登入/登出」區塊：

1. 到 外觀 → 編輯器，打開頁首。
2. 在導覽列旁邊新增「登入/登出」區塊。
3. 區塊設定裡的「重新導向至目前網址」預設是開的，登入、登出後就會回到原本那一頁。

需要「你好，名字」這種文字的話，在頁首放一個「短代碼」區塊，填 [zw_account_links] 就好。

實際測試的結果

在兩套佈景主題各測了一次，起點都是一個帶 ?tab=2 參數的「會員專區」頁面：

• 沒登入：短代碼顯示「登入｜註冊」；Twenty Twenty-One 的主選單最後多了「登入」。
• 按登入：登入頁記住了要回去的網址，輸入帳號密碼後，回到「會員專區?tab=2」，短代碼變成「你好，林小美｜登出」，選單變成「登出」。
• 按登出：沒有跳出確認畫面，直接回到「會員專區?tab=2」，又變回「登入｜註冊」。
• 內建的「登入/登出」區塊，產生的連結一樣會回到目前的網址。

使用時要注意

• 整頁快取：快取外掛會把頁面存成固定的檔案給大家看。大部分快取外掛對「已登入」的人不使用快取，所以不會把 A 會員的名字顯示給 B 看；換快取外掛或用主機商的快取時，要確認有這個設定。
• WooCommerce 的「我的帳號」有自己的登出連結（會經過一個「登出」端點），不用改它，上面的短代碼和選單可以和它並存。
• 登入後想一律回到某一頁，例如會員中心，可以參考WordPress 會員註冊後自動登入、跳轉到指定頁面。

延伸閱讀

• WordPress 依登入狀態、會員角色顯示部分內容：不用外掛的短代碼寫法
• WordPress 禁止非管理員進入後台：訂閱者、會員登入後自動導回首頁
• WordPress 隱藏上方工具列：前台關閉、只讓管理員看到，或移到畫面下方

會員在網站裡進出順不順，會影響他們願不願意常回來。正威網路行銷是 25 年經驗的基隆網頁設計工作室，會員網站的登入、註冊、會員中心都會一起規劃，台北與全台客戶也歡迎來聊聊。