如何使用成員目錄模板創建用戶目錄

已發表: 2023-01-25

會員目錄模板使您可以輕鬆地以有序、美觀的方式在您的 WordPress 網站上顯示大量信息。

用戶列表目錄的功能是管理您的在線數據庫(例如員工、網絡中的企業、主題專家或介於兩者之間的任何事物)。 會員目錄(用戶列表)為您的訪問者提供易於瀏覽的搜索和過濾功能。 目錄創造了網絡和貿易機會,並允許人們聯繫和參與您的社區。 此外,還有許多 SEO 和營銷優勢!

在本教程中,我們將使用 5 個預先創建的 Profile Builder 成員目錄模板之一來創建一個複雜、美觀且最重要的是有用的成員目錄。 使用我們用戶友好的模板,您不需要任何編碼知識。 我們將提供創建完美用戶、員工或企業目錄的分步說明。

為什麼我需要一個帶有成員目錄模板的用戶列表目錄插件?

可以為您的站點創建手動信息列表或信息表,但很難以有用的方式呈現列表。 如果您的列表又長又復雜,您需要添加排序或過濾功能,否則您的用戶將無法獲得他們需要的內容。 保持手動列表更新是一場噩夢!

一個正確集成的用戶列表插件提供的成員目錄比表格和列表更容易維護,但也可以以其他方式為您服務。 只需點擊幾下,您就可以在網站的不同部分創建多個不同的會員目錄。 更重要的是,Profile Builder 插件實際上是 4 個重要的 WordPress 功能的組合:

  • 通過用戶表單從用戶那裡獲取所需信息的能力,
  • 並使用這些信息來管理用戶及其角色和能力,
  • 一切都在不損害您網站安全的情況下完成,
  • 同時仍然能夠通過會員目錄精美地顯示有用的信息

有關如何使用成員目錄模板創建成員目錄的說明

在本節中,我們將逐步舉例說明如何使用 Profile Builder 的成員目錄模板創建用戶列表。

第 1 步:安裝、設置和註冊 Profile Builder Pro

您需要安裝最新的 WordPress 和合適的主題。 對於本教程,我們將使用 Hello Elementor 主題。 我們將要求植物銷售商提供他們的專業領域,然後使用該信息顯示經過篩選的專業植物銷售商列表。

您還需要 Profile Builder PRO 插件。 首先選擇最適合您需求的 Profile Builder 計劃。 註冊並付款後,您將收到一封確認購買的電子郵件。

登錄您的 Cozmoslabs 帳戶。 轉到“下載”選項卡。 將 Profile Builder Main 和 Pro 壓縮文件下載到您的計算機。 接下來,轉到 WordPress 儀表板上的插件頁面。 一次將兩個檔案上傳到您的網站。 每次點擊安裝激活

在您的 WordPress 面板上完成設置後,您需要註冊 PRO 版本才能使用全部功能。 轉到Profile Builder → 註冊版本,通過註冊您的站點在您的網站和 Profile Builder PRO 之間創建連接。 使用 Cozmoslabs 帳戶頁面上許可證選項卡下顯示的密鑰或 SR(序列號)。 如果您在註冊方面需要任何幫助,請查看此分步文檔。

圖 1 顯示了帶有 SR 密鑰的 Cozmoslabs 帳戶頁面,用於在您的網站和 Profile Builder PRO 成員目錄模板之間創建連接
圖片 1:登錄您的 Cozmoslabs 帳戶。 使用 SR 鍵在您的網站和 Profile Builder Pro 之間創建連接

第 2 步:自定義您的註冊頁面

與其他高級插件(例如 WooCommerce)一樣,Profile Builder 插件可以自動創建新頁面。 單擊“創建表單頁面”按鈕。 它將創建您的編輯個人資料、登錄註冊頁面,並將您帶到 WordPress 儀表板上的頁面選項卡。 您新的“編輯個人資料”、“登錄”和“註冊”頁面將與您網站的外觀完美融合。 要進行檢查,請單擊懸停時出現的“查看”按鈕。

或者,識別您的 Profile Builder 頁面的最快方法是導航到主 Profile Builder 頁面,然後單擊藍色大按鈕“View Form Pages” 。 您還可以導航到Pages → All Pages

圖 2 顯示了在何處單擊“查看表單頁面”按鈕以查看預創建的 Profile Builder 頁面以供成員目錄模板使用
圖片 2:單擊“查看表單頁面”按鈕以查看所有成員目錄模板使用的預創建配置文件生成器頁面

如果您找不到預製的註冊頁面或想要添加新的註冊頁面,您可以創建一個新的。 只需從“表單字段”頁面複製註冊頁面短代碼並將其粘貼到空白頁面上。

另一個快捷方式是從 Gutenberg 塊菜單中選擇Profile Builder 的註冊塊(或任何其他用戶表單)。

圖 3 顯示了從 Gutenberg 塊菜單中選擇 Profile Builder 註冊表的位置
圖 3:從 Gutenberg 塊菜單中選擇 Profile Builder 註冊表

注意:請記住,您可以自定義註冊頁面註冊表單本身。 您的註冊頁面應包含所有相關信息,以確保用戶了解他們註冊的目的。 註冊頁面上的註冊表格應包含對您的業務模型和用戶列表有用的字段。

在下一步中,您將通過添加您特別需要的字段、刪除冗餘字段以及添加特殊值字段和規則來自定義預先創建的註冊表單以防止未經授權的操作。

自定義表單

導航到儀表板選項卡Profile Builder → Form Fields 。 出現激活用戶列表附加組件的提示。 如果您錯過了提示,您可以導航到附加組件頁面以激活附加組件。 我們建議您在開始自定義第一個表單之前激活用戶列表、多個註冊表單多個編輯配置文件表單附加組件

讓我們開始自定義默認的預創建表單吧!

默認情況下,新表單將包含您在此步驟中自定義的所有字段。 您可以通過導航到 Profile Builder Registration forms頁面並單擊Add New來創建新的或不同的表單。

注意:默認表單不會出現在該頁面上。 要編輯此原始默認表單,請轉至 Profile Builder表單字段頁面。

您的註冊表必須包含您作為業務經理所需的字段。 在此示例中,我們希望更改表格以要求註冊者提供他們在植物行業中的專業領域、位置和聯繫信息,以便為會員創建一個企業目錄。

Profile Builder 包括每個註冊表單的一些基本默認字段。 如果您向下滾動頁面,您會看到這些。 單擊要刪除的字段旁邊的刪除按鈕。 要開始添加新字段,請單擊“選擇選項”菜單字段中的箭頭,然後滾動彈出菜單以找到可供選擇的字段列表。

圖 4 顯示了點擊“選擇一個選項”的位置。默認基本字段顯示在所有成員目錄模板使用的表單字段選擇器下拉菜單的左側列中
圖 4:單擊“選擇一個選項”。 默認基本字段顯示在表單字段選擇器下拉菜單的左側列中

在單擊“添加字段”按鈕之前,選擇所需的字段並根據需要自定義它們。 在此示例中,我們添加了字段標題“Specialist Field” ,選擇了“多項選擇”字段類型,並添加了一些選項(Cacti、Shrubs、Trees 等)。

圖 5 顯示了新添加的字段標題“Specialist Field”,選擇“選擇”字段類型,並添加了一些選項。
圖 5:添加字段標題“Specialist Field”,選擇“選擇”字段類型,並添加一些選項

在下一步中,您將了解如何在會員目錄或用戶列表中顯示來自所有這些字段的信息,以使這些信息對您網站的訪問者有用。

第 3 步。創建 WordPress 用戶列表

如第 2 步所述,您需要先啟用用戶列表插件,然後再繼續。 我們建議您激活用戶列表、多個註冊表格和多個編輯個人資料表格附加組件。

圖 6 顯示了在何處激活附加組件以使用成員目錄模板
圖 6:要使用成員目錄模板,您必須首先啟用“用戶列表”附加組件

在 WordPress 儀表板上,在配置文件生成器選項卡下查找用戶列表。 點擊它。 在用戶列表頁面上,您會看到一個現成的、已發布的主默認用戶列表,名為 Userlisting,其短[wppb-list-users name="userlisting"]

如果您是用戶列表的新手,我們建議您不要編輯此列表,因為它可以在您學習時作為默認設置的便捷參考。 此外,在不添加過濾器的情況下使用此主列表來顯示您網站上的所有信息時要謹慎。

單擊頂部的添加新按鈕並為您的用戶列表(成員目錄)命名。

注意:如果您找不到添加新按鈕,請確保您已激活必要的附加組件(用戶列表、多個註冊表單和多個編輯配置文件表單附加組件)

圖 7 顯示瞭如何使用所有成員目錄模板共有的字段添加標題為 Plant Specialists、selected Contributors 和 Subscribers 的新用戶列表
圖 7:添加一個新的用戶列表,標題為 Plant Specialists、selected Contributors 和 Subscribers

自定義用戶列表設置

在此示例中,我們使用了使用過的列表標題“Plant specialists” ,並將要顯示的角色限制為“貢獻者”和“訂閱者”。 給你的用戶列表一個標題後,向下滾動一點到其他基本設置。 您可以選擇要包含的用戶角色,以及它們在用戶列表中的顯示方式。

例如,您可以對未登錄的用戶隱藏用戶列表,以便只有登錄的用戶才能看到該目錄。 如果您應該選擇Visible only to logged-in users ,則會出現一個進一步的菜單選項,您可以在其中進一步選擇它是否應該對所有登錄用戶可見,或者對客戶、訂閱者等可見。勾選“*”框使它對所有登錄用戶可見,但要謹慎對待向所有用戶公開敏感信息。

圖 8 顯示了在何處選擇選項以使用戶列表對所有用戶或僅選定用戶可見
圖 8:選擇選項以使用戶列表對所有或僅選定用戶可見

自定義多面菜單

頁面的下一部分是分面菜單。 添加方面意味著選擇哪些過濾器將在您的用戶列表頁面上可用。 大多數用戶都非常熟悉在購物網站上使用過濾器。 因此,您可以添加他們習慣使用的相同類型的過濾器,以幫助他們從您的站點獲取所需的信息。 例如,您可以讓他們按位置、專業領域、年齡等過濾搜索結果。

我們將添加一個過濾器以根據植物特產對成員進行排序,因此我們輸入“Specialty”作為我們要在頁面上顯示的標籤。 對於這個分面菜單示例,我們選擇了選擇多個作為分麵類型——因為您希望人們能夠同時選擇多個選項。 在Facet Meta字段中,我們使用下拉菜單選擇“Specialist In”字段作為過濾器的來源(Facet Meta)。

單擊添加條目。 根據需要重複相同的步驟添加盡可能多的過濾器。 單擊“添加條目”後,您的新過濾器將立即出現在“添加條目”按鈕正下方的過濾器(構面)摘要中。

圖 9 顯示瞭如何使用從所有成員目錄模板使用的選項中的“選擇多個”將方面“Plant Specialty”添加為標籤
圖 9:使用“選擇多個”將方面“Plant Specialty”添加為標籤

這是過濾器在前端的外觀:

前端的多面菜單

自定義搜索設置

接下來,選擇 Profile Builder 應如何定位信息以使搜索欄起作用。 此部分位於同一頁面上“多面菜單”部分的正下方。 當訪問者在搜索欄中搜索關鍵字時,通過勾選或取消選擇您要掃描的信息來選擇搜索功能

圖 10 顯示了在何處選擇新用戶列表的所有成員目錄模板使用的“搜索”設置
圖 10:為新用戶列表選擇​​“搜索”設置

使用成員目錄模板創建目錄

最後一部分是您選擇會員目錄模板並自定義格式以及您希望列表在網站前端顯示的方式。 如您所知,標準化網站上不同元素的設計和格式可能需要幾個小時。 這就是 Profile Builder 為您的用戶列表頁面提供 5 個預先設計的主題的原因。

有一個默認主題,外加 4 個其他自定義主題。 每個代表分別顯示表格、網格、框或列表的最佳方式。 當您將鼠標懸停在每個主題上時,您會看到一個用於預覽主題的按鈕和一個用於激活它的按鈕。

每個模板都包含一個會員目錄(用戶列表)顯示,在您的網站上顯示為有序列表,以及會員列表中每個條目的單獨頁面。 您將在此處顯示每個成員的詳細信息。

圖 11 顯示瞭如何預覽,然後激活成員目錄模板的主題
圖 11:預覽,然後激活成員目錄模板主題

成員目錄模板是一個很好的起點,但您可以進一步自定義每個主題。 現在,只需選擇您認為最好看並且最適合您要顯示的信息類型的那個。 您可以輕鬆切換到不同的主題,HTML 和 CSS 將自動更新為新的樣式。

默認模板僅顯示極簡排序功能,因此,對於此示例,我們使用Tablesi模板來說明其突出的篩選按鈕和目錄搜索字段。

使用標籤自定義要顯示的用戶信息

要自定義您希望在會員目錄中顯示的信息,請向下滾動以查看“所有用戶列表模板”子標題。 它看起來像這樣:

圖 12 顯示了要顯示的 HTML 用戶列表信息的摘要
圖 12:要顯示的 HTML 用戶列表信息摘要

注意:所有用戶列表模板用於自定義您網站上顯示的成員目錄(用戶列表)。 單用戶列表模板用於在人們單擊會員目錄中的“更多”按鈕時自定義單個會員的詳細信息 我們很快就會解決這個問題!)。

如果您對默認顯示字段沒問題,您可以將所有內容保持原樣。 如果您想向用戶目錄添加信息或從中刪除信息,您會在右側顯示欄的右側找到適用於每種列表類型的所有 Profile Builder 標籤。 在此示例中,我們通過刪除相應的行從成員目錄模板中刪除了“帖子數”,如下圖所示:

圖 13 顯示瞭如何從成員目錄模板默認列中刪除標題列“帖子數”
圖片 13:從成員目錄中刪除了默認成員目錄模板標題列“帖子數”

最後,讓我們自定義當訪問者單擊會員目錄中的“更多”或“查看”按鈕時我們希望各個條目的外觀。 向下滾動到單用戶列表模板

在此示例中,我們將在單用戶模板(個人資料列表)中添加另一個標籤,即“Specialist In”標籤。 只需突出顯示並複制右側的“專家”標籤和標籤,然後將其粘貼到左側。

圖 14 顯示自定義創建的“專家”字段已替換成員目錄模板默認的“暱稱”字段
圖片 14:添加了帶有自定義創建的“專家”字段的“專家”部分

使用重置功能修復錯誤

錯誤可能會發生,尤其是當您進行大量定制時。 幸運的是,您可以恢復默認設置以重新開始。 您可以重置一般用戶列表設置、所有用戶列表模板或單個用戶列表模板,或者,您可以通過重置所有內容從頭開始。 只需向上滾動到成員目錄模板部分。 將鼠標懸停在活動主題上。 單擊重置數據按鈕,然後選擇要重置的一個或多個設置。

圖 15 顯示了在何處選擇要在成員目錄模板中重置的數據類型
圖 15:在您使用的成員目錄模板中選擇您想要重置的數據類型。

第四步:發布會員目錄模板

當您對自定義感到滿意時,請點擊頂部的“發布”按鈕。 這將為您的用戶列表生成一個簡碼,您可以通過古騰堡塊將其粘貼或插入您網站上的任何頁面。

並且:Ta-Daa! 這就是您的新會員目錄在網站前端的樣子。 請注意 Tablesi 成員目錄模板突出的過濾器按鈕。 如果您不喜歡該外觀,只需選擇不同的模板即可。

屏幕截圖圖像 16 顯示了使用成員目錄模板時用戶目錄列表在您的網站上的樣子
圖片 16:這是使用成員目錄模板在您的網站上顯示的目錄

下圖顯示了當您使用其中一個成員目錄模板時單個用戶信息頁面的樣子。 您站點的訪問者可以通過單擊目錄列表上的“查看”或“更多”按鈕來訪問此頁面。

圖 17 顯示了使用成員目錄模板時單個用戶信息頁面的樣子
圖 17:這是個人用戶信息頁面的樣子。

結論

Profile Builder Pro 插件可以非常輕鬆地列出您的用戶,從而為您的站點增加真正的價值。 用戶註冊表和用戶列表顯示的預建模板將為您節省時間(和金錢!)。 Profile Builder Pro 為您提供 5 個易於使用的會員目錄模板,保證為您的企業增加新的盈利機會。

只需點擊幾下,即可將您的網站提升到一個新的水平:在此處下載 Profile Builder Pro!

配置文件生成器專業版

使用自定義字段創建漂亮的前端註冊和個人資料表單。 使用多合一用戶管理插件設置成員目錄、自定義重定向、自定義用戶電子郵件等。

獲取插件

或下載免費版

您是否使用 Profile Builder 為您的網站創建了一個或多個會員目錄或企業目錄? 幫助他人最大限度地發揮其網站的潛力。 在下面的評論部分分享您的經驗!