如何在 WordPress 中創建自定義登錄頁面(3 種方法)

已發表: 2022-07-26

默認情況下,訪問者在您網站上看到的登錄頁面與管理員使用的登錄頁面相同。 雖然這個頁面很實用,但它的設計非常基本,有很多空白區域和 WordPress 標誌的正面和中心。 它對支持您的品牌或為訪問者提供用戶友好的體驗沒有多大作用。

創建自定義登錄頁面是您可以對 WordPress 網站進行的相對簡單的改進。 根據您運行的網站類型,您的許多訪問者可能會在某些時候與此頁面進行交互,因此自定義 WordPress 登錄頁面提供了改善他們體驗的機會。

在本文中,我們將討論 WordPress 自定義登錄頁面的優勢,介紹幾種創建方法,並探討一些用戶體驗和安全性的最佳實踐。

為什麼您可能需要自定義 WordPress 登錄頁面

自定義您的 WordPress 登錄頁面不一定是一個複雜的項目。 像將 WordPress 徽標換成自己的徽標和更改背景一樣簡單的調整可以大有幫助。

自定義登錄頁面可以更多:

  • 方便使用的
  • 專業的
  • 視覺上吸引人
  • 內容豐富
  • 安全的

此外,進行這些改進既快速又簡單。 通過現在花一點時間,您可以為將來使用它的每個訪問者改進您的登錄頁面。

自定義 WordPress 登錄頁面的好處

現在,讓我們仔細看看我們上面概述的一些優勢,這樣您就會明白為什麼這是值得的。 默認的 WordPress 登錄頁面非常簡單:

默認 WordPress 登錄頁面

如果您是唯一看到它的人,那麼默認登錄頁面就可以了。 但是,如果您的觀眾經常使用它來登錄,那麼您肯定可以進行一些快速升級。

將品牌添加到登錄頁面會讓人感覺它屬於您的網站,並提供更專業的外觀。 訪問者應該認識到它是您網站的自然和有意構建的部分 - 而不是事後的想法。

此頁面也是與您的受眾分享新聞和其他信息的絕佳機會。 例如,您可以包含一個部分,您可以在其中發布更新供訪問者在登錄時瀏覽——有關您的組織的新聞、新產品、推薦信或您想分享的有關您公司的任何其他內容。

一個好的登錄頁面的重要特徵

雖然一個網站的登錄頁面可能看起來與另一個網站非常不同,但它們都傾向於共享一些共同的功能。 顯然,所有登錄頁面都需要訪問者登錄的方式,無論是通過傳統的用戶名和密碼組合還是第三方身份驗證。

擁有重置密碼或查找用戶名的鏈接也是標準做法。 此鏈接通常會將人們帶到不同的頁面,他們可以在其中輸入他們的電子郵件地址以接收檢索或重置其信息的說明。 忘記密碼? 鏈接通常位於數據輸入字段和登錄按鈕附近。

為了保護您和您的訪客,設置一些基本的安全功能也是明智之舉。 例如,您可能希望更改管理員登錄您網站的方式,以防止未經授權的嘗試。

如果您的網站從其用戶那裡收集任何個人信息,您需要特別注意保護這些帳戶免受機器人和黑客的攻擊。 CAPTCHA 技術、雙重身份驗證 (2FA) 和反網絡釣魚通知是您可以採取的一些措施來保護您的用戶。 稍後我們將更詳細地討論這些選項。

如何創建自定義 WordPress 登錄頁面(3 種方法)

幸運的是,創建 WordPress 自定義登錄頁面比您想像的要容易得多。 在幾分鐘內,您可以添加您的徽標並進行其他簡單的更改。 在幾個小時內,您就可以擁有一個完全自定義的登錄頁面,這將改善您的訪問者的體驗。

以下是創建自定義 WordPress 登錄頁面的三種流行方法:

1. 使用 SeedProd 創建一個 WordPress 自定義登錄頁面

SeedProd 插件是一種自定義登錄頁面的直觀方式。 您還可以創建自定義 404 頁面、維護模式頁面、“即將推出”頁面和其他登錄頁面。

請注意,404 頁面和登錄頁面模塊需要 SeedProd Pro 計劃。 要構建您的登錄頁面,只需按照以下步驟操作:

第 1 步:安裝並激活 SeedProd Pro

首先,轉到儀表板中的Plugins頁面,然後選擇Add New 。 搜索 SeedProd 並免費安裝。 安裝完成後,點擊激活按鈕。

存儲庫中的 SeedProd 插件

接下來,您需要升級到高級計劃。 為此,請單擊SeedProd選項卡中的Get Pro 。 這會將您重定向到他們的網站,您可以在其中購買高級版的激活密鑰。

第 2 步:使用登錄頁面模板創建登錄頁面

激活 SeedProd Pro 後,將鼠標懸停在SeedProd選項卡上並選擇Landing Pages 。 在以下屏幕上,您將看到四個模板。

導航到登陸頁面選項卡

選擇設置登錄頁面以使用預構建的模板自定義您的新登錄頁面。 然後您將被帶到編輯器,您可以在其中設計新的登錄頁面。

SeedProd 編輯器的行為很像 WordPress 塊編輯器,允許您輕鬆添加和修改頁面的各個方面。 由於您選擇了登錄頁面模塊,因此您已經擁有內置登錄頁面的所有必要功能。

其中包括用戶名和密碼輸入框、記住我複選框、密碼重置鏈接、圖像和背景。

使用 SeedProd 創建登錄頁面

您可以使用塊編輯器添加其他文本、圖像、表單等,就像使用普通帖子一樣。 只需根據自己的喜好自定義此頁面,然後單擊屏幕右上角的保存按鈕。

第 3 步:激活您的新登錄頁面

保存設計後,退出編輯屏幕並返回儀表板中的SeedProd Landing Pages屏幕。 將“登錄頁面”模塊中的開關切換到“活動”,以用新設計的登錄頁面替換默認登錄頁面。

激活新的登錄頁面設計

現在,註銷並返回以查看它的運行情況! 在重新登錄之前測試重置密碼鏈接和其他功能。假設您是新訪問者,並考慮是否可以採取任何措施來進一步改善體驗。

其他注意事項

SeedProd 使添​​加圖像和其他元素變得非常容易,就像使用塊編輯器一樣。 重要的是要考慮所有可用的選項,看看是否有任何元素對您的登錄頁面有效。

您的登錄屏幕也不必隨著時間的推移保持不變。 您可以考慮定期發布更新的銷售圖片或特色內容建議。 當人們返回登錄時,您可以利用這個機會推薦新的或流行的內容。

當然,您還需要使用公司的調色板和字體來使所有內容與您網站的其他部分保持一致。 使用 SeedProd,您可以輕鬆地更換頁面的背景,因此可以隨意創建一些設計並根據季節或您認為合適的方式輪換它們以保持新鮮感。

2. 使用 LoginPress 修改您的登錄頁面

如果您正在尋找對預算更友好且更直接的東西,LoginPress 是一個方便的免費插件,您可以使用它來自定義您的登錄頁面。 它缺少 SeedPod Pro 的一些功能和潤色,但向 WordPress 全站點編輯器添加了功能,可以輕鬆自定義您的登錄頁面。 只需按照以下步驟使用它:

第 1 步:安裝並激活 LoginPress 插件

從儀表板的插件頁面中,選擇添加新並蒐索“LoginPress”。 安裝並激活插件以開始使用。

安裝 LoginPress 插件

在此階段無需升級 LoginPress,但您可以稍後選擇加入一些高級功能。 對於大多數登錄頁面,免費版本就足夠了。

第 2 步:使用定制器修改您的登錄頁面

安裝並激活 LoginPress 後,您將在 WordPress 儀表板的左側看到一個新選項卡。 將鼠標懸停在LoginPress選項卡上並選擇Customizer以修改您的登錄頁面。

使用 LoginPress Customizer 構建登錄頁面

您將被直接帶到完整站點編輯器中的登錄頁面。 您將看到以下功能的圖標:

  • 更改徽標
  • 自定義表單(用戶名和密碼)
  • 自定義按鈕(登錄)
  • 自定義導航(丟失密碼?)
  • 更改頁腳
  • 更改模板
  • 換背景

只需選擇相應的鉛筆或畫筆圖標即可修改該元素。 您只需點擊幾下即可輕鬆更換徽標、上傳自己的背景或更改表單和登錄按鈕。

設計帶有照片背景的登錄頁面

您不會像使用 SeedProd Pro 中的塊編輯器那樣擁有編輯此頁面的完全自由,但這對於絕大多數登錄頁面來說應該是足夠的自定義。 在左側菜單中,您會注意到完整站點編輯器中的一個新LoginPress選項卡,它添加了更多功能。

第 3 步:探索其他功能並考慮升級

某些功能僅適用於 LoginPress 高級計劃,例如 reCAPTCHA 模塊。 對於大多數中小型 WordPress 網站,免費版本足以創建自定義登錄頁面。

所提供的功能使您可以輕鬆快速地更改登錄頁面的許多方面,而無需任何編碼。 您將來始終可以選擇升級到 Pro 版本,因此請隨時從免費版本開始,看看它是否適合您的需求。

建議的修改

如果您選擇這種自定義登錄頁面的方法,那麼更換徽標可能是您要做的第一件事。 只需單擊默認徽標旁邊的藍色鉛筆圖標即可上傳您自己的徽標。

接下來,您可以嘗試其他一些模板,看看它們是否適合您的風格。 如果沒有,您可以隨時上傳自己的或使用您品牌的原色創建背景。

然後您可能會考慮更改實際表單中的字體或文本以與您網站的其餘部分保持一致。 您還需要確保所有鏈接都正常工作。

3.使用自定義代碼修改您的登錄頁面

最後,如果您不想使用插件,您還可以使用代碼自定義登錄頁面。 這需要更多的技術知識,但確實提供了最大的靈活性。

究竟如何使用自定義代碼調整登錄頁面取決於您。 讓我們看一個您可能想要進行的簡單更改的示例。

假設您想用自己的圖形手動替換登錄屏幕上的 WordPress 徽標。 這對於初學者來說可能看起來很嚇人,但對於任何熟悉訪問其網站文件和基本代碼操作的人來說並不難。 只需按照以下步驟操作:

第 1 步:備份您的網站

每當您手動修改站點上的文件或文件夾時,最好創建一個備份。 一次意外按鍵可能會破壞您的網站。

定期進行全站點備份總是一個好主意,儘管您至少應該為您計劃修改的任何文件製作副本。 在這種情況下,您將對functions.php文件進行更改。

第 2 步:創建並上傳您的徽標

當然,您將需要您的徽標圖像來替換默認圖像。 將您希望使用的圖像上傳到您的媒體庫。

雖然理論上您可以將圖像設置為任意大小,但大約 300 像素寬的尺寸非常適合默認登錄表單。 我們將使用 300×300 像素的示例來製作方形佔位符圖像。

您可以在 WordPress 之外調整圖像大小,或在媒體庫中這樣做。 要執行後者,只需在圖像上傳後單擊圖像,然後選擇右側縮略圖附近的編輯圖像。 您可以選擇尺寸並單擊縮放以調整其大小。 然後保存圖像並繼續。

在 WordPress 中調整圖像大小

下一步您將需要圖像的 URL,因此單擊將 URL 複製到剪貼板按鈕或保持此窗口打開。

第三步:修改functions.php文件

接下來,您需要找到您的functions.php文件。 為此,請通過文件傳輸協議 (FTP) 訪問您的主題文件夾。 此文件夾應與您的主題同名,並位於您網站的wp-content文件夾中。

要在登錄屏幕上交換 WordPress 徽標,請將此代碼添加到其中的functions.php文件中。 為了避免把它放在另一個腳本的中間,你可以簡單地將這個片段插入到文件的最後部分代碼的下面:

 function wpb_login_logo() { ?> <style type="text/css"> #login h1 a, .login h1 a { background-image: url(YOUR IMAGE URL HERE); height:300px; width:300px; background-size: 300px 300px; background-repeat: no-repeat; padding-bottom: 10px; } </style> <?php } add_action( 'login_enqueue_scripts', 'wpb_login_logo' );

將您從上一步複製的 URL 粘貼到此處的“您的圖像 URL”佔位符的位置。 這將用您的圖像替換 WordPress 徽標。 進行這些更改後,請務必保存functions.php文件。

第 4 步:訪問您的登錄頁面

註銷以返回您的登錄頁面。 如果您已經在登錄屏幕上,則需要重新加載頁面才能看到更改。

您應該看到您的徽標代替舊徽標。 如果尺寸看起來不合適,您可以通過更改代碼片段中的高度、寬度和背景 px 值輕鬆調整尺寸尺寸。

如果有任何問題,只需恢復備份即可恢復更改。 您還可以使用之前創建的備份副本覆蓋您的functions.php文件。

如何保護您的 WordPress 登錄頁面

在實施自定義登錄頁面時,您需要注意一些事項,以確保您網站的安全和健康。 登錄頁面是黑客和機器人的主要目標,因此將其牢牢鎖定至關重要。 這裡有幾種方法可以做到這一點:

雙重身份驗證 (2FA)

雙因素身份驗證(也稱為 2FA)大大降低了帳戶被黑的機會。 使用 2FA,除了需要用戶名和密碼外,當訪問者嘗試從新設備或未註冊設備登錄時,還需要第二種形式的身份驗證。

例如,如果黑客能夠獲取您的一個用戶的登錄憑據,他們可以簡單地登錄到該帳戶並造成嚴重破壞。 有時,黑客只能根據用戶名猜測密碼。 實施 2FA 後,還需要第二種形式的驗證。

通常這是以電子郵件或文本的形式發送給帳戶持有人,以確認他們正在嘗試登錄。由於黑客不太可能也可以訪問用戶的電子郵件或設備,所以這一切都只是確保用戶是真實的。

2FA 通常可以通過允許用戶註冊設備來加速,因此來自該來源的登錄嘗試不需要每次都進行驗證。 有許多可用的插件可讓您在您的網站上設置 2FA。 如果您的網站處理任何類型的敏感或財務信息,這一點尤其重要。

驗證碼和重新驗證碼

猜測登錄憑據的一種方法是使用機器人蠻力攻擊您的網站。 換句話說,程序會自動嘗試猜測常見的用戶名和密碼組合,直到成功。 這對人類來說似乎是一項艱鉅的任務,但機器人可以快速自動地完成這項工作,無需人工干預就能猜出數千個常見密碼。

驗證碼的目的是阻止這些機器人進行登錄嘗試。 您可能已經遇到過這些測試。 它們過去常常以扭曲的詞的形式出現,你必須破譯並輸入一個盒子。

驗證碼示例

更現代的驗證碼涉及選擇包含特定對象(如汽車或煙囪)的圖片。 這些測試對於機器人來說很難解決,因此可以有效地阻止暴力破解嘗試。

帶有圖片的驗證碼示例

reCAPTCHA 是這種技術的一種高級形式,可以在幾乎沒有人類用戶輸入的情況下阻止機器人。 LoginPress 在其 Pro 版本中包含 reCAPTCHA 技術,或者您可以找到特定插件或更全面的安全工具中包含的 CAPTCHA 應用程序。

反釣魚通知

竊取登錄憑據的低技術策略是模仿權威來源並簡單地索取它們。 這被稱為網絡釣魚。

例如,有人可以使用您或您公司的名稱創建一個電子郵件地址,然後發送一封電子郵件,要求提供登錄憑據以解決問題。 如果電子郵件和地址令人信服,有些人可能會上鉤並做出回應,從而洩露他們的帳戶信息。

防止這種情況的一種方法是發布反網絡釣魚通知,宣布您和您的公司永遠不會要求提供此類信息。 任何此類電子郵件或消息都應被視為垃圾郵件並被忽略。 登錄頁面上的簡單通知可能意味著成功的網絡釣魚嘗試和安全帳戶之間的區別。

把你最好的腳向前

雖然很容易忽略它並專注於您網站的其他方面,但自定義您的登錄頁面是一個值得的項目。 自定義登錄頁面可以改善用戶體驗,為您的網站提供更專業的感覺,並用於共享重要信息。

您可以使用以下方法更改您的 WordPress 登錄頁面:

  1. 使用 SeedProd 之類的插件創建一個全新的登錄頁面。
  2. 使用 LoginPress 等免費工具修改您的登錄頁面。
  3. 使用代碼進行手動更改,例如更換默認徽標。

為了充分利用您的登錄屏幕,插件可以輕鬆地按照您的需要自定義頁面。 在某些情況下,這是訪問者首先看到的頁面之一,因此讓它看起來最好是很重要的!