鑰匙要點(diǎn)

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

> 但是，如果您在WordPress插件存儲(chǔ)庫(kù)中免費(fèi)提供的內(nèi)容感到失望，或者總體上感到失望，那麼您可以抬起精神，因?yàn)槟梢詫W(xué)習(xí)如何免費(fèi)創(chuàng)建標(biāo)籤的WordPress登錄和註冊(cè)窗口小塊！您只需要犧牲一段時(shí)間的時(shí)間就可以掌握整個(gè)過(guò)程。一旦您獲得了簡(jiǎn)單的知識(shí)；您應(yīng)該在WordPress供電站點(diǎn)上有一個(gè)功能豐富的註冊(cè)頁(yè)面。

> 在本文中，我們將構(gòu)建一個(gè)簡(jiǎn)單的選項(xiàng)卡式登錄和註冊(cè)表格窗口小部件，並通過(guò)Quickflip jQuery庫(kù)使fluppipt效果成為可能。

>

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

登錄和註冊(cè)窗口小部件的演示

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

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

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

>

小部件開發(fā)

首先，包括插件標(biāo)題。

>

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

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

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

>創(chuàng)建一個(gè)WordPress小部件，擴(kuò)展標(biāo)準(zhǔn)WP_Widget類，包括必要的方法，最後註冊(cè)窗口小部件。

。

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

>

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

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

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

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

<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（） - 返回登錄和註冊(cè)表格的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（）處理新用戶的註冊(cè)。

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

這是該方法如何註冊(cè)新用戶。

>

<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í)際註冊(cè)了一個(gè)帳戶。這是通過(guò)檢測(cè)單擊“註冊(cè)”按鈕來(lái)完成的，即已設(shè)置了$ _post ['reg_submit']。 然後，使用ESC_ATTR函數(shù)將html屬性的表單數(shù)據(jù)逃脫了表單數(shù)據(jù)。

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

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

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

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

>

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

>

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

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

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

<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)建的，該方法將由一個(gè)字段組成，該字段將包含窗口小部件的標(biāo)題。 >

>將小部件標(biāo)題輸入表單字段時(shí)，update（）方法將數(shù)據(jù)掃描並保存到數(shù)據(jù)庫(kù)中以進(jìn)行重複使用。

widget（）方法在WordPress的前端顯示選項(xiàng)卡式登錄和註冊(cè)表格。

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

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

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

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

>

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

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

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

我們?nèi)匀恍枰╦Query，窗口小部件CSS和QuickFlip庫(kù)才能在窗口小部件中獲取標(biāo)籤和翻轉(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的標(biāo)題。

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

> 下面的

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

是小部件的屏幕截圖。

>

查看窗口小部件的演示。

總結(jié)

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

>

如果您對(duì)改進(jìn)代碼有任何疑問(wèn)或建議，請(qǐng)?jiān)谠u(píng)論中告訴我。

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

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

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

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

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

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

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

我可以更改我的默認(rèn)WordPress登錄url？

是的，您可以出於安全原因更改默認(rèn)的WordPress登錄URL 。可以通過(guò)編輯網(wǎng)站的.HTACCESS文件（例如WPS HIDE登錄）（例如WPS HIDE登錄）來(lái)完成此操作。請(qǐng)記住要記下您的新登錄網(wǎng)址並確保安全。

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

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

>

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

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

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

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

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

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

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

以上是構(gòu)建標(biāo)籤WordPress登錄和註冊(cè)小部件的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！