WordPress 會員登入 / 註冊頁面表單：如何客製化＋打造登入系統？（使用 Ultimate Member 外掛）

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

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

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

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

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

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

• 1. Ultimate Member 是什麼？
• 2. 安裝＋啟用 Ultimate Member
• 3. 修改 WordPress 註冊表單欄位
• 4. 設計表單樣式
• 5. 修改註冊 / 登入信件模版
• 6. 主選單權限設定
• 常見問題
• 聯絡犬哥網站

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

---

1. Ultimate Member 是什麼？

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

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

並且免費版本，跟其他第三方外掛串接，像是：ForumWP、Google reCAPTCHA、Online Users 等 .. ，可實現一些簡單的論壇功能。

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

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

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

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

---

2. 安裝＋啟用 Ultimate Member

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

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

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

---

3. 修改 WordPress 註冊表單欄位

安裝＋啟用完成，我們先來變更 WordPress 註冊、登入頁面表單：）

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

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

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

• 選擇表單類型：選擇表單功能（此為系統預設表單，無法修改，若是後續站長自行新增，則可以選擇修改功能）。
• 表單產生器：可在此處新增表單欄位＋樣式調整、檢視表單範本。
• 設定表單區：儲存、刪除、隱私權政策等 .. 表單設定項目。

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

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

• 下方「＋」按鈕：新增第二份表單。
• 即時預覽：即時瀏覽表單產生器中，所有的表單欄位，於前台呈現的樣式。

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

• 設置新欄位：使用不同欄位功能，新增新的欄位。
• 預設欄位：Ultimate Member 預設的常用欄位。
• 自定義欄位：使用其他功能，設置新欄位後，會被儲存於此處，成為範本。

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

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

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

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

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

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

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

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

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

---

4. 設計表單樣式

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

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

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

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

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

---

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

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

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

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

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

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

---

6. 主選單權限設定

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

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

指派表單至頁面

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

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

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

首先，前往 Ultimate Member > 表單 > Default Registration 註冊表單（任意表單皆可）。

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

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

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

記得要儲存 / 發佈頁面，這樣就能順利將表單新增到頁面囉：）

頁面指派至主選單

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

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

選單權限設置

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

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

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

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

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

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

以上就是指派表單至頁面＋主選單權限設置教學，大家都學會了嗎：）

---

常見問題

---

聯絡犬哥網站

在網頁設計＋AI SEO 行銷的過程中，或許會遇到一些解決不了問題，可以在下方留言給我，我會盡力協助解答！

接下來，額外分享 2 個實用資源，可有效幫助大家解決問題。

資源一：犬哥網站（專業 WordPress 網頁設計＆ AI SEO 行銷公司）

如果你沒時間自己架站，或是遇到網站沒有流量、Google 網站排名不理想，或是沒有被 AI 提及你的品牌。歡迎洽詢 犬哥網站（WordPress 網頁設計＆ AI SEO 行銷公司），請專家協助你會更容易！

我們有多年網頁設計、AI SEO 行銷經驗，加上上百個實戰案例，絕對能滿足您的需求！

資源二：WordPress 高手架站課＋SEO 排名飆升課（線上課程）

如果想學習更深入的 WordPress 架站技巧，或是想透過 SEO 關鍵字提升網站流量？

可以參考犬哥近期推出的這兩門課程，課程非常的扎實，都是犬哥自己實戰出來的經驗分享，不打高空只教你做出成績！