如何為 WordPress 啟用社群登入(3 個簡單步驟)
已發表: 2024-08-12在當今世界,時間是您可以獲得的最有價值的資產之一。確保觀眾節省網站時間是吸引和留住用戶的關鍵。你怎麼能這樣做呢?
實現這一目標的一種有效方法是為 WordPress 引入社交登入。
社群登入允許用戶使用 Facebook、Google、X(以前稱為 Twitter)或 LinkedIn 等社群媒體帳號進行註冊或登入。此方法簡化了身份驗證過程,並為使用者和網站管理員帶來好處。

除了省時之外,WordPress 的社群登入還有其他好處:
- 增強的使用者體驗:無憂的登入過程使訪客可以更輕鬆地參與您的內容、閱讀文章或下訂單。
- 降低跳出率:透過社群帳號登入的便利性可以顯著降低網站的放棄率,因為當流程快速且簡單時,使用者更有可能留下來並互動。
- 提高安全性:WordPress 的社群登入利用了主要社群媒體平台強大的安全措施,降低了密碼強度不夠時可能發生的密碼被盜的風險。
考慮到所有這些好處,您可能希望盡快開始在 WordPress 網站上實施社交登入。不知道從哪裡開始?別再猶豫了!您所需要的只是設定檔產生器和社交連接插件,以獲得 WordPress 的最佳社交登入。
如何開始
在本教學中,我們將使用 Profile Builder,這是一款適用於 WordPress 的一體化使用者註冊和管理外掛程式。使用此插件,您可以建立並完全自訂前端註冊、登入和編輯個人資料表單。除此之外,您還可以允許用戶使用最受歡迎的社群登入選項登錄,包括 Facebook、X 或 LinkedIn。
安裝 Profile Builder 的過程很簡單。它的安裝和啟用就像任何其他 WordPress 外掛一樣。
安裝設定檔產生器
為了能夠在 WordPress 網站上實現社交登錄,您首先需要安裝 Profile Builder。
首先也是最重要的,從官方網站取得您的 Profile Builder 授權。
執行此操作後,登入您的 Cozmoslabs 帳戶頁面,您將看到兩個按鈕:
- 與免費版本相關的按鈕 – 主插件
- 與付費版本相關的按鈕 - 在本例中為 Pro Download

下載 zip 檔案後,將其上傳到您的網站。只需前往 WordPress 管理介面上的外掛程式選單,然後點擊新增外掛程式 -> 上傳外掛程式。上傳後,請確保同時啟動它們。
最後,您需要安裝兩個插件:
- 設定檔產生器 – 可從主插件下載 按鈕
- Profile Builder Pro – 可從 Pro Download 下載 按鈕
一旦您獲得了 Profile Builder 的副本,花點時間註冊它也很重要。透過這種方式,您將收到自動更新、錯誤修復和進階支援。
只需轉到“設定檔產生器設定”,然後在“註冊網站”部分下,您可以新增序號,該序號將列在您的帳戶中。

設定和自訂登入頁面
現在您的外掛程式已準備就緒,是時候建立使用者頁面了,以便您的訪客能夠在您的網站上建立帳戶。您可以像 WordPress 網站上的任何其他新頁面一樣手動執行此操作,也可以使用設定精靈執行此操作。此工具可快速引導您完成設定流程,並允許您使用專用表單自動建立不同的使用者頁面,例如登入、註冊、編輯個人資料或密碼重設。
在 Profile Builder 選單圖示上,前往儀表板,然後按一下開啟設定精靈,您可以在其中告訴 Profile Builder 自動為您建立所有需要的使用者頁面。接下來,您可以從這裡進入並根據您的喜好編輯它們。

除了建立使用者表單並對其進行自訂之外,設定精靈還允許您在網站之上添加額外的功能。例如,您可以限制網站中的某些頁面僅對登入使用者可見。到達設定的最後一步後,設定精靈會將您重新導向至內容限制部分。

現在您已經建立了具有專用表單的登入頁面,是時候對其進行自訂了。
您只需造訪「設定檔產生器」選單圖示 -> 設定 -> 常規設定即可做到這一點,在「註冊網站」部分下,您將找到可供選擇的所有表單樣式。


若要預覽特定樣式的設計,請將滑鼠停留在所選樣式上,然後按一下「預覽」按鈕。
選擇一種樣式後,按一下右側的「儲存變更」按鈕儲存變更後,所選樣式將會啟動。
如何將社交登入新增至您的 WordPress 網站
1.啟用社群連結插件
為 WordPress 網站新增社群登入需要執行的下一步是啟用前面提到的 Social Connect 外掛。
只需轉到管理介面中的“設定檔產生器”選單圖標,然後選擇“附加元件”選項卡即可。
在「基本附加元件」部分中,按一下「啟動」以在您的網站上使用 Social Connect。

之後,「設定檔產生器」選單圖示下將出現一個名為「社群連線」的新子選單。
2.啟用社交登入應用程式
在 WordPress 網站上設定社交登入的下一步是為您需要的社交網路啟用並建立應用程式。
點擊您之前啟用的“社交連接”子選單,這將帶您進入“設定” 此附加組件的區域。

在此部分中,在首選社交登入上選擇啟用,然後為您需要的每個網路建立和設定社交 API 金鑰。
此步驟通常可能是設定中最具挑戰性的部分,因為每個社交網路都有其獨特且有時複雜的配置流程。但不用擔心,因為插件界麵包含整個過程的文檔,因此您可以在每個步驟中得到指導。
3. 選擇 WordPress 社群登入按鈕的顯示位置
配置社交登入選項後,您必須選擇這些選項在您網站上的顯示位置。您可以在“設定”中執行此操作。

一般來說,創建者希望這些按鈕出現在他們的登入表單上,但在註冊表單和編輯個人資料部分中也提供這些按鈕也是一個好主意。
透過允許現有用戶將他們的社交資料與其帳戶連接起來,您可以讓他們選擇更快地登入您的網站,同時他們的所有資訊仍然存在。
4.自訂社群登入按鈕
WordPress 社群登入上的設定檔產生器選項可讓您選擇根據需要自訂按鈕。

在此部分中,您可以變更按鈕的順序、位置、樣式和其他設置,以確保最後顯示的內容真實反映您的品牌風格。
除此之外,您還可以選擇完全停用預設 CSS,以便您可以按照自己想要的方式設定按鈕樣式。
5. 進行最後的調整
完成上述所有步驟後,您的登入表單應啟用社群登入選項。

此時,請隨意進行您認為合適的任何其他調整,直到找到最適合您網站的正確結果。
結論
使用 Profile Builder 外掛程式為 WordPress 啟用社群登入可以為使用者提供快速、安全且便利的登入方式,從而顯著增強網站的使用者體驗。
簡單回顧一下,以下是如何為 WordPress 啟用社群登入:
- 下載設定檔產生器並啟用社交連接附加元件。
- 啟用並配置社交登入應用程式。
- 選擇社群登入按鈕的位置。
- 自訂社群登入按鈕。
- 檢查並調整您的最終結果。
就是這樣!當您使用正確的工具時,在 WordPress 網站上啟用社交登入是多麼容易,而 Profile Builder 是一個很好的解決方案。