鑰匙要點

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

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

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

>

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

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

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

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

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

>

小部件開發(fā)

首先，包括插件標題。

>

<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>

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

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

>創(chuàng)建一個WordPress小部件，擴展標準WP_Widget類，包括必要的方法，最后注冊窗口小部件。

。

創(chuàng)建一個幼兒類擴展wp_widget類。

>

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

靜態(tài)屬性$ login_registration_status將保存注冊和登錄表格生成的錯誤消息。

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

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

<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代碼將稍后創(chuàng)建。

<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="' . esc_url( $_SERVER['REQUEST_URI'] ) . '">';
</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="checked"/> Remember Me<br/>';
</span>		<span>$html .= '<input type="submit" name="login_submit" value="Login" /><br/>';
</span>		<span>$html .= '</form>';
</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="' . esc_url( $_SERVER['REQUEST_URI'] ) . '">';
</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 .= '</form>';
</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>

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

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

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

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

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

>

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

>

>創(chuàng)建用戶輸入的登錄憑據(jù)的關(guān)聯(lián)數(shù)組$ reds。

然后將關(guān)聯(lián)數(shù)組傳遞給WP_Signon進行身份驗證。

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

<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>

>

>

>后端窗口小部件設(shè)置表單是由Form（）方法創(chuàng)建的，該方法將由一個字段組成，該字段將包含窗口小部件的標題。>

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

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>

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

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

> login_form（）和registration_form（）靜態(tài)方法顯示登錄和注冊表格。

>

>最后，我們關(guān)閉了小部件類。

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

> widget類Tab_login_registration需要使用widgets_init掛鉤注冊，因此WordPress內(nèi)部識別它。

我們?nèi)匀恍枰╦Query，窗口小部件CSS和QuickFlip庫才能在窗口小部件中獲取標簽和翻轉(zhuǎn)效果。

<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>

是小部件的屏幕截圖。

>

查看窗口小部件的演示。

總結(jié)

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

>

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

經(jīng)常詢問有關(guān)構(gòu)建選項卡的WordPress登錄和注冊小部件的問題

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

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

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

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

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

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

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

是的，您可以出于安全原因更改默認的WordPress登錄URL ?？梢酝ㄟ^編輯網(wǎng)站的.HTACCESS文件（例如WPS HIDE登錄）（例如WPS HIDE登錄）來完成此操作。請記住要記下您的新登錄網(wǎng)址并確保安全。

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

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

>

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

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

我可以在我的WordPress側(cè)欄中添加注冊表格嗎？

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

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

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

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

以上是構(gòu)建標簽WordPress登錄和注冊小部件的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！