构建标签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网站上实现它，下载窗口小部件插件，其中包括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中文网其他相关文章！