如何通过jQuery监听切换WordPress分类并展示对应分类描述

1. 后端添加Ajax接口（主题functions.php） #

在WordPress主题的functions.php中添加以下代码，用于处理前端的分类描述查询请求：

// 注册Ajax处理动作，支持登录/未登录用户
add_action('wp_ajax_get_category_description', 'get_category_description_by_slug');
add_action('wp_ajax_nopriv_get_category_description', 'get_category_description_by_slug');

function get_category_description_by_slug() {
    // 校验slug参数
    if (!isset($_POST['slug']) || empty($_POST['slug'])) {
        wp_send_json_error('分类slug参数缺失');
    }

    $slug = sanitize_text_field($_POST['slug']);
    // 通过slug获取分类对象
    $category = get_category_by_slug($slug);

    if (!$category) {
        wp_send_json_error('未找到对应分类');
    }

    // 返回分类描述数据
    wp_send_json_success([
        'description' => $category->description
    ]);
}

2. 修改前端jQuery代码 #

替换你现有的监听代码，添加Ajax请求逻辑，实现根据slug获取并展示分类描述：

jQuery(document).ready(function($) {
  $('#category-select-1').change(function() {
    const categorySlug = $(this).val();
    // 显示加载状态
    $('#description').text('加载中...');

    // 发送Ajax请求
    $.ajax({
      url: ajaxurl,
      type: 'POST',
      data: {
        action: 'get_category_description', // 对应后端注册的动作名
        slug: categorySlug
      },
      success: function(res) {
        if (res.success) {
          // 渲染分类描述，若描述含HTML则用html()替代text()
          $('#description').text(res.data.description);
        } else {
          $('#description').text('无法加载分类描述');
        }
      },
      error: function() {
        $('#description').text('加载分类描述失败');
      }
    });
  });

  // 页面初始化时，若下拉框已有选中值，自动触发一次查询
  if ($('#category-select-1').val()) {
    $('#category-select-1').trigger('change');
  }
});

额外配置（若前端页面无法识别ajaxurl） #

如果前端页面（非WP后台）无法获取ajaxurl全局变量，在主题functions.php中添加以下代码：

add_action('wp_enqueue_scripts', 'localize_ajax_url');
function localize_ajax_url() {
    wp_localize_script('jquery', 'ajaxurl', admin_url('admin-ajax.php'));
}

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