這是一篇完整的「 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 個方向:訪客看見「 註冊 」、「 登入 」選單;登入者看見「 登出 」、「 帳號管理 」。來進行選單權限設置。
首先,點開「 註冊 」設置,將權限設定為「 已登出的會員 」。「 登入 」選單也是一樣的設置。
接著,將「 登出 」、「 帳號管理 」選單設置,權限變更為「 已登入的會員 」,並將可看見該設置的會員權限全部勾選。
最後我們前往前台網站確認,這是登出會員(訪客)所看見的選單。
登入狀態下,會員可看見的主選單。
以上就是指派表單至頁面+主選單權限設置教學,大家都學會了嗎:)
常見問題
Ultimate Member 是什麼?
Ultimate Member 是一款熱門的會員系統外掛,分為免費版及進階版,強化 WordPress 內建會員功能,適合建置論壇、各類型會員網站。
我們可以修改 WordPress 註冊 / 登入表單欄位、樣式,以及設置主選單權限,管理各項會員活動。
以及製作精美的前台會員中心,功能包括:修改個人用戶資料、添加好友、公開牆貼文、群組、關注等 .. (有些為進階版功能)。
如何使用 Ultimate Member 修改預設 WordPress 註冊表單?
前往 Ultimate Member > 表單設置,修改預設註冊表單,或自行新增表單,在表單中增減欄位即可。
除此之外,我們還能夠修改預設表單樣式,讓 WordPress 註冊 / 登入頁面表單的設計風格,變得更加豐富唷:)
可以串接 Super Socializer 外掛,實現社群登入功能嗎?
比較可惜的是,Ultimate Member 無法跟 Super Socializer 串接,Super Socializer 只能用於 WordPress / WooCommerce 內建的會員註冊 / 登入表單。
若是需要第三方登入功能,需前往 Ultimate Member 進階版 進行購買,才能夠開通唷!
聯絡犬哥網站
在網站架設+網路行銷的過程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!
接下來,額外分享 2 個實用資源,可有效幫助大家解決問題。
資源一:犬哥網站(專業 WordPress 網頁設計&SEO 行銷公司)
如果你沒時間自己架站,或是遇到網站沒有流量、Google 網站排名不理想。歡迎洽詢 犬哥網站(WordPress 網頁設計&SEO 行銷公司),請專家協助你會更容易!
我們有多年網頁設計、SEO 網站排名經驗,加上上百個高質感作品、SEO 實戰案例,絕對能滿足您的需求!
資源二:WordPress+SEO 超強線上課程
這門 WordPress 高手架站課 濃縮了犬哥多年在網頁設計的實戰經驗,從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站,3 大類型網站建置方法等豐富內容,一次教會你。
課程內容非常的紮實(長度超過 20 小時)。如果你剛學習自架網站,這門課程可以讓你用最快的速度,就學會這項技能!
網站建立完畢後,但卻沒有流量怎麼辦?或是只能靠花錢投廣告才會有訂單?
這門 SEO 排名飆升課,教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等,大幅提升行銷能力。
帶你衝上 Google 排名第一頁,大量提升網站營收和訂單!