WordPress 如何在不同的會員登入狀態,顯示不同的選單?

WordPress 如何在不同的會員登入狀態,顯示不同的選單?

經營購物網站、會員論壇網站、線上課程網站等 ..,還有很多類型的網站,幾乎都會開啟會員註冊的功能,並留下訪客的資料。

但有時候,我們可能想讓會員在不同的登入狀態,呈現不同的選單樣式,像是:

  • 會員處於「 未登入 」狀態時,選單可以顯示 登入、註冊 的選項(相反的,能把 登出、會員專區 選項給隱藏)。
  • 會員處於「 已登入 」狀態時,選單可以顯示 登出、會員專區 的選項(相反的,能把 登入、註冊 選項給隱藏)。

但要達到像這樣有邏輯式的選單顯示,通常需要寫 PHP 程式碼來處理這問題(文章有簡單的程式碼,複製貼上就能達成目標)。

如果你覺得使用程式碼有難度,也可以使用 Ultimate Member 外掛,打造不同身份顯示選單。更多 使用外掛,打造不同選單 完整教學。

不過站長可能會不想安裝額外外掛,那這篇教學就很適合你。好囉,那就直接開始吧!


1. 創建不同的選單

雖然 WordPress 的主選單位置(Primary Menu)只有一個,但我們還是能新增多個選單,然後搭配下一章節的程式碼,就能達成邏輯式的切換。

首先,前往 WordPress 外觀 > 選單,新增一個選單(或用已有的選單的改名也可)。

建立新的選單(或用原來的改名也可)
建立新的選單(或用原來的改名也可)

把選單取名為 logged-out,這是給未登入狀態顯示用的,裡面有包含 登入、註冊 的選項。

顯示位置,先設定為 Primary Menu 主選單,方便我們查看。

命名選單名稱,和設定顯示位置
命名選單名稱,和設定顯示位置

再來,重複上面的流程,新增另一個選單(或用現有的選單改名也可),選單名稱取名為 logged-in

這是給未登入狀態顯示用的,裡面有包含 我的帳戶、登出 的選項。

有關顯示位置,先不做任何勾選,因為等下我們會用程式碼操控它,完成後記得儲存。

命名選單名稱,和設定顯示位置
命名選單名稱,和設定顯示位置

好囉,這樣前置作業就搞定了,我們繼續學習。


2. 複製貼上程式碼

接下來,我們需要借助程式碼的威力,讓它幫我們在不同會員登入狀態,顯示不同的選單。

將下面程式碼複製,並前往 WordPress 外觀 > 佈景主題編輯器,找到 function.php 檔案,滑到最下面並貼上此代碼(下面有圖例)。

/** 不同登入狀態,切換顯示選單 **/
function custom_menu_args( $args = '' ) {
	
if( is_user_logged_in() ) { 
    $args['menu'] = 'logged-in';
} else { 
    $args['menu'] = 'logged-out';
} 
    return $args;
}
add_filter( 'wp_nav_menu_args', 'custom_menu_args' );

大致上流程,可以參考下圖操作,完成後記得儲存。

前往 function.php,並貼上程式碼
前往 function.php,並貼上程式碼

小提醒:建議可把自訂程式碼貼到「 子主題 」裡面,這樣哪天更新主題時,自己新增的程式碼才不會被洗掉。

如果沒有使用子主題也沒關係,假設之後有更新主題,發現程式碼被洗掉,再來設定一次就行了。

好囉,這樣邏輯方面就設定完成了。


3. 查看一下選單成果

這章節,我們就可以來看一下顯示成果囉!首先,可以開一個無痕視窗,用訪客視角進行測試會比較準確。

會發現主選單在未登入狀態,果然只顯示 登入、註冊 的欄位。

未登入狀態顯示的表單
未登入狀態顯示的表單

接著,我們進行會員登入,會發現果然只出現 我的帳戶(也就是會員專區的意思)、登出 選項。

已登入狀態顯示的表單
已登入狀態顯示的表單

太棒了,這就是我們要的!

這樣就完成依照不同的會員登入狀態,而顯示不同項目的選單效果囉:)


常見問題

會員登入、註冊表單一定需要分開嗎?可以合併在同一頁顯示就好嗎?

WordPress 預設的會員登入&註冊表單,就是放在同一個頁面的(註冊表單需到 WooCommerce 裡開啟),更多 WooCommerce 教學

這篇文章,是分享給想把會員登入&註冊表單拆開顯示的人,因為這樣設定會遇到顯示的邏輯問題,所以才有這篇文章的誕生。

文章中的選單名稱命名,一定要跟上面的一樣嗎?

不一定。

但需用英文設定,因為這和程式碼的內容是綁定的,所以如果打算修改選單名稱,那程式碼內相對應的命名,也需要一併更改才會有效。

有推薦好用的會員登入、會員註冊表單設計外掛嗎?

因為自己是用 Astra 主題Elementor 頁面編輯器 比較多。

所以有關會員登入&註冊表單,我比較會從 Ultimate Addons for ElementerEssential Addons Elementor 這幾款中,選擇相關功能使用,這樣生態圈會比較一致。

如果你不是使用 Elementor 的站長,WordPress 還有很多是專門設計會員表單的,完全不用擔心。


WordPress 學習資源

學習網站架設+網路行銷的過程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!

接下來,額外分享 3 項實用資源,可有效幫助大家做學習。

資源一:WP 高手架站課(線上課程)

這門 WordPress 高手架站課 濃縮了犬哥多年在網頁設計的實戰經驗,從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站,3 大類型網站建置方法等 .. 豐富內容,一次教會你。

課程內容非常的紮實(長度超過 20 小時)。如果你剛學習自架網站,這門課程可以讓你用最快的速度,就學會這項技能!

點擊下面了解課程,立馬擁有自己的品牌網站,並增加網路曝光度!

WordPress 高手架站課|一堂課讓你變架站高手!
WordPress 高手架站課|一堂課讓你變架站高手!

資源二:SEO 排名飆升課(線上課程)

網站建立完畢後,但卻沒有流量怎麼辦?或是只能靠花錢投廣告才會有訂單?

這門 SEO 排名飆升課,教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等 ..,大幅提升行銷能力。

點擊下面了解課程,帶你衝上 Google 排名第一頁,大量提升網站營收和訂單!

SEO 排名飆升課|帶你衝上 Google 第一頁!
SEO 排名飆升課|帶你衝上 Google 第一頁!

資源三:犬哥數位(專業 WordPress 網頁設計公司)

如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位(WordPress 網頁設計公司),請專家製作會更有效率!

WordPress 網頁設計公司|犬哥數位

資源四:更多犬哥教學資源

如果你在操作過程中遇到問題,可以加入 犬哥研討社(目前有超過 9000+ 團員)。除了有網友一同幫你解惑外,犬哥團隊也會同步在社團幫助大家。

如果你想學更多網頁設計、數位行銷知識,可關注 YouTube 頻道,或是歡迎追蹤 犬哥網站 IG

犬哥網站社團
犬哥網站社團

關於作者

犬哥網站:網頁設計 x 網路行銷教學平台

犬哥網站

我們分享 WordPress 架站 x 網路行銷知識,不需會任何程式技術,就能自己建立各種網站。 搭配豐富的網路行銷教學,幫助你被更多人看到。 趕快跟著我們的腳步,開始學習吧:)

在〈WordPress 如何在不同的會員登入狀態,顯示不同的選單?〉中有 10 則留言

  1. 請問站長,留言處除了可以留字!!可以留圖片嗎?例如留圖片讓會員加以說明!!

      1. 謝謝站長告知這麼好的外掛!!但是這一段我找不到修改地方?
        The maximum upload file size: 512 MB.
        You can upload: image, audio, video, document, spreadsheet, interactive, text, other.
        Links to YouTube, Facebook, Twitter and other services inserted in the comment text will be automatically embedded

        1. 嗨,這跟妳使用主機的檔案上傳大小限制有關唷,可到主機後台調整(調大),或是直接詢問客服處理也可以~

  2. 你好,

    想問一下,因為我的對像是病人,他們各自有其復康計劃進程(但計劃內容是一樣的),但每個用戶進程不同,假設有一些進度快的,有一些慢的。因為我想他們各自看到的資訊是按照自己進度而訂的,這應該要如何設定呢?謝謝你!

    1. 嗨,這是比較客製化的網站需求,如果要使用 WordPress 處理的話,可能需搜尋一下「 會員 Member 」相關的外掛,看裡面有無符合你的需求~

    1. 犬哥網站

      嗨,小魚,

      如果有修改表單名稱,程式碼的內容也需要一併修改唷。

      還有疑問也歡迎到 FB 社團 貼上圖片或更多資訊,讓廣大網友幫忙一起解惑~

  3. 您好~想請教一下~我有嘗試了此方法
    但我放置於其他地方的選單全部會被這行代碼控制,等於是所有選單都被控制成了 logged-in 或 logged-out
    想詢問這部分有沒有什麼其他的解決方法呢~?
    謝謝您~

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

返回頂端