構建標籤WordPress登錄和註冊小部件

鑰匙要點

• >本文提供了有關如何構建自定義選項卡的WordPress登錄和註冊小部件的詳細指南，與默認的WordPress頁面相比，它可以更好地反映客戶或Web開發人員的設計和品牌。
• >小部件是使用QuickFlip jQuery庫構建的，以在登錄和註冊選項卡之間創建翻轉效果。註冊表格包括用戶名，密碼和電子郵件字段，而登錄表格沒有CAPTCHA。
>作者介紹了創建小部件的過程，包括打開輸出緩衝，擴展標準的WP_Widget類，創建兒童級和註冊小部件。本文還解釋瞭如何為登錄和註冊表格創建HTML代碼，處理新的用戶註冊，登錄用戶並創建後端窗口小部件設置表單。
• >
>本文還回答了有關構建標籤WordPress登錄和註冊小部件的幾個常見問題，包括如何自定義窗口小部件，添加無需編碼，解決訪問WordPress管理員的問題，在WordPress側欄中添加登錄表單，更改默認的WordPress登錄URL，確保小部件的安全性，向側邊欄中添加註冊表格，解決小部件不正常工作的問題，並添加社交登錄選項。
在過去的幾年中，對WordPress的定制註冊小部件的需求不斷增加。對WordPress的默認登錄和註冊頁面存在健康的不尊重，這完全是因為它們不直觀，因為它們可能無法反映客戶或Web開發人員的設計和品牌。 > 為了解決這個問題，有幾個開發人員發布了幾種登錄頁和註冊頁，但是好的頁面帶有價格，它們並不便宜。

> 但是，如果您在WordPress插件存儲庫中免費提供的內容感到失望，或者總體上感到失望，那麼您可以抬起精神，因為您可以學習如何免費創建標籤的WordPress登錄和註冊窗口小塊！您只需要犧牲一段時間的時間就可以掌握整個過程。一旦您獲得了簡單的知識；您應該在WordPress供電站點上有一個功能豐富的註冊頁面。

> 在本文中，我們將構建一個簡單的選項卡式登錄和註冊表格窗口小部件，並通過Quickflip jQuery庫使fluppipt效果成為可能。

>

如果您想跳到教程前，可以查看

登錄和註冊窗口小部件的演示

>並下載窗口小部件插件。

為了保持簡單，註冊表格將包含用戶名，密碼和電子郵件字段。登錄表格將不包含CAPTCHA。

>不打擾，讓我們開始從小部件開發開始。

>

小部件開發

首先，包括插件標題。

>

<span><span><?php </span></span><span><span>/*
</span></span><span><span>Plugin Name: Tabbed Login Registration Widget
</span></span><span><span>Plugin URI: https://www.sitepoint.com
</span></span><span><span>Description: A tabbed login and registration widget for WordPress
</span></span><span><span>Version: 1.0
</span></span><span><span>Author: Agbonghama Collins
</span></span><span><span>Author URI: http://w3guy.com
</span></span><span><span>License: GPL2
</span></span><span><span>*/</span></span></span>

>在正確進入小部件開發之前，我們需要打開輸出緩衝以防止任何警告：無法修改標頭信息 - 標頭已經發送了錯誤。

<span>// Turn on output buffering
</span><span>ob_start();</span>

>創建一個WordPress小部件，擴展標準WP_Widget類，包括必要的方法，最後註冊窗口小部件。

。

創建一個幼兒類擴展wp_widget類。

>

<span>class Tab_Login_Registration extends WP_Widget {</span>

靜態屬性$ login_registration_status將保存註冊和登錄表格生成的錯誤消息。

<span>static private $login_registration_status;</span>

>使用__construct（）魔術方法給小部件一個名稱和描述。

<span>/**
</span><span>	 * Register widget with WordPress.
</span><span>	 */
</span>	<span>function __construct() {
</span>		<span><span>parent::</span>__construct(
</span>			<span>'tab_login_registration', // Base ID
</span>			<span>__( 'Tabbed Login Registration Widget', 'text_domain' ), // Name
</span>			<span>array( 'description' => __( 'A tabbed login and registration widget for WordPress', 'text_domain' ), ) // Args
</span>		<span>);
</span>	<span>}</span>

>兩種方法 - login_form（）和registration_form（） - 返回登錄和註冊表格的HTML代碼將稍後創建。

<span>/**
</span><span>	 * Returns the HTML for the login form
</span><span>	 * <span>@return <span>string</span>
</span></span><span>	 */
</span>	<span>static function login_form() {
</span>		<span>$html = '<form method="post" action="'%20.%20esc_url(%20%24_SERVER%5B'REQUEST_URI'%5D%20)%20.%20'">';
</form></span>		<span>$html .= '<input type="text" name="login_username" placeholder="Username"><br>';
</span>		<span>$html .= '<input type="password" name="login_password" placeholder="Password"><br>';
</span>		<span>$html .= '<input type="checkbox" name="remember_login" value="true" checked> Remember Me<br>';
</span>		<span>$html .= '<input type="submit" name="login_submit" value="Login"><br>';
</span>		<span>$html .= '';
</span>
		<span>return $html;
</span>
	<span>}</span>

>下面的register_user（）處理新用戶的註冊。

<span>/**
</span><span>	 * Returns the HTML code for the registration form
</span><span>	 * <span>@return <span>string</span>
</span></span><span>	 */
</span>	<span>static function registration_form() {
</span>		<span>$html = '<form method="post" action="'%20.%20esc_url(%20%24_SERVER%5B'REQUEST_URI'%5D%20)%20.%20'">';
</form></span>		<span>$html .= '<input type="text" name="registration_username" placeholder="Username"><br>';
</span>		<span>$html .= '<input type="password" name="registration_password" placeholder="Password"><br>';
</span>		<span>$html .= '<input type="email" name="registration_email" placeholder="Email"><br>';
</span>		<span>$html .= '<input type="submit" name="reg_submit" value="Sign Up"><br>';
</span>		<span>$html .= '';
</span>
		<span>return $html;
</span>	<span>}</span>

這是該方法如何註冊新用戶。

>

<span>/**
</span><span>	 * Register new users
</span><span>	 */
</span>	<span>function register_user() {
</span>
		<span>if ( isset( $_POST['reg_submit'] ) ) {
</span>
			<span>$username = esc_attr( $_POST['registration_username'] );
</span>			<span>$password = esc_attr( $_POST['registration_password'] );
</span>			<span>$email    = esc_attr( $_POST['registration_email'] );
</span>
			<span>$register_user = wp_create_user( $username, $password, $email );
</span>
			<span>if ( $register_user && ! is_wp_error( $register_user ) ) {
</span>
				<span><span>self::</span>$login_registration_status = 'Registration completed.';
</span>			<span>} elseif ( is_wp_error( $register_user ) ) {
</span>				<span><span>self::</span>$login_registration_status = $register_user->get_error_message();
</span>			<span>}
</span>
		<span>}
</span>	<span>}</span>

首先，我們確保用戶實際註冊了一個帳戶。這是通過檢測單擊“註冊”按鈕來完成的，即已設置了$ _post ['reg_submit']。 然後，使用ESC_ATTR函數將html屬性的表單數據逃脫了表單數據。

然後，用戶輸入的用戶名，密碼和電子郵件將傳遞給WP_CREATE_USER（）函數，以將新用戶插入WordPress數據庫。

如果一切順利，屬性$ login_registration_status將設置為已完成的文本註冊，否則wp_create_user（）返回的錯誤將為值。

提交登錄表單時，用戶中的login_user（）函數在下面登錄。

允許我解釋login_user（）在用戶中如何登錄WordPress。

>

>類似於上述register_user（），首先，我們確保用戶試圖通過檢查$ _post ['login_submit']來登錄。

>

>創建用戶輸入的登錄憑據的關聯數組$ reds。

然後將關聯數組傳遞給WP_Signon進行身份驗證。

如果憑據認為有效，並且由WP_SIGNON被WP_SIGNON，則將用wp_redirect將用戶重定向到WordPress儀表板，否則屬性$ login_registration_status將其設置為登錄生成錯誤。

<span>/**
</span><span>	 * Login registered users
</span><span>	 */
</span>	<span>function login_user() {
</span>		<span>if ( isset( $_POST['login_submit'] ) ) {
</span>
			<span>$creds                  = array();
</span>			<span>$creds['user_login']    = esc_attr( $_POST['login_username'] );
</span>			<span>$creds['user_password'] = esc_attr( $_POST['login_password'] );
</span>			<span>$creds['remember']      = esc_attr( $_POST['remember_login'] );
</span>
			<span>$login_user = wp_signon( $creds, false );
</span>
			<span>if ( ! is_wp_error( $login_user ) ) {
</span>				<span>wp_redirect( home_url( 'wp-admin' ) );
</span>			<span>} elseif ( is_wp_error( $login_user ) ) {
</span>				<span><span>self::</span>$login_registration_status = $login_user->get_error_message();
</span>			<span>}
</span>		<span>}
</span>	<span>}</span>

>

>

>後端窗口小部件設置表單是由Form（）方法創建的，該方法將由一個字段組成，該字段將包含窗口小部件的標題。 >

>將小部件標題輸入表單字段時，update（）方法將數據掃描並保存到數據庫中以進行重複使用。

widget（）方法在WordPress的前端顯示選項卡式登錄和註冊表格。

<span><span><?php </span></span><span><span>/*
</span></span><span><span>Plugin Name: Tabbed Login Registration Widget
</span></span><span><span>Plugin URI: https://www.sitepoint.com
</span></span><span><span>Description: A tabbed login and registration widget for WordPress
</span></span><span><span>Version: 1.0
</span></span><span><span>Author: Agbonghama Collins
</span></span><span><span>Author URI: http://w3guy.com
</span></span><span><span>License: GPL2
</span></span><span><span>*/</span></span></span>

>代碼說明：JavaScript代碼將表格和翻轉效果添加到小部件。

>包括login_user（）和register_user（）以分別登錄註冊用戶或註冊新用戶。

> login_form（）和registration_form（）靜態方法顯示登錄和註冊表格。

>

>最後，我們關閉了小部件類。

<span>// Turn on output buffering
</span><span>ob_start();</span>

> widget類Tab_login_registration需要使用widgets_init掛鉤註冊，因此WordPress內部識別它。

我們仍然需要包括jQuery，窗口小部件CSS和QuickFlip庫才能在窗口小部件中獲取標籤和翻轉效果。

<span>class Tab_Login_Registration extends WP_Widget {</span>

> jQuery和QuickFlip JavaScript以及CSS以及WP_ENQUEUE_STYLE和WP_ENQUEUE_SCRIPT的wordpress/inqueue in to WordPress的標題。

我們完成了編碼登錄和註冊小部件的完成。

> 下面的

<span>static private $login_registration_status;</span>

是小部件的屏幕截圖。

>

查看窗口小部件的演示。

總結

>要進一步了解小部件的構建方式以及如何在WordPress網站上實現它，下載窗口小部件插件，其中包括jQuery，Quickflip和wideget stylesheet文件。

>

如果您對改進代碼有任何疑問或建議，請在評論中告訴我。

經常詢問有關構建選項卡的WordPress登錄和註冊小部件的問題

>如何自定義WordPress登錄和註冊小部件的外觀？

>可以通過CSS自定義WordPress登錄和註冊小部件的外觀。您可以在WordPress自定義器或主題樣式中添加自己的CSS。您可以更改顏色，字體，大小等，以匹配您網站的設計。請記住，在對代碼進行任何更改之前，請始終備份您的網站。

>我可以在不編碼的情況下向我的WordPress站點添加登錄名和註冊窗口小部件嗎？

是的，您可以添加登錄和註冊小部件無需編碼即可到達WordPress網站。有幾個可用的插件可以讓您這樣做。一些流行的選項包括登錄側欄小部件和用戶註冊和用戶配置文件。這些插件提供易於使用的接口和自定義選項。

>如果在添加登錄和註冊窗口小部件後無法訪問我的WordPress管理員，該怎麼辦？ t添加登錄名和註冊小部件後，訪問您的WordPress管理員，您可能需要禁用引起問題的插件。您可以通過FTP訪問網站的文件並重命名插件的文件夾來做到這一點。完成此操作後，請嘗試再次登錄。如果您仍然遇到麻煩，則可能需要聯繫託管提供商或向WordPress專家尋求幫助。

>如何在WordPress側邊欄中添加登錄表單？轉到WordPress儀表板中的窗口小部件，然後將元小部件拖到側邊欄中。 Meta小部件包含一個登錄鏈接，單擊時將顯示登錄表單。

我可以更改我的默認WordPress登錄url？

是的，您可以出於安全原因更改默認的WordPress登錄URL 。可以通過編輯網站的.HTACCESS文件（例如WPS HIDE登錄）（例如WPS HIDE登錄）來完成此操作。請記住要記下您的新登錄網址並確保安全。

>我可以使用其他插件將登錄窗口添加到我的WordPress站點嗎？

是的，有許多可用的插件這使您可以在WordPress站點中添加一個登錄小部件。一些流行的選項包括自定義登錄頁自定義器，登錄設計器和主題我的登錄名。這些插件提供了各種功能和自定義選項。

>

>如何確保我的WordPress登錄和註冊窗口小部件的安全性？

確保您的WordPress登錄和註冊窗口的安全性，一定要使用強，獨特的密碼，並保持WordPress網站和插件的最新狀態。您還可以使用WordFence或Sucuri之類的安全插件來添加額外的保護層。

我可以在我的WordPress側欄中添加註冊表格嗎？

是的，您可以將註冊表格添加到使用小部件的WordPress側邊欄。有幾個可用的插件可以讓您執行此操作，例如用戶註冊和用戶配置文件。這些插件提供易於使用的接口和自定義選項。

>如果我的登錄和註冊窗口小部件無法正常工作，該怎麼辦？

如果您的登錄和註冊窗口小部件無法正常工作，嘗試停用和重新激活插件。如果這無法解決問題，則可能與另一個插件或您的主題發生衝突。嘗試一個一個接一個地停用其他插件，以查看問題是否已解決。如果沒有，您可能需要聯繫插件的支持或從WordPress專家那裡尋求幫助。

>我可以在WordPress登錄和註冊窗口窗口中添加社交登錄選項嗎？ WordPress登錄和註冊小部件的社交登錄選項。有幾個可用的插件可以讓您執行此操作，例如NextEnd Social Login和WP Social Login。這些插件允許用戶使用其社交媒體帳戶進行註冊和登錄，從而使過程更快，更容易。

以上是構建標籤WordPress登錄和註冊小部件的詳細內容。更多資訊請關注PHP中文網其他相關文章！