前言

這次我們以實作一個會員網站為例子,想做這個主題原因在於會員網站在 WP 中算是個少見的實作項目,又或者說比較不是 WP 強項,我們會很常聽到 WP 拿來做形象官網、一頁金流、或是 Woocommerce 金流網頁,卻鮮少聽到拿來做會員論壇等等,然而 WP 真的相對做不到會員管理嗎?這邊我們嘗試改變這種思維,以期能更了解 WP的強大之處。

大綱

  • sitemap 架構
  • 安裝 Ultimate Member plugin
  • UM三大表單
  • 實作律師卡片呈現頁

sitemap 架構

首先我們定義出整個網頁的 sitemap 架構,定義後我們能針對各個頁面與設計師進行討論設計,也一遍定義不同頁面該用哪頁 php,分配各頁面進行團隊合作開發,故這邊我們定義整個 sitemap 架構如下:

  • 首頁
    • 網址頁:/members
    • 說明:律師卡片頁面,此頁呈現出所有驗證過的律師資訊,讓需求者能進行適當的律師挑選與聯絡。
  • 註冊頁面
    • 網址頁:/register
    • 說明:提供律師註冊時填入基本資訊,某些欄位為必填某些不必要是必填。
  • 登入頁面
    • 網址頁:/login
    • 說明:註冊完後能進行編輯,這頁相對單純。
  • 登出頁面
    • 網址頁:/logout
    • 說明:登出會員權限功能,這頁也相對單純。
  • 重置密碼頁面
    • 網址頁:/password-reset
    • 說明:針對會員密碼進行修改。

會員權限頁面部分

律師註冊成為會員後,將有權限編輯自己的頁面,故這邊有幾頁是會員能做的調整,算是會員的 CRUD ,包含:

  • 客製化會員編輯頁
    • 網址頁:post.php?post=id&action=edit
    • 說明:post.php 進行會員編輯頁的安排,post其後接會員ID,action選用edit代表編輯頁面,這頁是精華以及相對能客製化的頁面。
  • 會員呈現頁面
    • 網址頁: user/user帳號/
    • 說明:會員能看的自己資訊並且做編輯等動作
  • 會員帳戶編輯頁面
    • 網址頁:account/general/
    • 說明:編輯會員名稱、姓名、電郵
  • 會員密碼編輯頁面
    • 網址頁:account/password/
    • 說明:和 password-reset.php 一樣是編輯密碼
  • 會員隱私設定編輯頁面
    • 網址頁:account/privacy/
    • 說明:可以調整是否讓人看到自己會員簡介
  • 會員刪除帳號頁面
    • 網址頁:account/delete/
    • 說明:輸入密碼刪除自己帳號

初始 WP 頁面只會有此兩個頁
https://ithelp.ithome.com.tw/upload/images/20201012/20130334E3gjPoUhZS.png

接著我們來裝裝 UM 看看頁面上產生什麼變化。

安裝ultimate member

ultimate member (簡稱UM),在會員管理 – Ultimate Member – User Profile & Membership Plugin 中我們有聊過這個外掛,現在我們需要更應用層面去實作他。
正確使用 UM 需要讓 UM 幫忙新增頁面,這邊我們就直接把 UM 當作像是 ruby on rails 的 scaffold 框架去使用

https://ithelp.ithome.com.tw/upload/images/20201012/201303344bhGSz8Faw.png

不用五秒,產生了一堆相關頁面

https://ithelp.ithome.com.tw/upload/images/20201012/20130334XXTPWFRUJ2.png!

但是回到前端去看,會發現頁面有些邏輯不通地方,例如註冊、登入、會員列表、帳號管理此時都在,而邏輯應該是:

  • 登入前看到:註冊、登入
  • 登入後看到:登出、會員列表、帳號管理

故後續我們需要處理這些問題。


UM三大表單

  • 註冊 (Default Registration) 表單
  • 會員檔案 (Default Profile) 表單
  • 登入 (Default Login) 表單

https://ithelp.ithome.com.tw/upload/images/20201012/20130334vEG8Fige4w.png

此三大表單提供我們相對的彈性進行客製化,尤其在註冊和登入表單,是蠻需要客製化的部分,這邊我們特別來看一下:

登入表單
會員表單相對單純,前端以帳號和密碼進行登入,假如沒註冊過也提供註冊按鈕,假如忘記密碼這重新進行密碼更正,流程為:

  • Step1 輸入帳號
  • Step2 系統發送重置密碼信至註冊信箱

https://ithelp.ithome.com.tw/upload/images/20201012/20130334PU4r5P9ESx.png

信箱會收到:

https://ithelp.ithome.com.tw/upload/images/20201012/201303347WXyQ8VPSs.png

(這邊要注意,假如沒收到驗證信有很大可能是沒有完成 SMTP 服務開通,有興趣者再請參考 了解 WordPress SMTP 外掛)

  • Step 3 輸入新密碼後進行密碼更正
    這邊也讓我們確認 password-reset.php 是沒問題的。

註冊表單
UM會提供基本(預設)的註冊頁面選項,如果需要的話我們都能再額外CRUD這些註冊欄位,其中 密碼 與 密碼確認 都是必填欄位(required column),選項包含:

  • 會員名稱
  • 名字
  • 姓氏
  • 電子郵件地址
  • 密碼
  • 確認 Password

https://ithelp.ithome.com.tw/upload/images/20201012/20130334ZNVpKu7CMw.png

這邊我們想盡量簡化註冊流程,所以把姓名部分都拿掉,密碼也改成純數字可以註冊的表單,簡化整體流程,前端最後呈現樣子為:

https://ithelp.ithome.com.tw/upload/images/20201012/20130334xgFDRSwwan.png

看起來合乎我們想像的,相當理想~

會員檔案表單
UM 在後端是沒有提供任何會員表單部分的欄位,但是在前端其實可以看到它幫我們提供了 大頭照、封面照、介紹 textbox 等部分

https://ithelp.ithome.com.tw/upload/images/20201012/20130334yrfrxXANl0.png

補充:介紹 textbox 會將資料存在 DB 中 wp_usermeta table中的 metakey 欄位=description中的 meta_value 欄位。

接著我們預計產生以下欄位,供律師會員進行編輯個人頁面,包含:

  • 名字:真實中文姓名,選用 textbox
  • 學經歷:最高學歷,選用 textbox
  • 法律專業領域:選用 textarea
  • 經辦過的法律案件:選用 textarea
  • 個人網站網址 :也可以是事務所網址,選用 URL,並且增加網頁驗證 (Validate)
    我們在後台新增這些欄位

https://ithelp.ithome.com.tw/upload/images/20201012/20130334mu5XsyoaUc.png

並且在前台檢查是否順利出現欄位

https://ithelp.ithome.com.tw/upload/images/20201012/20130334OsV1G3bZt7.png

接著進行測試,更新我們的user資料,查看是否順利:

https://ithelp.ithome.com.tw/upload/images/20201012/20130334b5txedNxsq.png

看起來一切完美,各種格式的資料更新上都沒遇到太大問題,如此,會員檔案的C(Create)和U(Update)都順利。


sitemap頁面完成度檢驗

已完成

  • 註冊頁面 (/register)
  • 登入頁面 (/login)
  • 登出頁面 (/logout)
  • 重置密碼頁面 (/password-reset)
  • 客製化會員編輯頁面 (/post.php?post=id&action=edit)
  • 會員呈現頁面 (/user/user帳號)
  • 會員帳戶編輯頁面 (/account/general/)
  • 會員密碼編輯頁面 (/account/password/)
  • 會員隱私設定編輯頁面 (/account/privacy/)

待完成

  • 首頁 (/members)

一些頁面例如 登出頁會員隱私設定編輯頁面,或是重複功能的頁面 會員密碼編輯頁面 ,我們這邊不過多做呈現和講解,因為相對較單純也不太會出大問題。

實作律師卡片呈現頁

呈現卡片
律師卡片頁是 會員列表頁面(/member) ,我們期望此頁能夠根據我們在 會員編輯頁面(/user/id_name/?um_action=edit) 讓會員客製化填入的資訊去進行呈現,UM 也已經預先幫我們產生好 member 頁,讓我們看看它長什麼樣子:

https://ithelp.ithome.com.tw/upload/images/20201013/20130334BgGpUJk1Py.png

發現什麼都沒有,為何呢?
讓我們回到 WP 後台,點擊 UM會員列表,其實會發現會員列表已經有相當多功能了,以免費的外掛來說該有的都有,可說是非常佛心!這邊我們看到 一般選項顯示會員角色,可以選擇要呈現的角色資訊,把權限欄位設定為顯示 Subscriber,基本上就能只顯示會員資訊

https://ithelp.ithome.com.tw/upload/images/20201013/20130334b4TkL6yD3O.png

呈現方式能調整為 Grid 以及 List ,我們兩者都想要故都勾選,預設為 Grid,這邊我們也來看看切換效果

https://media.giphy.com/media/1h0bqfXzQwIEEuAEg2/giphy.gif

呈現卡片資訊
即便呈現了頁面但是看起來相當單調

Grid
https://ithelp.ithome.com.tw/upload/images/20201013/201303348gNpFKn9zU.png

List
https://ithelp.ithome.com.tw/upload/images/20201013/20130334SSVOXmh5rF.png

接著我們希望在卡片頁面上預設呈現 學歷個人網址
並且增加下拉按鈕,按了之後呈現 法律專業領域經辦過的案件social media 連結
我們透過 UM會員列表 中的 個人資料卡 做到這些項目

  • 選擇要在標語中顯示的欄位 : 添加 學經歷、個人網頁
  • 在標語下顯示額外的會員信息:添加 法律專業領域、經辦過的案件
  • Show social connect icons in extra user information section :勾選後呈現社群連結按鈕
  • Hide extra user information to the reveal section:勾選後能進行下拉式伸縮效果

完成後成品如下:

https://media.giphy.com/media/vQjjMTXhGDVnAcF6qr/giphy.gif

https://media.giphy.com/media/ILnCKSbzn5s3TPljwk/giphy.gif

補充
稍微補充一下 UM會員列表 提供的功能區塊:

https://ithelp.ithome.com.tw/upload/images/20201013/20130334XW2ffsJCUg.png

剛剛基本上已經用過 一般選項 以及 個人資料卡這邊就不再特別介紹
但是 UM 還幫我們做更多

  • Sorting:決定卡片如何排序,甚至可以客製化排序規則,這點真的非常棒
  • 搜尋:可以搜尋的權限角色、定義搜尋時的條件(例如性別、年齡),當然也提供了搜尋的客製化,此功能也相當實用
  • 結果 & 分頁:可定義每一頁的卡片數量、手機每頁顯示的數量等等RWD設定

member頁面結果
最後讓我們看看在多會員註冊下呈現結果如何

Grid
https://ithelp.ithome.com.tw/upload/images/20201013/20130334Usmgc115Ia.png

List
https://ithelp.ithome.com.tw/upload/images/20201014/20130334aOi7YALxFD.png

以結果來說已經讓人相當滿意,不要忘記我們都只是用了他原生提供的功能,甚至還沒寫到半行程式已經能做到這麼棒的功能,如此一來我們也已經完成了 會員列表(/member) 頁面,基本重要的頁面我們都已經完成。

首先,大部分的頁面功能看起來都做完了,但仍舊有些小問題的不完美,頁面有些邏輯不通地方,例如重置密碼、註冊、登出、登入、會員列表、會員、帳號、Sample Page等頁面管理此時都在同一頁上,無論登入前後都會出現,這邊我們調整邏輯,期望的呈現如:

  • 登入前看到:註冊、登入、會員列表
  • 登入後看到:登出、會員、會員列表、帳號管理
  • 移除:Sample Page、重置密碼

Sample Page 直接從後台移除,並且將首頁透過 設定->靜態頁面 定義首頁為會員列表

再來利用 WP 提供的預設方法 is_user_logged_in() 調整登入前與登入後的顯示

if(is_user_logged_in()){
        $myStr = "
        <script>
        document.getElementsByClassName('page_item page-item-16')[0].remove();
        document.getElementsByClassName('page_item page-item-11')[0].remove();
        document.getElementsByClassName('page_item page-item-12')[0].remove();
        </script>
        ";
        echo $myStr;
    } else{
        $myStr = "
        <script>
        document.getElementsByClassName('page_item page-item-15')[0].remove();
        document.getElementsByClassName('page_item page-item-16')[0].remove();
        document.getElementsByClassName('page_item page-item-14')[0].remove();
        document.getElementsByClassName('page_item page-item-10')[0].remove();
        </script>
        ";
        echo $myStr;
    }

以上大致的介面和功能都做完囉~


結論

本篇由鐵人比賽最後四篇文章實作開始建置,從 WP 會員網站建置的觀點切入,透過 UM 外掛,不到一週的時間完成一個基本功能的會員網頁,或許還沒到非常美觀,不過該有的功能可以說都有。此次建置網頁資料DEMO呈現部分特別感謝楊律師、蔡律師、吳律師、黃律師們的支持,後續我們將此作品網頁稱為 ohmylaw,作為回饋,我們會持續更新網頁功能,也將此網頁開源讓更多律師以及諮詢法律案件的朋友進行使用。