會員網站完整教學

會員網站分類

在開始建立會員網站之前，需要先釐清楚，什麼是會員網站？會員網站的目的是什麼？會員的功能與權限需要做到什麼程度？不同的會員功能，網站建置的方法都不相同，接下來會簡單跟大家說明各種會員網站的差異。

會員網站要怎麼分類？為了方便理解，把會員網站分為前台會員內容與後台會員管理兩大類。前台展示與後台管理的分界線，這樣讓大家可以比較清楚的知道，該從什麼地方開始著手規劃自己的會員網站。

• 前台會員內容：在 WordPress 網站最常見到的作法就是，網站內容限制訪客（會員）閱讀（Restrict Content），訪客到達網站後會有無法閱讀的內容，或是只可以看到部分內容，例如文章、頁面、區塊、圖片、影片、檔案下載…等，都需要訪客透過登入（註冊）會員，才可以閱讀（下載）到這些所謂的會員專屬內容（會員限制內容）。這類會員網站的設計方式，通常管理者比較單純，只需要把重點放在內容的限定上。
• 後台會員管理：就 WordPress 網站來說，最常見到的作法，就是網站提供會員註冊功能，同時提供註冊會員行使管理、編輯、修改、刪除…等等權限，註冊會員可以登入網站進行新增、修改、發佈內容的動作，有些會員網站更進一步，可以做到會員之間的社群連動、討論、線上交談等，這些更複雜的功能，都需要在網站建立前最好詳細的規劃。
• 當然這兩項也可以結合成所謂的第三項，既擁有會員限制內容，也開放會員發表內容的建置系統，所以在開始會員網站之前，網站規劃的重要性可見一般。

---

會員外掛程式

會員管理設計在 WordPress 生態有著非常大的需求，在官網外掛程式區，可以找到非常多的外掛程式，都是與建立會員系統有關，從眾多的外掛程式過濾後，提出幾個比較適合大家的外掛程式來做說明，謝謝耐心閱讀。

• Members – Membership & User Role Editor Plugin 這是一款超過 30萬安裝啟用數的熱門外掛程式，對於會員的設定項目非常多，可以自訂會員權限，可以說是一款針對後台會員管理的功能外掛程式，雖然也有提供內容限制的功能，不過免費版本提供的設計比較少，只能針對整篇文章做限制的設定，無法針對文章內容的部分區塊作限制。
• 啟用安裝數：300,000+
• 開發資訊：2009 年起開發至今
• 評分：4.9 星，滿分為 5 星
• 繁體中文本地化：目前暫無
• 外掛程式下載網址：https://tw.wordpress.org/plugins/members/

---

• Ultimate Member – 使用者個人資料、註冊、登入、成員目錄、內容存取限制及成員資格外掛，這是一款超過 20萬安裝啟用數的熱門會員外掛程式。這款外掛程式提供頁面建立精靈的設計，一鍵就可以自動建立使用者、密碼重設、帳號、登入、登出、註冊…等頁面，也提供會員權限管理功能，支援內容限制閱讀，更棒的是還提供區塊限制閱讀的設計，這個功能會讓內容設計更靈活更實用。
• 啟用安裝數：200,000+
• 開發資訊：2015 年起開發至今
• 評分：4.4 星，滿分為 5 星
• 繁體中文本地化：31％
• 外掛程式下載網址：https://tw.wordpress.org/plugins/ultimate-member/

---

• Paid Memberships Pro 會員外掛程式，這個外掛程式在 WordPress 官網上，也是非常熱門的會員外掛程式，有超過 9萬的安裝啟用數，不過在去年 2024 年 10 月 17 日宣布退出 WordPress 官方外掛程式區，改成自己建立外掛程式資料庫維護，已經從外掛程式區下架了。不過大家一樣可以在他的官網下載到免費版本安裝使用。
• 這個外掛程式安裝啟用後，提供設定精靈，可以一步一步的完成網站的會員系統設定。這款外掛程式提供了付款的設計，是一款專門為付費訂閱制所設計的會員外掛程式。支援限定內容設計，不論是整篇文章或是部分區塊都可以，基本上可以說是非常全面的一款會員外掛程式。
• 啟用安裝數：90,000+ （截至下架前）
• 開發資訊：2010 年起開發至今
• 評分：4.5 星，滿分為 5 星
• 繁體中文本地化：目前暫無
• 外掛程式下載網址：https://www.paidmembershipspro.com

---

• Password Protected 密碼防護外掛程式，也是一款非常受歡迎的內容限制外掛程式，有超過 30萬的安裝啟用數。免費版本提供的功能很簡單，可以設定的項目很少，如果你是想要建立私密網站，也就是說網站完全不對外開放的話，那麼可以參考這個外掛程式，如果想要建立內容限制閱讀的話，這個外掛程式就非常不適合，因為很多功能都需要升級到付費版本才可以使用。
• 啟用安裝數：300,000+
• 開發資訊：2012 年起開發至今
• 評分：4.4 星，滿分為 5 星
• 繁體中文本地化：目前暫無
• 外掛程式下載網址：https://tw.wordpress.org/plugins/password-protected/

---

• Content Control 內容管理外掛程式，這也是一款非常受歡迎的內容控制外掛程式，有超過 4萬的安裝啟用數，而且幾乎都是五顆星的評價，實測以後發現，這個外掛程式可以自訂限制閱讀的項目，也可以設定限制內容或是部分內容給訪客閱讀，支援區塊編輯器中的區塊控制功能，如果是想要建立會員限定內容的朋友，那麼這的確是一款非常實用的外掛程式，安裝容易、操作簡單，也很適合新手朋友的 WordPress 網站使用。
• 啟用安裝數：40,000+
• 開發資訊：2019 年起開發至今
• 評分：4.9 星，滿分為 5 星
• 繁體中文本地化：目前暫無
• 外掛程式下載網址：https://tw.wordpress.org/plugins/content-control/

---

• User Profile Builder 會員資訊編輯外掛程式，這是一款開發歷史（2011）悠久的外掛程式，目前是由幾位外掛程式開發者所開發維護，其中的 cozmoslabs 開發者就同時就有好幾款熱門的外掛程式。從外掛程式的名稱就可以知道主要功能是針對會員的個人資訊進行編輯設計的外掛程式，不過對於內容限定閱讀功能也同樣有提供，如果是注重需要漂亮的會員資訊頁面的網站，那麼可以參考這一個外掛程式。
• 搭配同一個開發者另外一款 Paid Membership Subscriptions 付費訂閱外掛程式，就可以建立出一個付費機制的會員網站系統。
• 啟用安裝數：50,000+
• 開發資訊：2011 年起開發至今
• 評分：4.7 星，滿分為 5 星
• 繁體中文本地化：目前暫無
• 外掛程式下載網址：https://tw.wordpress.org/plugins/profile-builder/

---

會員網站實作

以 WordPress 來說，它本身就是一套功能非常強大的內容管理系統（Content Management System 簡稱 CMS），在預設的情況下本身就預建了五個使用者角色，分別是網站管理員（Administrator）、編輯（Editor）、作者（Author）、投稿者（Contributor）與訂閱者（Subscriber）。基於這個使用者角色分級，我們可以依據不同成員註冊，來建立一個成員擁有不同權限的會員網站，建立這樣類型的會員網站，不需要任何額外的外掛程式或是程式碼就可以達成。

今天示範的教學實作內容，除了搭配預設的使用者角色（會員）加上 Block Visibility 外掛程式，來建立一個內容專屬會員限定的會員系統。

而選擇 Block Visibility 外掛程式，而不是前面介紹的會員或是內容限制的外掛程式，最主要得原因是 Block Visibility 外掛程式，是一款針對區塊編輯器所設計的附加功能外掛程式，我們可以對區塊作非常多的功能設計，透過他的功能來建立會員專屬內容，個人覺得這是最好方法，維護操作都相對輕鬆很多，有興趣的朋友請繼續閱讀。

Block Visibility 外掛程式

• 登入 WordPress 網站控制台，請到外掛/安裝外掛，關鍵字請輸入 Block Visibility，找到後請點擊立即安裝。

• 外掛程式安裝完成啟用以後，採用預設的設定，就可以開始使用了。在開始使用以前，先跟大家說明一下設定需要注意的項目。
• General Settings 一般設定，這裡是外掛程式的通用設定項目。
  • Editor/Contextual Indicators：這裡的顏色設計會在區塊編輯時，使用 Block Visibility 外掛程式後，展現的辨識顏色，方便我們知道哪些區塊作了 Block Visibility 設定。
  • Editor/Contextual Block Opacity：也可以設計成透明效果，需要的話在這個地方設定。
  • Editor/Toolbar Controls：是否啟用區塊工具欄選單。
  • Editor/Help Notices & Popovers：是否在編輯器中啟用協助通知。
  • Editor/Utilities：是否啟用工具來管理 Block Visibility 設定（拷貝，導入等）。
• User Permissions 使用者權限，選擇要不要將 Block Visibility 功能開放給其他權限的成員使用，預設是停用。
• Full Control Mode 完全控制模式，預設是啟用。
• Uninstall 移除外掛程式，移除 Block Visibility 外掛程式時，同時移除外掛程式留下的所有設定，預設是啟用的。這個動作會將原本限制閱讀的內容，全部公開，使用時請確實確認。

• 外掛程式的設定項目看起來很多，也還沒有繁體中文本地化，不過沒有關係，如果有不明白的設定，可以點擊設定項目右側的 information 圖示，會有設定項目的說明提示。

• Visibility Controls 可見度控制設定：以下的設定項目，讓我們可以在區塊編輯器中，設定外掛程式可見度的相關功能，透過啟用或是停用來設定外掛程式可見度的項目。
  • General/Default visibility controls：一般設定/預設可見度設定，可以選擇在編輯器中預設的功能顯示，這裡保留先不選擇，等實際操作後選擇個人常用項目就可以。
  • General/Enable local visibility controls：讓可見度設定可以在所有區塊上使用，預設使啟用的。
  • Hide Block：Block Visibility 外掛程式是針對可見度的設計，同時也提供隱藏區塊功能，預設是啟用。
  • Visibility Presets：可見度預設，也就是全站套用一個設定的意思，預設是啟用這個設計。
  • Browser & Device (User Agent)：瀏覽器、裝置（使用者代理程式）可見度設定，預設是啟用。
  • Cookie：Cookie 是瀏覽網站時，網站傳送給瀏覽器的一小段文字，可讓網站儲存訪客的瀏覽資訊，方便下次瀏覽相同網站時套用同樣的設定，預設是啟用。
  • Date & Time：Block Visibility 外掛程式日期與時間的設定，預設也是啟用。
  • Location：這裡指的是區塊所處的位置，例如文章、分類…等的可見度設定，預設也是啟用。
  • Metadata (Custom Fields)：使用自訂欄位的朋友就需要這個功能，預設也是啟用。
  • Query String：字串查詢控制項目，可以讓管理者控制查詢字串有條件的顯示區塊，預設也是啟用。
  • Referral Source：參照連結網址控制項目，可根據訪客到達網站的網域或 URL 有條件的顯示區塊，預設啟用。
  • Screen Size：螢幕尺寸，這裡可以設定不同裝置的尺寸，預設是啟用。
  • URL Path：網址路徑控制項目，可以根據區塊所在頁面的 URL 有條件的顯示該區塊，預設是啟用。
  • User Role：使用者角色設定項目，可以讓區塊可見度依據使用者角色來顯示，預設是啟用。

• Block Manager 區塊管理，外掛程式的可見度功能要不要在區塊編輯器中的功能區塊套用設定，都可以在這裡做相關設定，不想啟用 Block Visibility 外掛程式提供的可見度功能，只需要將勾選取消就可以了。
• 這裡的項目設定非常多，建議大家使用 Block Visibility 外掛程式一段時間後，知道自己網站的主要需求與設計，再回頭來調整就可以，將不必要的功能項目停用，除了更好的運作效能，也可以增進網站內容的編輯效率。

Block Visibility 操作示範

接下來我會示範如何透過 Block Visibility 外掛程式，來建立會員專屬內容，想要閱讀會員專屬內容的訪客，需要註冊、登入會員才可以閱讀。

• 接著示範教學的操作步驟，使用區塊編輯器來編輯文章，在編輯畫面的右側功能選單，可以看到 Visibility + 選單，點擊以後就可以看到外掛程式提供的可見度設定項目。

• 以截圖中的範例，我們要將文章中間區塊的文字與圖片（多重欄位設計），設定為會員專屬的內容，所以我們先點選多重欄位 ❶，這樣才會選取到文字與圖片，接著點選 Visibility + 選單 ❷，接著選擇 User Role ❸。

• User Role 欄位選擇 Logged-in，這個方法最簡單，設定以後，限制閱讀的內容，只有登入的使用者可以看見，不過這個方式沒有會員選項區分，功能稍嫌簡陋了點，這裡先不採用這種設定。

• 同樣的 User Role 欄位，請選擇 User roles，接著在 Role 規則的欄位請選擇 Administrator（網站管理員）與 Subscriber（訂閱者），選擇管理者是避免管理者自己都看不到限制內容，Subscriber（訂閱者）則是 WordPress 網站內建預設的使用者角色，完全不需要增加其他訂閱設計就可以完成。

• 這裡的設定要特別留意，在 User roles 欄位下方的 Hide from selected roles 隱藏設定不要誤觸啟用，會產生錯誤效果。

• 設定完成以後，回到網站前台，可以看到這個圖文區塊，對訪客來說已經隱藏起來了。

• 教學示範網站使用的佈景主題是 Blocksy，這個佈景主題內建了會員登入是彈出視窗效果，漂亮又實用，而且登入後直接在當前文章，不需要重新到訪，非常方便。
• 接下來我們稍微增加一點設計，讓這個會員專屬內容的介面更友善一些。我們在會員專屬內容區塊前，新增一個會員專屬區塊的提示區塊（自訂 HTML），同時填入底下登入的語法：

<p>會員專屬內容，請先<a href="#account-modal" class="ct-account-item" aria-label="登入" style="display:inline-block;">登入</a>。</p>

• 接著這個登入提示區塊，一樣需要設定可見度，我們選擇登入後就不需要呈現，因此在 Visibility + 選單請選擇 User Role 欄位，選擇 logged-out。

• 設定完成以後，回到網站前台，可以看到這篇文章中的會員專屬內容區塊，出現會員請登入的提示區塊。這個效果比原來的簡單設計，可以更貼近訪客的使用行為。

• 在前台的文章區塊點擊登入連結，會彈出會員登入視窗，方便會員登入後閱讀專屬內容。註：這個登入彈出視窗效果，是 Blocksy 佈景主題內建預設的效果。

• 會員登入成功以後，就可以看到這個會員專屬的限制內容。

會員網站範例總結

這次的教學內容操作以 Block Visibility 外掛程式為例，最主要的目的就是，它與區塊編輯器的相容性非常好。只要是區塊編輯器中的功能區塊，幾乎都可以使用 Block Visibility 外掛程式的可見度設計。這個優異的功能不僅僅是可見度設定，也可以透過日期、時間，來設定會員內容限制閱讀的時間，超過時間以後開放給全部的訪客閱讀，透過這些功能互相搭配，可以建立一個效果非常專業的會員網站，只需要確實做好規劃就可以。

如果你也想要建立一個會員網站來拉近訪客與網站的距離，那麼可以試試今天分享的教學內容。如果有什麼問題都歡迎透過聯繫表單一同討論，有其他網站架設教學需求，也歡迎隨時與我討論，麥克斯塾會持續分享網站架設的完整教學內容，也謝謝大家耐心閱讀。

// Redirect All Users 返回當前頁面
add_filter( 'login_redirect', function( $redirect_to, $requested_redirect_to, $user ) {
    if ( ! $requested_redirect_to ) {
        $referrer = wp_get_referer();
    if ( $referrer && ! str_contains( $referrer, 'wp-login' ) && ! str_contains( $referrer, 'wp-admin' ) ) {
            $redirect_to = $referrer;
        }
    }
    return $redirect_to;
}, 10, 3 );