Wordpress/PHP - 用于向用户显示所选用户名的选项

Question

我有一个 wordpress 网站，我在其中创建了一个自定义 HTML 注册表单。我在函数文件中使用 PHP，该文件在我们的 WP 用户表中创建用户并通过表单中的信息向我们发送电子邮件。一切都很好，但我们想要一种新的方式来向客户展示用户名。我有它目前正在工作，我们正在使用存在的用户名 testUser 对其进行测试。如果我们尝试使用它注册并点击提交，它会转到一个显示它已经存在的索引页面，然后将客户重定向回表单以修复它. 我们希望有一个选项让客户在提交之前就知道这一点，但我是 AJAX 调用的新手，我遇到了麻烦。我希望有另一种方法。这是当前的 sn-p工作代码：

if (username_exists($user)){

echo 'Username already exists. Please wait while we redirect you back to the form';
    die("<meta http-equiv=\"refresh\" content=\"5;url=".$_SERVER['HTTP_REFERER']."\"/>");


}

if ( !username_exists( $user )  && !email_exists( $email ) ) {
   $user_id = wp_create_user( $user, $pass, $email );
   if( !is_wp_error($user_id) ) {
       //user has been created
       $user = new WP_User( $user_id );
       $user->set_role( 'subscriber' );

       wp_mail( $to, $email_subject, $message, $headers);


       //Redirect
       wp_redirect( 'http://www.dev.smithhonig.com/thank-you' );
       exit;
   } else {
       //$user_id is a WP_Error object. Manage the error
   }
}


}
add_action('init','create_account');

Answer 1

要向用户显示用户名已被占用或可用，您需要使用用户输入的所需用户名进行 ajax 调用。执行此操作的步骤如下

1. 检测用于在注册表单中输入用户名的文本字段何时发生变化。
2. 发送 ajax 请求以检查输入的用户名是否可用。
3. 检查 ajax 调用的响应。
4. 如果用户名可用或不可用，则向用户显示消息。

将此代码放在您主题的functions.php

add_action( 'wp_ajax_verify_username', 'check_username' );
add_action( 'wp_ajax_nopriv_verify_username', 'check_username' );
function check_username(){
    $username = $_POST['username'];
    if( username_exists( $username ) ) {
        echo $username . ' already taken.';
    }else {
        echo 'Hurray ' . $username . ' is available.';
    }

    exit;
}

add_action('wp_ajax_verify_username', 'check_username') 将添加一个钩子，用于检查是否使用 action 参数设置为 verify_username 进行了 ajax 调用，如果是，它将由您的 check_username 中的函数 check_username 处理，该函数我们已经写到下面了。

check_username 函数检查通过 ajax 调用发送的 username 变量的值，并使用 WP 函数 username_exists() 检查用户名是否已经存在，然后打印适当的响应以进行 ajax 调用。

可以使用以下代码进行 ajax 调用：

jQuery(document).ready(function(){
    jQuery('#username').on('change', function(){
        let user = jQuery(this).val();
        jQuery.ajax({
            type: 'POST',
            url: '<WP_AJAX_URL_HERE>',
            data: {action: 'verify_username', username: user},
            success: function(data){
                console.log(data);
                // Write code to show the message to user here
            },
            error: function(err){
                console.log(err);
            }
        });
    });
});

用您的网站 admin-ajax.php 网址替换 <WP_AJAX_URL_HERE>

希望对您有所帮助。如果您需要更多解释，请告诉我。 :)