wordpress 自定义_在WordPress中构建自定义登录和注册页面

wordpress 自定义

WordPress started life as a blog engine, web software for creating blogs. Over the years, it has evolved into a content management system (CMS), even though some developers might disagree on it being considered a CMS.

WordPress最初是一个博客引擎，一个用于创建博客的网络软件。 多年来，它已经发展成为内容管理系统(CMS)，即使某些开发人员可能不同意将其视为CMS。

There’s a healthy disrespect for the WordPress default login and registration pages, because they live outside the website without conforming to the site design.

对WordPress默认登录和注册页面有一种健康的不尊重，因为它们位于网站外部而不符合网站设计。

When it comes to creating a website for clients, you might want a more customized login page, so that it integrates nicely with the website design as a whole. There are also numerous plugins that extend WordPress where the registration and login pages are used by end users, not just site administrators.

在为客户创建网站时，您可能需要一个更加自定义的登录页面，以便与整个网站设计完美地集成在一起。 还有许多扩展WordPress的插件，其中注册和登录页面供最终用户使用，而不仅仅是站点管理员。

A couple of developers have released several kinds of plugins for customizing the default login and registration forms in WordPress such as the Custom Login Page Customizer.

几个开发人员已经发布了几种插件，用于自定义WordPress中的默认登录和注册表单，例如“ 自定义登录页面自定义程序” 。

The gripe about the default account page is not primarily because it isn’t pretty, but because it doesn’t have a connection to the website look and feel.

默认帐户页面的困扰主要不是因为它不美观，而是因为它与网站的外观没有联系。

A quick Google search on building custom registration and login pages for WordPress reveals tutorials geared towards advanced PHP/WordPress developers. This is ok if you’re experienced, but as someone that’s written a lot of developer tutorials, I know there’s also an audience that needs something a bit simpler.

GoogleSwift搜索了有关为WordPress构建自定义注册和登录页面的信息，显示了面向高级PHP / WordPress开发人员的教程。 如果您有经验，那没关系，但是作为写过很多开发人员教程的人，我知道还有一些观众需要一些简单的东西。

In this tutorial, we’ll learn how to build custom WordPress login, registration and password reset pages with a plugin I’ve developed called ProfilePress, all without writing a single line of PHP code. Of course, if you’re a developer, you’re welcome to check out the code too.

在本教程中，我们将学习如何使用我开发的名为ProfilePress的插件来构建自定义WordPress登录，注册和密码重置页面，而无需编写任何PHP代码。 当然，如果您是开发人员，也欢迎您查看代码。

The form design below is what will be used in this tutorial.

下面的表单设计是本教程将使用的表单。

See the Pen SP ProfilePress Login for WordPress by Agbonghama Collins (@collizo4sky) on CodePen.

见笔SP ProfilePress登录为WordPress通过Agbonghama柯林斯( @ collizo4sky )上CodePen 。

See the Pen SP ProfilePress Registration for WordPress by Agbonghama Collins (@collizo4sky) on CodePen.

见笔为WordPress SP ProfilePress登记由Agbonghama柯林斯( @ collizo4sky )上CodePen 。

See the Pen SP Password Reset by Agbonghama Collins (@collizo4sky) on CodePen.

见笔SP密码重置通过Agbonghama柯林斯( @ collizo4sky )上CodePen 。

If you want to jump ahead of the tutorial, you can view a demo of the login, registration and password reset pages.

如果您想跳到本教程的前面，可以查看登录 ， 注册和密码重置页面的演示。

介绍ProfilePress (Introducing ProfilePress)

ProfilePress is a WordPress plugin that makes building user account (login, registration, password reset, and edit profile) forms and front-end profile stupidly simple without having to code any PHP validation, authentication and authorization system on the server-side. It’s something I saw a need for, so I created it. It’s been an interesting project to work on, something I’ll share more about in future articles.

ProfilePress是一个WordPress插件，使构建用户帐户(登录，注册，密码重置和编辑配置文件)表单和前端配置文件变得非常简单，而无需在服务器端编写任何PHP验证，身份验证和授权系统。 我认为这是需要的，因此我创建了它。 这是一个有趣的项目，我将在以后的文章中分享更多。

For a typical example, it can turn a simple HTML login form into a functional WordPress login without writing any PHP.

对于一个典型的示例，它可以将简单HTML登录表单转换为功能正常的WordPress登录，而无需编写任何PHP。

ProfilePress isn’t a drag-and-drop kind of plugin, rather it utilizes shortcodes as its templating system for building account forms and front-end profiles.

ProfilePress不是拖放式插件，而是利用短代码作为其模板系统来构建帐户表单和前端配置文件。

Shortcodes are to ProfilePress what Handlebars and Twig are to JavaScript and PHP respectively. You might already be familiar with shortcodes if you’ve used plugins such as Gravity Forms, Contact Form 7 or NextGEN Gallery. They’re very easy to use.

简码用于ProfilePress，而Handlebars和Twig分别用于JavaScript和PHP。 如果您使用了Gravity Forms，Contact Form 7或NextGEN Gallery之类的插件，则可能已经熟悉短代码。 它们非常易于使用。

Without further ado, let’s get started with building the login, registration and password reset WordPress forms.

事不宜迟，让我们开始构建WordPress表单的登录，注册和密码重置。

自定义登录页面 (Custom Login Page)

First off, install and activate the Lite version of ProfilePress plugin available for free in WordPress plugin directory.

首先，安装并**WordPress插件目录中免费提供的LitePress版本的ProfilePress插件 。

Click the Login Form menu as shown in the image below and then the Add New button to begin the process.

单击Login Form菜单，如下图所示，然后Add New按钮以开始该过程。

A form will be presented to you. Fill the fields as follows.

表格将呈现给您。 如下填写字段。

Enter a name for the login form in the Template Name field.

在“ 模板名称”字段中输入登录表单的名称 。

Copy the codepen login form code above to the Login Design TinyMCE editor and then replace the text, password and submit input fields with their respective shortcode equivalents.

将上面的代码笔登录表单代码复制到Login Design TinyMCE编辑器中，然后替换文本，密码并使用相应的短代码等效项提交输入字段。

Here is the final HTML code for the login form.

这是登录表单的最终HTML代码。

<div class="sp-pp">
  <div class="container">
    <h1>SitePoint</h1>
    <h2>Sign In</h2>
    <fieldset class="form-fieldset ui-input __first">
      [login-username id="username"]
      <label for="username">
        <span data-text="Username">Username</span>
      </label>
    </fieldset>

    <fieldset class="form-fieldset ui-input __second">
      [login-password id="password"]
      <label for="password">
        <span data-text="Password">Password</span>
      </label>
    </fieldset>

    <div class="form-footer">
       [login-submit class="btn" value="Log In"]
    </div>
  </div>
</div>

Note: no form tag <form ..></form> is allowed. They are automatically added by the plugin when rendering the forms.

注意：不允许使用表单标签<form ..></form> 。 呈现表单时，插件会自动添加它们。

Paste the login CSS into the CSS Stylesheet text area.

将登录CSS粘贴到CSS样式表文本区域。

Note: Errors generated by ProfilePress login forms are wrapped in a div with class profilepress-login-status, thus the presence of the class in the login stylesheet.

注意： ProfilePress登录表单生成的错误被包装在div中，并带有class profilepress-login-status ，因此该类在登录样式表中存在。

To see a preview of the login form, click the Preview Design button.

要查看登录表单的Preview Design ，请单击“ Preview Design按钮。

Finally, hit the Save Changes button to create the login form.

最后，点击Save Changes按钮以创建登录表单。

To make the login form available as a WordPress widget that can be dragged and dropped into a widgetized area / sidebar; check the Make this a Widget check box. After saving the changes, Go to the WordPress widget admin page, drag the ProfilePress Login Widget to a desired location and select the login form and save.

使登录表单作为WordPress小部件可用，可以将其拖放到小部件化区域/侧边栏中； 选中将其设为小部件复选框。 保存更改后，转到WordPress小部件管理页面，将ProfilePress登录小部件拖动到所需位置，然后选择登录表单并保存。

Navigate back to the login catalog, copy the generated login shortcode and paste it to the page you wish to make your custom login page.

导航回到登录目录，复制生成的登录简码并将其粘贴到您希望创建自定义登录页面的页面上。

自定义注册页面 (Custom Registration Page)

Building a custom registration form with ProfilePress follows pretty much the steps as a login form save for the form design and success message (text displayed on successful registration).

作为登录表单，使用ProfilePress构建自定义注册表单几乎遵循以下步骤：保存表单设计和成功消息(成功注册时显示的文本)。

Click the Registration Form menu followed by the Add New button.

单击Registration Form菜单，然后单击Add New按钮。

Copy the codepen registration form code above to Registration Design TinyMCE editor.

将上面的代码笔注册表单代码复制到Registration Design TinyMCE编辑器。

Replace the form components (username, password, email, first name, last name fields and submit button) with their respective ProfilePress shortcode equivalents.

将表单组件(用户名，密码，电子邮件，名字，姓氏字段和提交按钮)替换为它们各自的ProfilePress 短代码等效项 。

The code for registration form will finally look like this:

注册表格的代码最终将如下所示：

<div class="sp-pp">
  <div class="container">
    <h1>SitePoint</h1>
    <h2>Create a new account</h2>
    <fieldset class="form-fieldset ui-input __first">
      [reg-username id="username"]
      <label for="username">
        <span data-text="Username">Username</span>
      </label>
    </fieldset>

    <fieldset class="form-fieldset ui-input __second">
      [reg-email id="email"]
      <label for="email">
        <span data-text="E-mail Address">E-mail Address</span>
      </label>
    </fieldset>

    <fieldset class="form-fieldset ui-input __third">
      [reg-password id="password"]
      <label for="password">
        <span data-text="Password">Password</span>
      </label>
    </fieldset>

    <fieldset class="form-fieldset ui-input __fourth">
      [reg-first-name id="first-name"]
      <label for="first-name">
        <span data-text="First Name">First Name</span>
      </label>
    </fieldset>

    <fieldset class="form-fieldset ui-input __fourth">
      [reg-last-name id="last-name"]
      <label for="last-name">
        <span data-text="Last Name">Last Name</span>
      </label>
    </fieldset>

    <div class="form-footer">
      [reg-submit class="btn" value="Create Account"]
    </div>
  </div>
</div>

Paste the registration CSS into the CSS Stylesheet text area.

将注册CSS粘贴到CSS样式表文本区域。

Note: Errors generated by ProfilePress registration forms are wrapped in a div with class name profilepress-reg-status, hence the class in the style sheet.

注意： ProfilePress注册表单生成的错误被包装在div中，其类名为profilepress-reg-status ，因此是样式表中的类。

Enter the code to display a customized message on successful user registration.

输入代码以在成功注册用户时显示自定义消息。

<div class="profilepress-reg-status">Registration Successful.</div>

There is also the option to make a registration form available as a widget, I’ve found this can be very useful.

还可以选择将注册表单作为小部件使用，我发现这非常有用。

Navigate back to the registration catalog, copy the generated shortcode and paste it to the page you wish to make your custom registration page.

导航回到注册目录，复制生成的简码并将其粘贴到您希望创建自定义注册页面的页面上。

自定义密码重置页 (Custom Password Reset Page)

Go to the password reset settings page by clicking the Password Reset menu.

通过单击“ Password Reset菜单进入密码重置设置页面。

Click the Add New button at the top of the page to begin the form building process.

单击页面顶部的“ Add New按钮以开始表单构建过程。

Copy the CodePen password reset form code above to the Password Reset Design TinyMCE editor.

将上面的CodePen密码重置表单代码复制到Password Reset Design TinyMCE编辑器。

Replace the username/email field and the submit button with their shortcode equivalents.

将用户名/电子邮件字段和提交按钮替换为它们的短代码等效项 。

The final code for the password reset form will look like this:

密码重置表单的最终代码如下所示：

<div class="sp-pp">
  <div class="container">
    <h1>SitePoint</h1>
    <h2>Reset Password</h2>
    <fieldset class="form-fieldset ui-input __first">
      [user-login id="userlogin"]
      <label for="userlogin">
        <span data-text="Username / Email">Username / Email</span>
      </label>
    </fieldset>

    <div class="form-footer">
      [reset-submit class="btn" value="Reset"]
    </div>
  </div>
</div>

Enter the code below into Message on successful password reset text area in order to display a customized message after users successfully use the form to reset their password.

在用户成功使用表单重设密码后，在“ Message on successful password reset文本区域中输入以下代码，以便显示自定义消息。

<div class="profilepress-reset-status">Check your e-mail for further instruction.</div>

Save the changes and go back to the catalog.

保存更改，然后返回目录。

Copy the generated shortcode and paste it to the page you wish to make your custom password page.

复制生成的简码并将其粘贴到您希望创建自定义密码页面的页面上。

将默认的WordPress帐户页面重定向到自定义选项 (Redirecting the Default WordPress Account Pages to the Custom Alternatives)

Finally, all we need to do now is redirect the default WordPress login, registration and password reset pages to their custom alternatives created with ProfilePress, so when users visit the following default URLs below, they will be redirected to the custom pages.

最后，我们现在要做的就是将默认的WordPress登录，注册和密码重置页面重定向到使用ProfilePress创建的自定义替代页面，因此，当用户访问下面的以下默认URL时，它们将被重定向到自定义页面。

1. http://example.com/wp-login.php

   http://example.com/wp-login.php

2. http://example.com/wp-login.php?action=register

   http://example.com/wp-login.php?action=register

3. http://example.com/wp-login.php?action=lostpassword

   http://example.com/wp-login.php?action=lostpassword

To achieve this, click the settings plugin menu.

为此，请单击设置插件菜单。

In the Global Settings section, select and save the custom login, registration and password reset pages.

在“ Global Settings部分中，选择并保存自定义登录，注册和密码重置页面。

摘要 (Summary)

In this tutorial, we learned how to easily build a custom login, registration and password reset page in WordPress using a plugin I’ve written called ProfilePress available in the WordPress Plugin Directory. We also learned how to redirect the default WordPress account pages to the custom account pages.

在本教程中，我们学习了如何使用我在WordPress插件目录中提供的名为ProfilePress的插件轻松地在WordPress中构建自定义登录，注册和密码重置页面。 我们还学习了如何将默认WordPress帐户页面重定向到自定义帐户页面。

If you have any questions, suggestions or contributions, please let me know in the comments.

如果您有任何问题，建议或意见，请在评论中让我知道。

翻译自: https://www.sitepoint.com/building-custom-login-registration-pages-wordpress/

wordpress 自定义