在WordPress中創建自定義登錄,註冊和密碼頁面

WordPress標配各種類型的表單,包括登錄,註冊,密碼保護和聯繫表單等。但是,這些是簡單的對話框,用戶可以選擇僅填寫電子郵件或密碼,當然,您需要更動態的表單!

此外,要運行由社區支持的網站(如WordPress會員網站或高級在線商店),您需要經常向用戶顯示登錄名和密碼頁面。由於不歡迎使用默認的登錄,註冊或密碼保護表單,因此您應該個性化表單中的所有元素,以創造更好的用戶體驗。

在本文中,我們將討論創建自定義WordPress登錄,註冊和密碼頁面的常見原因,然後提供自定義頁面的解決方案。無論您是經驗豐富的WordPress用戶,還是只是想在WordPress世界中放縱腳步,我們的詳細指南都將簡化您的自定義表單構建體驗。

為什麼要設置登錄頁面,註冊頁面和密碼頁面的樣式

為什麼要自定義WordPress表單有很多原因。

保持品牌一致性

WordPress登錄和註冊頁面顯示WordPress品牌和徽標,默認情況下會鏈接到WordPress.org。如果您是唯一擁有管理員許可權的人,那就很好。

但是,如果每天都有很多成員登錄您的網站,為什麼不用WordPress徽標代替徽標來增加品牌知名度呢?此外,通過在登錄頁面上顯示徽標,它可以使您的企業看起來更專業,並在公司品牌中保持一致性。

改善的用戶體驗

默認的WordPress登錄頁面看起來很普通而且很無聊。因此,當我們說為表單設置樣式時,這不僅意味著僅更改設計,還為用戶登錄後提供了更好的用戶體驗。登錄後,請確保他們進入的頁面看起來不錯並具有他們需要的所有信息,以改善他們的體驗。

甚至只要給用戶提供在密碼錶單上鍵入密碼時顯示或隱藏密碼的選項,就可以改善您的用戶體驗,因此請確保您正在設計的表單都經過深思熟慮。

保護您的WordPress網站

自定義默認表單還可以提高您網站的安全性。由於WordPress對所有網站都使用默認的登錄URL https://yourdomain.com/wp-admin,因此黑客可以輕鬆地搜索您的登錄頁面,並嘗試登錄蠻力攻擊。

這是自定義登錄URL派上用場的地方。您可以將/ wp-admin條目更改為更複雜的地址,以使自動腳本和黑客無法找到它。您甚至可以在登錄名和密碼頁面中應用驗證碼和其他安全措施,以減少垃圾郵件。

增強導航

插入諸如導航鏈接或社交圖標之類的元素可以為訪問者帶來額外的價值,以及一種促進和增進社交渠道的方式。

因此,總而言之,創建自定義登錄名或密碼錶單的價值比您最初想像的要大。

使用WPForms插件創建自定義登錄頁面

現在,讓我們學習使用WPForms插件創建自定義登錄頁面。但是在我們這樣做之前,讓我們先看一些鼓舞人心的示例,以使我們了解如何玩此自定義登錄遊戲。

啟發WordPress登錄頁面的示例

有些網站會根據網站主題調整其登錄表單,而另一些網站則以酷炫的背景圖像打動訪客。以下是出色的自定義WordPress登錄頁面的一些示例。

WPForms登錄頁面

WPForms自定義登錄頁面使用與WordPress默認登錄表單不同的布局。頁面的左列顯示品牌徽標以及用於填寫電子郵件地址和密碼的區域,而右列則介紹和促進其社區。他們甚至添加了不同的號召性用語,例如在Facebook上引入WPForms VIP圈子組,以及「了解更多並加入」社區的按鈕。

MITS貸款管理評論

與WPForms登錄表單包含大量促銷信息和自定義鼓舞人心的背景不同,MITSLoan Management Review對登錄表單採取了更為最小的方法。沒有多餘的CTA或彩色圖像,而是僅顯示品牌名稱,電子郵件和密碼欄位,忘記密碼鏈接和首頁重定向鏈接。

銀耳藻

如果您查看WordPress的默認登錄頁面,然後遇到Diprella的頁面,我們確定您會說「哇」。這個自定義的登錄頁面以GIF格式結合了登錄頁面和登錄頁面,不僅引人注目而且與您通常遇到的內容有所不同,因此它確實引人注目。

我們介紹了3個流行且啟發性的自定義WordPress登錄頁面示例。您現在為自己創建一個感到興奮嗎?

現在,讓我們探索WPForms插件如何提供幫助。

使用WPForms插件創建自定義WordPress登錄頁面

WPForms被認為是WordPress資料庫上最流行的表單生成器插件,已有200萬用戶。該插件使您不僅可以創建聯繫表單,還可以創建自定義登錄和註冊表單。

步驟1:安裝WPforms插件

首先,您必須安裝插件。從WordPress導航菜單轉到Plugin→Add New。然後在「關鍵字」框中搜索「 WPForms」。只需從這裡安裝並激活插件即可。

一旦激活,WPforms將出現在您的WordPress側邊欄中。您可以單擊WPforms圖標以轉到「設置」頁面,然後輸入顯示在WPForms網站上您的帳戶下方的許可證密鑰。

步驟2:安裝用戶註冊表格插件

由於WPForms主要幫助創建聯繫表單,因此您需要插入User Registration Forms插件,以便在WordPress中構建自定義用戶註冊和登錄表單。

首先轉到導航菜單中WPForms下的Addons。接下來,查找「用戶註冊表單」插件,然後單擊「安裝插件」按鈕。現在,您可以創建自己的自定義登錄表單了。

步驟3:使用WPForms插件創建自定義登錄表單

以下指南向您展示如何輕鬆創建和自定義登錄頁面:

  1. 轉到WPForms→添加新項,然後查找用戶登錄表單模板。
  2. 將滑鼠懸停在模板上,然後單擊「創建用戶登錄表單」按鈕。
  3. 選擇要添加到表單的其他欄位以及必填欄位。

步驟4:將自定義登錄表單插入WordPress頁面

您需要在自定義表單之前將其嵌入登錄頁面。為此,只需在編輯屏幕上將WPForms塊添加到頁面中,然後選擇剛創建的表單即可。

除非您使用頁面構建器來創建自定義頁面布局,否則WPForms將默認使用主題的頁面模板和樣式。使用頁面構建器,您可以添加背景圖像,徽標和列以顯示文本。

自定義登錄徽標

要顯示品牌徽標並更改登錄頁面URL,請執行以下5個步驟:

前往WordPress儀錶板中外觀下的編輯器

在樣式表下選擇您的主題函數(functions.php)文件

將此代碼放置在functions.php文件中

函數wpb_login_logo(){?>

<?php}
add_action('login_enqueue_scripts','wpb_login_logo');

將背景圖片網址替換為所需的圖片網址

將以下代碼添加到您的functions.php文件中。儘管您使用上面的代碼修改了徽標,但它仍鏈接到WordPress網站。以下代碼有助於將WordPress網站網址替換為您的網站網址

函數wpb_login_logo_url(){
返回home_url();
}
add_filter('login_headerurl','wpb_login_logo_url');

函數wpb_login_logo_url_title(){
返回「您的網站名稱和信息」;
}
add_filter('login_headertitle','wpb_login_logo_url_title');

將「您的網站名稱和信息」更改為您的網站品牌名稱。

WordPress中的樣式用戶註冊頁面

註冊頁面用於將用戶信息保存在資料庫中,以供將來訪問。您可以收集有關目標受眾的有用信息,例如他們的興趣或社交媒體資料。

WordPress提供的內置註冊頁面沒有吸引人的功能,因此有必要升級此頁面。

如何使用Ultimate Member插件自定義WordPress註冊頁面

Ultimate Member提供了一個出色的解決方案,可以使用簡單的拖放生成器來創建前端用戶註冊頁面。此功能使您可以控制頁面的外觀以及頁面上顯示的元素。

安裝和激活後,該插件將直接嵌入到您的WordPress管理側邊欄中。單擊Ultimate Member圖標→Forms以開始使用該插件。

除了用戶名,電子郵件地址和密碼等必填欄位外,Ultimate Member中的「默認註冊」表單還提供了許多其他欄位。只需單擊表單底部的加號,您將看到一個欄位管理器,您可以在其中選擇其他欄位。

每個選項旁邊的鉛筆圖標可讓您調整名稱。您也可以使用插件的拖放生成器在表單上進行更改,甚至可以添加背景圖片或插入文本框。

切記點擊「更新」按鈕以保存您的更改並生效。

自定義WordPress密碼保護頁面

如前所述,定製受密碼保護的頁面的設計也可以改善用戶體驗。您只需要執行幾行代碼即可。

如果您使用的是Password Protect WordPress Pro插件來鎖定內容,則以下是受保護頁面或帖子的默認密碼形式:

很明顯,密碼錶並非引人注目。因此,是時候採取行動並通過自定義密碼來最大程度地利用密碼了。自定義表單必須執行兩個主要步驟:

步驟1:轉到您的(子)主題文件夾,然後打開functions.php文件。

步驟2:將以下代碼段添加到文件內容的底部。必須包括紅線,以便我們的插件功能正常運行。

add_filter('ppw_custom_entire_site_login_form','custom_login_form');
函數custom_login_form(){
返回'

';
}

顯示和隱藏密碼

「顯示和隱藏密碼」選項為您的用戶創造了更好的用戶體驗,因為他們可以檢查輸入密碼時是否出錯。

要創建一個允許用戶顯示密碼的複選框,請在Password Protect WordPress Pro插件提供的ppwp_customize_password_form掛鉤中添加幾行代碼。

自定義錯誤的密碼錯誤消息

默認情況下,該插件不允許您顯示錯誤的密碼錯誤消息。為了顯示和更改此消息,請將以下代碼添加到您的functions.php文件中

<?php
add_filter(「 ppwp_text_for_entering_wrong_password」,「 custom_message」);
函數custom_message($ message){
返回'

你的信息

';
}
?>

準備創建自定義WordPress表單了嗎?

自定義登錄名,註冊名和密碼錶可以使您的品牌獲得顯著的知名度,增強站點安全性,並增強站點導航。如果有這麼多好處,為什麼還要使用默認的WordPress登錄表單?

您還有其他關於如何創建自定義登錄表單,註冊表單或密碼錶單的問題嗎?發表評論以告知我們,或者您可以通過admin@wpblog.com向我們發送電子郵件!

WordPress中的「創建自定義登錄,註冊和密碼頁面」一文首先出現在WPblog上。

相關文章