如何借助Gutenberg与REST_API按JOBS分类控制对应metabox显隐？

要实现JOBS分类法术语与对应岗位分类法Metabox的联动显示/隐藏，核心是通过后台JS监听分类选择状态，配合给目标Metabox标记专属类名来控制显示逻辑，具体步骤如下：

1. 给岗位分类法的Metabox添加专属类名 #

WordPress默认分类法Metabox的ID格式为taxonomydiv-{分类法slug}，比如Webdesigner分类法的Metabox ID是taxonomydiv-webdesigner（slug与JOBS里的术语保持小写一致）。我们可以通过过滤器给这些Metabox添加自定义类，方便JS定位：

add_filter('postbox_classes_{你的自定义文章类型slug}_taxonomydiv-webdesigner', 'add_job_metabox_class');
add_filter('postbox_classes_{你的自定义文章类型slug}_taxonomydiv-developer', 'add_job_metabox_class');
add_filter('postbox_classes_{你的自定义文章类型slug}_taxonomydiv-seo', 'add_job_metabox_class');

function add_job_metabox_class($classes) {
    $metabox_id = current_filter();
    $tax_slug = str_replace('postbox_classes_{你的自定义文章类型slug}_taxonomydiv-', '', $metabox_id);
    $classes[] = 'job-specific-metabox';
    $classes[] = 'job-' . $tax_slug;
    return $classes;
}

将代码中的{你的自定义文章类型slug}替换为你实际的自定义文章类型别名（比如job_post）。

2. 编写后台交互JS #

在自定义文章类型的编辑页面加载脚本，处理初始隐藏和选择事件监听：

首先注册并加载脚本：

add_action('admin_enqueue_scripts', 'job_metabox_toggle_script');

function job_metabox_toggle_script($hook) {
    $screen = get_current_screen();
    // 仅在目标文章类型的新建/编辑页面加载脚本
    if ($screen->post_type !== '{你的自定义文章类型slug}' || !in_array($hook, ['post.php', 'post-new.php'])) {
        return;
    }

    wp_enqueue_script(
        'job-metabox-toggle',
        get_template_directory_uri() . '/js/job-metabox-toggle.js', // 替换为你的JS文件实际路径
        array('jquery'),
        '1.0',
        true
    );
}

然后创建job-metabox-toggle.js文件，写入以下逻辑：

jQuery(document).ready(function($) {
    // 初始状态：隐藏所有岗位分类法的Metabox
    $('.job-specific-metabox').hide();

    // 编辑已有文章时，显示已选中JOBS术语对应的Metabox
    const selectedJobs = $('#taxonomy-jobs input[type="checkbox"]:checked').map(function() {
        return $(this).val();
    }).get();
    selectedJobs.forEach(function(jobSlug) {
        $('.job-' + jobSlug).show();
    });

    // 监听JOBS分类法复选框的变化
    $('#taxonomy-jobs input[type="checkbox"]').on('change', function() {
        const jobSlug = $(this).val();
        const targetMetabox = $('.job-' + jobSlug);

        $(this).is(':checked') ? targetMetabox.show() : targetMetabox.hide();
    });
});

补充说明 #

• 如果JOBS分类法是单选模式（注册时设置hierarchical=false），只需把JS里的checkbox替换为radio即可。
• 确保岗位分类法的slug与JOBS里的术语slug完全一致（比如均为小写webdesigner），否则JS无法匹配对应Metabox。
• 若使用Meta Box插件创建自定义Metabox，只需给Metabox容器添加job-{slug}类，上述JS逻辑可直接复用。

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