搜尋

首頁 >CMS教程 >＆＃＆按 >構建標籤WordPress登錄和註冊小部件

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

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌原創
2025-02-19 12:59:10244瀏覽

構建標籤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>// 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="' . 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>
首先，我們確保用戶實際註冊了一個帳戶。這是通過檢測單擊“註冊”按鈕來完成的，即已設置了$ _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>

>代碼說明：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登錄和註冊小部件總結

>要進一步了解小部件的構建方式以及如何在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中文網其他相關文章！

JavaScript jquery css html Static Array if for while date include try Error Logging register using class finally Property function default this display database issue wps WordPress Access Code Explanation Other
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：WordPress I18N：準備您的插件翻譯下一篇：WordPress I18N：準備您的插件翻譯

相關文章

看更多