如何自定義 WordPress 登錄頁面:提升品牌形象和用戶體驗的詳細指南

默認情況下,訪問者在你的網站上看到的登錄頁面與管理員使用的登錄頁面相同。雖然此頁面功能齊全,但設計非常簡單,留有大量空白,WordPress 徽標位于正中央。它對支持你的品牌或為訪問者提供用戶友好的體驗沒有多大幫助。

圖片[1]-如何自定義 WordPress 登錄頁面:提升品牌形象和用戶體驗的詳細指南-光子波動網 | 專業(yè)WordPress修復服務,全球范圍,快速響應

創(chuàng)建自定義登錄頁面是你可以對 WordPress 網站進行的相對簡單的改進。在本文中,我們將討論 WordPress 自定義登錄頁面的優(yōu)勢,介紹創(chuàng)建登錄頁面的幾種方法,并探討一些用戶體驗和安全性的最佳實踐。

為什么需要自定義 WordPress 登錄頁面

自定義 WordPress 登錄頁面并不一定是一項復雜的項目。只需進行一些簡單的調整,例如將 WordPress 徽標換成你自己的徽標并更改背景。

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

  • 方便使用的:自定義頁面可以讓登錄過程更直觀,更加方便用戶操作。
  • 專業(yè)的:自定義頁面可以提升品牌形象,讓網站看起來更專業(yè)。
  • 視覺吸引力:通過添加品牌元素和個性化設計,可以讓頁面更加美觀。
  • 信息豐富:您可以在登錄頁面上展示重要的通知和信息,增加其功能性。
  • 安全的:通過增加安全措施,可以增強登錄頁面的安全性,保護用戶數據。

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

圖片[2]-如何自定義 WordPress 登錄頁面:提升品牌形象和用戶體驗的詳細指南-光子波動網 | 專業(yè)WordPress修復服務,全球范圍,快速響應

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

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

1. 使用 SeedProd 創(chuàng)建 WordPress 自定義登錄頁面

SeedProd 插件是一種直觀的方式來自定義你的登錄頁面。還可以創(chuàng)建自定義 404 頁面、維護模式頁面、“即將推出”頁面和其它登錄頁面

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

步驟 1:安裝并激活 SeedProd Pro 首先,轉到儀表板中的插件頁面并選擇添加新插件。搜索 SeedProd 并安裝。安裝完成后,單擊啟用激活。

圖片[3]-如何自定義 WordPress 登錄頁面:提升品牌形象和用戶體驗的詳細指南-光子波動網 | 專業(yè)WordPress修復服務,全球范圍,快速響應

接下來,需要升級到高級計劃。為此,請單擊 SeedProd 選項卡中的“獲取專業(yè)版”,然后購買高級版本的激活密鑰。

步驟 2:使用登錄頁面模板創(chuàng)建登錄頁面 激活 SeedProd Pro 后,將鼠標懸停在 SeedProd 選項卡上并選擇“登陸頁面”。

選擇“設置登錄頁面”以使用預建模板自定義你的新登錄頁面。然后進入編輯器,可以在其中設計新的登錄頁面。

圖片[4]-如何自定義 WordPress 登錄頁面:提升品牌形象和用戶體驗的詳細指南-光子波動網 | 專業(yè)WordPress修復服務,全球范圍,快速響應

SeedProd 編輯器的行為與 WordPress 塊編輯器非常相似,可讓你輕松添加和修改頁面的各個方面。

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

可以使用區(qū)塊編輯器添加其它文本、圖片、表格等,就像添加普通帖子一樣。只需根據你的喜好自定義此頁面,然后單擊屏幕右上角的“保存”按鈕即可。

圖片[5]-如何自定義 WordPress 登錄頁面:提升品牌形象和用戶體驗的詳細指南-光子波動網 | 專業(yè)WordPress修復服務,全球范圍,快速響應

步驟 3:激活新的登錄頁面 保存設計后,退出編輯屏幕并返回儀表板中的 SeedProd 登陸頁面屏幕。將登錄頁面模塊中的開關切換為活動,以將默認登錄頁面替換為新設計的登錄頁面。

注銷并返回查看其運行情況!重新登錄之前,測試重置密碼鏈接和其它功能。

2. 使用 LoginPress 修改登錄頁面

如果尋找更經濟實惠且更簡單的產品,LoginPress 是一款方便的免費插件,可用于自定義你的登錄頁面。它缺少 SeedPod Pro 的一些功能和優(yōu)化,但為 WordPress 完整網站編輯器添加了功能,輕松自定義你的登錄頁面。按以下步驟操作:

步驟 1:安裝并激活 LoginPress 插件 在儀表板的插件頁面中,選擇“添加新插件”并搜索“LoginPress”。安裝并激活插件。

圖片[6]-如何自定義 WordPress 登錄頁面:提升品牌形象和用戶體驗的詳細指南-光子波動網 | 專業(yè)WordPress修復服務,全球范圍,快速響應

步驟 2:使用定制器修改登錄頁面 安裝并激活 LoginPress 后,在 WordPress 儀表板左側看到一個新選項卡。將鼠標懸停在 LoginPress 選項卡上,然后選擇 Customizer 來修改你的登錄頁面。

圖片[7]-如何自定義 WordPress 登錄頁面:提升品牌形象和用戶體驗的詳細指南-光子波動網 | 專業(yè)WordPress修復服務,全球范圍,快速響應

將直接進入完整站點編輯器內的登錄頁面。將看到以下功能的圖標:

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

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

無法像使用 SeedProd Pro 中的塊編輯器那樣完全自由地編輯此頁面,但這足以自定義絕大多數登錄頁面。

第 3 步:探索其它功能并考慮升級 某些功能僅在 LoginPress 高級計劃中可用,例如 reCAPTCHA 模塊。對于大多數中小型 WordPress 網站來說,免費版本足以創(chuàng)建自定義登錄頁面。

建議的修改 如果選擇這種方式自定義登錄頁面,那么更換徽標可能是你要做的第一件事。只需點擊默認徽標旁邊的藍色鉛筆圖標即可上傳你自己的徽標。

接下來,可以嘗試其他一些模板,看看它們是否適合你的風格。如果沒有,可以隨時上傳自己的模板,或者簡單地使用你品牌的主色調創(chuàng)建背景。

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

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

圖片[8]-如何自定義 WordPress 登錄頁面:提升品牌形象和用戶體驗的詳細指南-光子波動網 | 專業(yè)WordPress修復服務,全球范圍,快速響應

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

具體如何使用自定義代碼調整登錄頁面取決于你自己。讓我們來看一個你可能想要進行的簡單更改示例。

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

步驟 1:備份你的網站 每當手動修改網站上的文件或文件夾時,最好創(chuàng)建備份。

定期進行全站備份總是一個好主意,盡管你至少應該復制你計劃修改的所有文件。在這種情況下,你將對 functions.php 文件進行更改。

第 2 步:創(chuàng)建并上傳你的徽標 當然,需要一張徽標圖片來替換默認徽標。將想要使用的圖片上傳到你的媒體庫。

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

可以在 WordPress 之外調整圖片大小,也可以在媒體庫中調整。要執(zhí)行后者,只需在上傳圖片后單擊圖片,然后選擇右側縮略圖附近的“編輯圖片” 。你可以選擇尺寸并單擊“縮放”以調整其大小。然后保存圖片并繼續(xù)。

下一步將需要圖像的 URL,因此請單擊“將 URL 復制到剪貼板”按鈕或保持此窗口打開。

步驟 3:修改 functions.php 文件 接下來,找到你的 functions.php 文件。通過文件傳輸協議 (FTP) 訪問你的主題文件夾。此文件夾應與你的主題同名,并位于你網站的 wp-content 文件夾中。

圖片[9]-如何自定義 WordPress 登錄頁面:提升品牌形象和用戶體驗的詳細指南-光子波動網 | 專業(yè)WordPress修復服務,全球范圍,快速響應

要在登錄屏幕上切換 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 粘貼到“YOUR IMAGE URL HERE”占位符的位置進行替換。更改后,保存 functions.php 文件。

圖片[10]-如何自定義 WordPress 登錄頁面:提升品牌形象和用戶體驗的詳細指南-光子波動網 | 專業(yè)WordPress修復服務,全球范圍,快速響應

步驟 4:訪問你的登錄頁面 退出并返回登錄頁面。

看到你的徽標取代了舊徽標。如果尺寸看起來不對,可以通過更改代碼片段中的高度、寬度和背景像素值來調整尺寸。

如果發(fā)現任何異常,只需恢復備份即可恢復更改。還可以使用之前創(chuàng)建的備份副本覆蓋 functions.php 文件。

如何保護你的 WordPress 登錄頁面

在實現自定義登錄頁面時,需要注意一些事項,以確保網站的安全和健康。登錄頁面是黑客和機器人的主要目標,因此必須嚴密保護它。以下是幾種保護方法:

雙因素身份驗證 (2FA)

圖片[11]-如何自定義 WordPress 登錄頁面:提升品牌形象和用戶體驗的詳細指南-光子波動網 | 專業(yè)WordPress修復服務,全球范圍,快速響應

雙重身份驗證(也稱為 2FA)可大大降低賬戶被黑客入侵的可能性。使用 2FA,除了需要用戶名和密碼外,當訪問者嘗試從新設備或未注冊的設備登錄時,還需要第二種身份驗證形式。

例如,如果黑客能夠獲得網站某位用戶的登錄憑據,他們就可以直接登錄該帳戶并造成破壞。有時黑客只需根據用戶名猜出密碼即可。實施 2FA 后,還需要第二種驗證形式。

通常,這是以電子郵件或文本的形式發(fā)送給帳戶持有人,以確認他們正在嘗試登錄。由于黑客不太可能訪問用戶的電子郵件或設備,因此這幾乎可以確保用戶是真實的。

通??梢酝ㄟ^允許用戶注冊設備來加快 2FA,這樣來自該來源的登錄嘗試就不需要每次都進行驗證。有許多插件可用于在你的網站上設置 2FA。如果你的網站處理任何類型的敏感信息或財務信息,這一點尤其重要。

CAPTCHA 和 reCAPTCHA

圖片[12]-如何自定義 WordPress 登錄頁面:提升品牌形象和用戶體驗的詳細指南-光子波動網 | 專業(yè)WordPress修復服務,全球范圍,快速響應

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

在 WordPress 中添加 CAPTCHA 的目的是阻止這些機器人嘗試登錄??赡苡龅竭^這些測試。它們過去以扭曲的單詞形式出現,必須破譯這些單詞并將其輸入到框中。

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

圖片[13]-如何自定義 WordPress 登錄頁面:提升品牌形象和用戶體驗的詳細指南-光子波動網 | 專業(yè)WordPress修復服務,全球范圍,快速響應

reCAPTCHA 是該技術的一種高級形式,它幾乎不需要人類用戶的輸入即可阻止機器人。LoginPress 在其 Pro 版本中包含了 reCAPTCHA 技術,或者可以在特定插件或更全面的安全工具中找到 CAPTCHA 應用程序。

反網絡釣魚通知

竊取登錄憑據的一種低技術策略是模仿權威來源并直接索取。這被稱為網絡釣魚。

例如,有人可能會使用你或你公司的名稱創(chuàng)建電子郵件地址,然后發(fā)送電子郵件要求提供登錄憑據以解決問題。如果電子郵件和地址令人信服,有些人可能會上鉤并做出回應,泄露他們的帳戶信息。

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

總結:

自定義登錄頁面可以改善用戶體驗,讓你的網站看起來更專業(yè),并可用于分享重要信息。

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

  • 使用 SeedProd 之類的插件創(chuàng)建一個全新的登錄頁面。
  • 使用 LoginPress 等免費工具修改你的登錄頁面。
  • 使用自定義代碼進行手動更改,例如交換默認徽標。

為了充分利用你的登錄屏幕,插件可讓你輕松自定義頁面,完全符合你的需要。


聯系我們
教程看不懂?聯系我們?yōu)槟赓M解答!免費助力個人,小企站點!
客服微信
客服微信
電話:020-2206-9892
QQ咨詢:1025174874
郵件:info@361sale.com
工作時間:周一至周五,9:30-18:30,節(jié)假日休息
? 轉載聲明
本文作者:xiesong
THE END
喜歡就支持一下吧
點贊0 分享
評論 搶沙發(fā)

請登錄后發(fā)表評論

    暫無評論內容