使用User Registration建立WordPress注册表单

创建WordPress注册表单是为了更好的用户体验，比如在网站前台给用户使用。User Registration就是一个WordPress注册表单插件，使用起来也比较简单。

安装User Registration

在仪表盘 - 插件 - 安装插件 或者使用上传插件方法，先安装User Registration。

编辑注册表单

安装启用后，会在 仪表盘 - User Registration - User Registration 有默认的一个注册表单。

点击编辑之后可以进行编辑表单：

点击居然表单的一个字段，是可以进行编辑的。

创建注册页面

通过自定义页面的功能创建一个注册页面。

<?php
/**
* Template Name: Registration Page
*/
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <article id="page-<?php the_ID(); ?>" <?php post_class();?> role="article">
    <h2 class="entry-title"><?php the_title(); ?></h2>
 
    <div class="entry-content">
      <?php the_content() ?>
      <?php
      // 注册表单短代码
      echo do_shortcode('短代码'); ?>
    </div>
  </article>
<?php endwhile; else : ?>
	<p><?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

短代码替换为User Registration的注册表单短代码。

之后再新建页面选择页面模板：Registration Page即可。

进阶：新建一个适配Bootstrap Modal的注册表单

表单Modal

在WordPress主题的footer.php中加入：

<?php
/**
 * Register modal.
 */
if ( ! is_user_logged_in() ) {
  // Current url
  $currentUri = '';
  if ( is_home() ) {
    $currentUri = home_url();
  } else {
    $currentUri = get_permalink();
  }
  ?>
  <!-- Register modal START -->
  <div class="modal fade" id="modalRegisterForm" tabindex="-1" aria-labelledby="modalRegisterFormLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
      <h5 class="modal-title" id="modalRegisterFormLabel">注册</h5>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <?php echo do_shortcode('短代码');?>
        <p class="px-3 mb-1"><a href="javascript:;" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#modalLoginForm">登录</a> | <a href="<?php echo esc_url( wp_lostpassword_url( $currentUri ) ); ?>"><?php esc_html_e( '忘记密码？', 'jet-x' ); ?></a></p>
      </div>
      <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
      </div>
    </div>
    </div>
  </div>
  <!-- Register modal END -->

<?php }?>

添加Bootstrap Modal按钮来调用注册表单，比如在header.php里面加入：

<button type="button" class="btn btn-primary" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#modalRegisterForm">注册</button>

这样点击注册按钮就可以弹出注册表单了。

表单样式

那么是不是就这样就可以了？并不是，表单还需要适配Bootstrap样式。

默认情况下，你会发现带User Registration插件的样式加载在前台，要适配Bootstrap的话，这些样式都是没有用的。

需要在主题中增加js：

if ($('div[id^="user-registration-form"]')) {
  $('div[id^="user-registration-form"]').addClass('p-3')
  $('div[data-field-id^="user"]').addClass('mb-3')
  $('.form-row label').addClass('form-label')
  $('.form-row .input-text').addClass('form-control')
  $('.form-row #user_login').attr('autocomplete', 'username')
  $('.form-row .input-email').attr('autocomplete', 'off')
  $('.form-row .input-password').attr('autocomplete', 'new-password')
  $('abbr.required').addClass('text-danger ms-1')
  $('.ur-button-container').addClass('my-3 mt-lg-4')
}

编辑表单按钮样式：

在提交表单添加btn btn-primary btn-lg w-100。

去掉User Registration插件在前台加载的样式文件，默认加载了5个css文件(具体可以通过怎么查看WordPress主题加载了哪些css和js来查看)，在主题functions.php中加入：

/**
 * Detect plugin. For frontend only.
 *
 * @link https://developer.wordpress.org/reference/functions/is_plugin_active/
 */
include_once ABSPATH . 'wp-admin/includes/plugin.php';

// check for plugin using plugin name
if ( is_plugin_active( 'user-registration/user-registration.php' ) ) {
  function deregister_styles() {
		// Deregister plugin User Registration's css
		wp_deregister_style('user-registration-general');
		wp_deregister_style('user-registration-smallscreen');
		wp_deregister_style('user-registration-my-account-layout');
		wp_deregister_style('dashicons');
		wp_deregister_style('sweetalert2');
	}
	add_action( 'wp_print_styles', 'deregister_styles' );
}

去掉了插件默认css后，发现表单的校验样式没有了，加上Bootstrap表单校验和Alert样式：

.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback):not(label.user-registration-error) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0
}
label.user-registration-error {
  display: none;
  width: 100%;
  margin-top: .25rem;
  font-size: .875em;
  color: #dc3545
}
.is-invalid~label.user-registration-error,
.was-validated :invalid~label.user-registration-error {
  display: block
}
.ur-message.user-registration-error {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7
}

.ur-message.user-registration-error .alert-link {
  color: #6a1a21
}

这样就完成了一个User Registration + Bootstrap Modal的注册表单。