使用平面 UI 構建自定義 WordPress 登錄表單

最後更新 - 2021 年 7 月 8 日

WordPress 已經存在了相當長的一段時間。 最初是博客的門戶，現在已成為負責運營全球近一半網站的內容管理系統。 其簡單而直觀的界面和可定制的設計使其成為全球 Web 開發人員和設計師從頭開始構建網站的首選。

任何使用 WordPress 的人都會關注細節和原創性，以增強用戶體驗並提高點擊率。 大多數開發人員主要只關注主題，但對於會員網站和其他平台，起點是登錄頁面。 想像一下，如果您是網站上的新註冊會員，並登錄到與非註冊會員類似的屏幕，則影響會略微減弱，讓您感到相當不滿意。 但是，擁有一個定制的 WordPress 登錄頁面以適應您的業務的要求和美學，會給訪問者留下更好的印象並激起他們的興趣。

為了幫助解決這個問題，我們總結了一些簡單的指南，以包含您的自定義 WordPress 登錄頁面的樣式，該頁面在視覺上與您的網站設計方案集成。

構建沒有插件的自定義 WordPress 登錄頁面

可以通過更新所選主題的 function.php 文件中的源代碼來對 WordPress 登錄頁面進行多項更改。 但是，一旦您更新 WordPress，這些更改就會丟失。 這是因為登錄頁面的主題樣式表不是 WordPress 主題設置的一部分，這需要您為自定義登錄頁面創建另一個樣式表。

首先在您的主題文件夾中創建一個名為“Login”的文件夾，然後添加一個名為custom-login-style.css的 .txt 文件。 從那裡開始，您可以繼續進行一些基本修改，以自定義登錄頁面並為其添加唯一性。

更改背景

要更新頁面或特定按鈕的背景顏色，您將選擇背景顏色：#222222並將十六進制代碼更改為您選擇的顏色。 借助調色板來選擇一種與您的商業審美相得益彰且具有視覺吸引力的顏色。

此外，如果您想改變登錄頁面的背景圖片，請選擇代碼行background-image: url(logo_login.png')並將logo_login.png替換為您更新後的圖片文件 URL 的文件名.

希望客戶記住其品牌的企業可以將 WordPress 徽標更改為他們的自定義徽標。 將自定義徽標圖像文件保存到登錄文件夾後，將文件名替換為background-image: url('logo_login')代碼中的自定義徽標。

通過調整填充和邊距自定義登錄表單

開發人員可以調整登錄表單以使他們的頁面具有吸引力並適當地適合其站點的外觀。 從按鈕的內邊距到標籤的顏色和字體大小等。您可以在按鈕內添加更多空間，通過增加內邊距，文本不會顯得擠壓； 只需增加代碼填充中的數字：12px 12px 12px 12px。 如果您希望在按鈕外部創建更多空間以使周圍元素不緊密排列，您可以通過增加代碼邊距中的邊距空間來實現：12px 12px 12px 12px。 即使像添加一些空白這樣簡單的事情也會共同影響登錄頁面的最終外觀，並使其看起來更加統一。

更改字體大小和顏色

您可以使用代碼font-size: 15px通過將數字調整為您喜歡的大小來更改段落文本、鏈接或表單字段的字體大小。 通過更新代碼顏色中的顏色：#222222並替換顏色，可以對字體顏色進行相同的操作。

修改登錄錯誤信息

隨著互聯網上網絡犯罪和詐騙的增加，Web 開發人員和企業主不能在他們的網站上冒險並丟失機密數據。 當用戶匆忙輸入錯誤的登錄憑據時，會自動生成默認錯誤消息。 雖然這是向用戶發出此錯誤的信號，但黑客可能會嘗試破解登錄數據。 因此，阻止黑客的最佳方法是更改​​ function.php文件中的錯誤消息。

總而言之，那些擁有豐富 CSS 知識的人可以最終控制其 WordPress 登錄表單的樣式和自定義。 但是，如果您缺乏編碼技能並且它限制了您創建自定義登錄頁面的能力，那麼請不要擔心！ WordPress 存儲庫中有多種插件選項可供您使用，以簡化WordPress Web 開發過程，我們為您列出了最受歡迎的選項。

登錄定制器插件

Login Customizer 是最用戶友好的插件之一，它允許您直接從 WordPress Customizer 進行更改。 經過簡單的安裝過程後，您可以從外觀選項卡中的WordPress 儀表板輕鬆訪問它。 單擊開始定制，它會將您重定向到定制器屏幕，您可以在其中根據自己的喜好重新設計所有區域。

Colorlib 登錄定制器

Colorlib 登錄定制器是一個足智多謀且靈活的工具，它具有高級插件中的所有功能，但免費提供。 其廣泛的獨特功能使其成為希望為其用戶構建自定義解決方案的 Web 開發人員的最終選擇。 這也允許通過 WordPress Customizer 進行自定義，因此您可以輕鬆導航並重新構建您的登錄頁面。

總之

最後，自定義登錄頁面的方法不止一種，歡迎所有經驗水平的開發人員嘗試。 重要的是自定義 WordPress 登錄頁面與實際站點的美學相匹配和補充，以增強用戶體驗。 自定義您網站的登錄頁面是取悅客戶和建立品牌形象的一種簡單而有效的方式。 從簡單開始並在基礎上進行構建可以將簡單的屏幕變成壯觀的畫面，並為客戶提供他們從未見過的個性化在線體驗。