WordPress中输入用户名时自动显示用户角色

1. 添加前端表单 #

在你需要展示功能的页面（比如自定义页面模板、短代码内容里）插入以下HTML代码：

<div class="user-role-check">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" placeholder="请输入用户名">
  
  <label for="user_role">用户角色：</label>
  <input type="text" id="user_role" name="user_role" readonly placeholder="角色将自动显示">
</div>

2. 编写AJAX请求的JavaScript #

把这段代码放到主题的自定义JS文件里，或者直接添加在页面底部：

<script>
document.addEventListener('DOMContentLoaded', function() {
  const usernameInput = document.getElementById('username');
  const roleInput = document.getElementById('user_role');

  usernameInput.addEventListener('input', function() {
    const username = this.value.trim();
    if (username.length < 2) {
      roleInput.value = '';
      return;
    }

    fetch(ajaxurl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: 'action=fetch_user_role&username=' + encodeURIComponent(username)
    })
    .then(response => response.text())
    .then(data => {
      roleInput.value = data || '未找到该用户';
    })
    .catch(() => {
      roleInput.value = '查询失败';
    });
  });
});
</script>

3. 添加后台处理的PHP函数 #

将以下代码粘贴到当前主题的functions.php文件末尾（建议用子主题，避免主题更新丢失代码）：

// 注册AJAX处理动作，支持登录/未登录用户访问
add_action('wp_ajax_fetch_user_role', 'fetch_user_role_by_username');
add_action('wp_ajax_nopriv_fetch_user_role', 'fetch_user_role_by_username');

function fetch_user_role_by_username() {
  if (!isset($_POST['username'])) {
    echo '';
    wp_die();
  }

  $username = sanitize_text_field($_POST['username']);
  $user = get_user_by('login', $username);

  if (!$user) {
    echo '未找到该用户';
    wp_die();
  }

  // 获取并翻译用户角色名称
  $roles = $user->roles;
  $role_name = isset($roles[0]) ? translate_user_role($roles[0]) : '无角色';
  
  echo $role_name;
  wp_die(); // 必须调用此函数结束AJAX请求
}

// 传递AJAX地址到前端
add_action('wp_enqueue_scripts', 'pass_ajax_url');
function pass_ajax_url() {
  wp_localize_script('jquery', 'ajaxurl', admin_url('admin-ajax.php'));
}

额外提示 #

• 测试时输入已存在的用户名，就能看到对应的角色（比如「管理员」「编辑」「订阅者」）。
• 如果只想让登录用户使用该功能，删除wp_ajax_nopriv_fetch_user_role这一行代码即可。

内容的提问来源于stack exchange，提问作者Eunice