WordPress教程

WordPress 注册直接输入密码并检测密码强度

也想出现在这里?联系我们
创客云

默认情况下,WordPress 用户在注册时仅要求填写用户名和电子邮件,密码将由发送的密码重置链接进行设置。文本分享一段最新 WordPress 注册直接输入密码代码,用户注册时自动生成随机密码,并检测密码强度,让用户自己选择使用随机密码或者直接输入密码。将代码添加到前主题函数模板 functions.php 中:

  1.     // 添加输入密码表单
  2.     add_action( 'register_form', function () { ?>
  3.     	<div class="user-pass1-wrap">
  4.     		<p>
  5.     			<label for="pass1"><?php _e( 'Password' ); ?></label>
  6.     		</p>
  7.  
  8.     		<div class="wp-pwd">
  9.     			<input type="password" data-reveal="1" data-pw="<?php echo esc_attr( wp_generate_password( 16 ) ); ?>" name="pass1" id="pass1" class="input password-input" size="24" value="" autocomplete="off" aria-describedby="pass-strength-result" />
  10.     			<button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
  11.     				<span class="dashicons dashicons-hidden" aria-hidden="true"></span>
  12.     			</button>
  13.     			<div id="pass-strength-result" class="hide-if-no-js" aria-live="polite"><?php _e( 'Strength indicator' ); ?></div>
  14.     		</div>
  15.     		<div class="pw-weak">
  16.     			<input type="checkbox" name="pw_weak" id="pw-weak" class="pw-checkbox" />
  17.     			<label for="pw-weak"><?php _e( 'Confirm use of weak password' ); ?></label>
  18.     		</div>
  19.     	</div>
  20.     		<p class="user-pass2-wrap">
  21.     			<label for="pass2"><?php _e( 'Confirm new password' ); ?></label>
  22.     			<input type="password" name="pass2" id="pass2" class="input" size="20" value="" autocomplete="off" />
  23.     		</p>
  24.     		<p class="description indicator-hint"><?php echo wp_get_password_hint(); ?></p>
  25.         <?php
  26.     });
  27.  
  28.     // 加载验证JS
  29.     add_action( 'login_enqueue_scripts', function () {
  30.     	if ( is_on_registration_page() && !wp_script_is( 'user-profile' ) ) {
  31.     		wp_enqueue_script('user-profile');
  32.     	}
  33.     });
  34.  
  35.     // 验证
  36.     function is_on_registration_page() {
  37.     	return $GLOBALS['pagenow'] == 'wp-login.php' && isset( $_REQUEST['action'] ) && $_REQUEST['action'] == 'register';
  38.     }
  39.  
  40.     // 错误提示
  41.     add_filter( 'registration_errors', function ( $errors ) {
  42.     	if ( empty( $_POST['pass1'] ) ) {
  43.     		$errors->add( 'password-required', '<strong>Error</strong>: Please enter a password.' );
  44.     	}
  45.  
  46.     	if ( empty( $_POST['pass2'] ) ) {
  47.     		$errors->add( 'password-required', '<strong>Error</strong>: Please enter a password confirmation.' );
  48.     	}
  49.  
  50.     	return $errors;
  51.     });
  52.  
  53.  
  54.     // 生成随机密码
  55.     add_filter( 'random_password', function ( $password ) {
  56.     	if ( is_on_registration_page() && ! empty( $_POST['pass1'] ) ) {
  57.     		$password = $_POST['pass1'];
  58.     	}
  59.  
  60.     	return $password;
  61.     });
  62.  
  63.     // 自定义邮件内容
  64.     add_filter( 'wp_new_user_notification_email', function ( $wp_new_user_notification_email, $user ) {
  65.     	$message = sprintf( __( 'Username: %s' ), $user->user_login ) . "\r\n\r\n";
  66.     	$message .= __( 'Password: As entered during your registration' ) . "\r\n\r\n";
  67.     	$message .= wp_login_url() . "\r\n";
  68.  
  69.     	$wp_new_user_notification_email['message'] = $message;
  70.  
  71.     	return $wp_new_user_notification_email;
  72.     }, 10, 2 );
也想出现在这里?联系我们
创客主机

密码强度不够,需要勾选“确认使用弱密码”,否则注册按钮呈灰色不可点击。
WordPress 注册直接输入密码并检测密码强度
如果想在 WP 默认注册页面和前端注册表单中同时应用这个检测功能,需要再加上:

  1.     // 在前端加载验证JS
  2.     add_action( 'wp_footer', function () {
  3.     	if ( !wp_script_is( 'user-profile' ) ) {
  4.     		wp_enqueue_script('user-profile');
  5.     	}
  6.     });

并在按钮 HTML 代码中添加:id="wp-submit"

资源下载此资源下载价格为5立即购买,VIP 免费

收藏
(0)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

发表回复

热销模板

Hub - 响应式可视化编辑企业官网WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

请扫码添加QQ好友后咨询!