犬哥網站

希望這篇文章對你有幫助!

如果希望我協助「 網站建置、主機代管等 .. 」,歡迎 聯絡我
WordPress 會員登入 / 註冊頁面表單:如何客製化+打造登入系統?(使用 Ultimate Member 外掛)

WordPress 會員登入 / 註冊頁面表單:如何客製化+打造登入系統?(使用 Ultimate Member 外掛)

這是一篇完整的「 WordPress註冊頁面 」+登入表單欄位,如何客製化製作的相關教學。

架設電商網站線上課程網站、社群網站等 .. 站長都希望來光顧網站的訪客,在註冊時留下多一點資訊,像是手機、性別、生日等 ..。

但 WooCommerce 預設的註冊、登入頁面,欄位不夠充足。

又或者想在登入&非登入狀態,分別呈現不同的選單內容,例如:在登入狀態才會看到會員專區、非登入狀態才顯示註冊等 .. 。更多 結帳前,強制訪客登入 / 註冊教學

還是想客製化修改會員註冊成功後,會收到的信件內容 ..。 更多 WooCommerce 修改信件模版外掛

以上的功能,我將會在接下來的文章教學,準備好的話,就跟著我開始學習吧!

如何設計 WordPress 註冊 / 登入頁面表單,客製化專屬登入系統?影片學習:

如何設計 WordPress 註冊 / 登入頁面表單,客製化專屬登入系統?影片學習

1. Ultimate Member 是什麼?

Ultimate Member:最佳的 WordPress 會員外掛

Ultimate Member 是一款熱門的會員系統外掛,分為免費版及進階版,強化 WordPress 內建會員功能,適合建置論壇、各類型會員網站。

免費版本功能,我們可以修改 WordPress 註冊 / 登入表單欄位、樣式,以及設置主選單權限,管理各項會員活動。

Ultimate Member 可修改會員註冊 / 登入表單欄位

並且免費版本,跟其他第三方外掛串接,像是:ForumWPGoogle reCAPTCHAOnline Users 等 .. ,可實現一些簡單的論壇功能。

進階版本的擴展功能則更豐富,可使用信用卡、積分結帳、串接 WooCommerce、社交軟體登入等 .. 多重功能。

Ultimate Member 官方整理整合外掛、副加組件

我們還可以用 Ultimate Member 製作出精美的前台會員中心,功能包括:修改個人用戶資料、添加好友、公開牆貼文、群組、關注等 .. (有些為進階版功能)。

還能夠設定更多會員權限相關,像是:避免 WordPress 會員看見後台的儀表板、能否發送私人貼文等 .. 多樣化設定。

Ultimate Member 可設計精美的前台會員中心

如果你也對 Ultimate Member 有興趣,除了下載免費版本,也可點擊下方,前往查看進階方案:)


2. 安裝+啟用 Ultimate Member

修改 WordPress 註冊 / 登入表單欄位+主選單權限,使用 Ultimate Member 免費版本即可做到。

這個章節,我們就來安裝+啟用 Ultimate Member 免費版本。

前往 WordPress 後台 > 外掛 > 安裝外掛,搜尋「 Ultimate Member 」安裝+啟用。

安裝+啟用 Ultimate Member

3. 修改 WordPress 註冊表單欄位

安裝+啟用完成,我們先來變更 WordPress 註冊、登入頁面表單:)

我們以修改 WordPress註冊頁面表單為範例。

在 WordPress 左側欄,前往 Ultimate Member > 表單 > 選擇 Default Registration 註冊表單,進行「 編輯 」。

前往註冊表單頁面,進行修改

進入修改表單頁面,詳細區域說明如下圖:

進入修改 WordPress註冊頁面表單
  • 選擇表單類型:選擇表單功能(此為系統預設表單,無法修改,若是後續站長自行新增,則可以選擇修改功能)。
  • 表單產生器:可在此處新增表單欄位+樣式調整、檢視表單範本。
  • 設定表單區:儲存、刪除、隱私權政策等 .. 表單設定項目。

可以看見,Ultimate Member 已幫我們建立好基本的註冊表單欄位。

如需新增欄位,點選表單中的「+」按鈕。

WordPress註冊頁面:修改表單欄位項目
  • 下方「+」按鈕:新增第二份表單。
  • 即時預覽:即時瀏覽表單產生器中,所有的表單欄位,於前台呈現的樣式。

跳出選擇欄位列表,這邊先選擇新增「 手機號碼 」。

新增「 手機號碼 」欄位
  • 設置新欄位:使用不同欄位功能,新增新的欄位。
  • 預設欄位:Ultimate Member 預設的常用欄位。
  • 自定義欄位:使用其他功能,設置新欄位後,會被儲存於此處,成為範本。

新增之後,我們會發現,原本的註冊表單,多出了「 手機號碼 」的欄位囉!

接著點選「 藍色鉛筆 」圖示,變更該欄位設定。

修改「 手機號碼 」欄位設置

跳出修改欄位視窗,設定值說明可參考下圖。

將特殊驗證改為「 無 」,並且將圖示刪除(為了維持表單欄位整齊),按下「 更新 」儲存修改。

修改欄位設置視窗
修改欄位設置視窗

我們發現,剛剛的操作,已經順利將欄位圖示刪除,接著就可依據站長需求,分別新增&設定表單欄位。

全部修改好,記得要按「 更新 」儲存表單。

WordPress註冊頁面:儲存表單

前往 WordPress 頁面 > 全部頁面 > 註冊 > 檢視,即可看見註冊表單的更新。

檢視註冊頁面表單,成功新增「 手機號碼 」欄位~

小提醒:選擇「 即時預覽 」也能夠直接觀看到表單欄位&樣式的修改唷:)

後續會再教大家如何讓頁面上線,我們先繼續進行表單修改教學:)


4. 設計表單樣式

我們知道表單欄位如何新增 / 設定,那該如何修改表單樣式呢?

回到 Ultimate Member > 表單 > 繼續修改 Default Registration 註冊表單,找到表單產生器,選擇最上方的鉛筆圖示,修改表單樣式。

選擇藍色鉛筆圖示,修改表單樣式

跳出修改表單視窗,詳細設定如下圖,各位站長可當作參考。

這邊我們玩一個特別的,打開表單列標題,依序輸入文本、設定顏色、新增圖示。全部修改完後,點擊「 更新 」儲存。

修改註冊表單樣式(新增表單列標題)

儲存後,我們前往註冊表單頁面,或點選「 即時預覽 」查看修改,發現表單樣式成功修改,剛剛新增的表單列標題,也順利出現囉:)

成功修改表單樣式+新增表單標題列~

5. 修改註冊 / 登入信件模版

當訪客註冊成功,或登入有任何疑問時,都會收到系統信件,因此將系統信件修改成網站風格,也是一個重要環節:)

前往 Ultimate Member > 設置 > Email ,這邊可找到許多系統預設信件模版,選擇「帳號歡迎電子郵件 」進行修改。

點選修改「 帳號歡迎電子郵件 」模版

進入修改信件模版頁面,請先確定信件模版是否被啟用,接著修改模版內容,點選「儲存設定」。

至於下圖的 {site_name} 是系統的動態文字,會自動讀取網站名稱。

修改「 帳號歡迎電子郵件 」信件模版

這樣就完成信件模版修改囉,我們實際測試註冊會員的收件狀況,發現成功顯示修改內容~

成功收取註冊會員信件(套用修改信件模版)

6. 主選單權限設定

修改好表單後,我們就可以讓表單上線,並且設定「 根據訪客的登入 / 非登入狀態,顯示或隱藏主選單 」。

這個章節,會從指派表單至頁面開始教學,最後帶領大家設置主選單權限。

指派表單至頁面

其實 Ultimate Member 在啟用時,已經幫我們建立+指派好預設的頁面+表單。

前往 WordPress 頁面 > 全部頁面,後方有標註 UM 的頁面,就是 Ultimate Member 幫我們新增好表單+指派好的頁面。

Ultimate Member 自動新增+指派好的頁面

不過若是我們需要設置表單至其他頁面,該怎麼做呢?

首先,前往 Ultimate Member > 表單 > Default Registration 註冊表單(任意表單皆可)。

進入表單畫面,在右側欄位,我們可以找到表單短代碼,可先將此代碼進行複製。

複製表單短代碼

小備註:在 Ultimate Member 表單列表,也可直接找到 Shortcode 列,直接複製指定表單短代碼。

前往 WordPress 頁面 > 新增頁面,輸入頁面標題,使用「 短代碼 」小工具,貼上剛剛複製的表單短代碼。

新增短代碼小工具,貼上表單短代碼

記得要儲存 / 發佈頁面,這樣就能順利將表單新增到頁面囉:)

頁面指派至主選單

接著,我們來新增註冊、登入、會員專區頁面至主選單。

前往 WordPress > 外觀 > 選單,在頁面找到「 帳號管理 」、「 註冊 」、「 登入 」、「 登出 」頁面,新增至主選單。

將重要功能頁面新增至主選單

選單權限設置

新增至主選單後,我們就可以來設置訪客 / 登入者看到主選單的權限。

就以 2 個方向:訪客看見「 註冊 」、「 登入 」選單;登入者看見「 登出 」、「 帳號管理 」。來進行選單權限設置。

首先,點開「 註冊 」設置,將權限設定為「 已登出的會員 」。「 登入 」選單也是一樣的設置。

將「註冊」、「登入」選單權限,變更為「已登出的會員」

接著,將「 登出 」、「 帳號管理 」選單設置,權限變更為「 已登入的會員 」,並將可看見該設置的會員權限全部勾選。

將「登出」、「帳號管理」選單權限,變更為「已登入的會員」

最後我們前往前台網站確認,這是登出會員(訪客)所看見的選單。

訪客角色主選單

登入狀態下,會員可看見的主選單。

登入者可看見的主選單

以上就是指派表單至頁面+主選單權限設置教學,大家都學會了嗎:)


常見問題

Ultimate Member 是什麼?

Ultimate Member 是一款熱門的會員系統外掛,分為免費版及進階版,強化 WordPress 內建會員功能,適合建置論壇、各類型會員網站。

我們可以修改 WordPress 註冊 / 登入表單欄位、樣式,以及設置主選單權限,管理各項會員活動。

以及製作精美的前台會員中心,功能包括:修改個人用戶資料、添加好友、公開牆貼文、群組、關注等 .. (有些為進階版功能)。

如何使用 Ultimate Member 修改預設 WordPress 註冊表單?

前往 Ultimate Member > 表單設置,修改預設註冊表單,或自行新增表單,在表單中增減欄位即可。

除此之外,我們還能夠修改預設表單樣式,讓 WordPress 註冊 / 登入頁面表單的設計風格,變得更加豐富唷:)

可以串接 Super Socializer 外掛,實現社群登入功能嗎?

比較可惜的是,Ultimate Member 無法跟 Super Socializer 串接,Super Socializer 只能用於 WordPress / WooCommerce 內建的會員註冊 / 登入表單。

若是需要第三方登入功能,需前往 Ultimate Member 進階版 進行購買,才能夠開通唷!


WordPress 學習資源

學習 WordPress 網站架設流程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答。

如果你沒有時間自己架站,或是想委託專人服務,那可以參考我們的 網站建置服務

我最近也開啟了 YouTube 頻道,裡面有些影片教學,你也能搭配 Blog 一起學習,應該會來的更加順手(歡迎訂閱我+開啟小鈴鐺,可收到第一手影片教學通知)。

當然,如果怕問題描述不清楚,也可以加入 WordPress 教學時光屋 – 犬哥網站 ,我同步也會在社團中幫忙解惑。

希望這些對你有所幫助,祝架站順利啦。

犬哥網站:wordpress教學社團

4 thoughts on “WordPress 會員登入 / 註冊頁面表單:如何客製化+打造登入系統?(使用 Ultimate Member 外掛)”

  1. 想請教 Unlimited Member 有像 paid membership pro那樣具備paypal這類支付功能嗎?
    還是一定要綁定wooCommerence 等工具才行?

    請問您有這類文章可以參考嗎

    非常感謝

    1. 犬哥網站 - Luna

      嗨,muffle,

      Unlimited Member 目前還沒有和 PayPal 串接,因此若需要使用付款功能,可能需要先使用 WooCommerce 來進行串接:)

      犬哥網站現在還在籌備其他的教學,日後若有機會,會再出 Unlimited Member 的付款功能教學~

  2. 您好,想請問:

    我在選單權限設置中點選任一表單時,皆未看到Ultimate Member 選單設定的地方可以選擇,想請問可能是哪邊出問題了?
    (有啟用Ultimate Member的狀態)

    謝謝您

    1. 犬哥網站 - Luna

      嗨,Julie,

      使用 Ultimate Member 外掛指派+設置的頁面,才能夠進行選單權限的設定,

      如果沒有在使用 Ultimate Member 設置的頁面中,找到選單權限的設定,那可能就是外掛衝突的問題,建議你可以分別停用檢查看看:)

Leave a Comment

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

回到頂端