纯代码在WordPress后台实现文章编辑时显示已有标签的功能

在WordPress后台实现文章编辑时显示已有标签的功能，可通过以下代码实现（需添加至主题的 functions.php 文件）：

// 添加自定义元框显示已有标签
function display_existing_tags_metabox() {
    add_meta_box(
        'existing_tags_metabox',        // 元框ID
        '已有标签列表',                   // 显示标题
        'render_existing_tags_list',     // 回调函数
        'post',                          // 文章类型
        'side',                          // 显示位置
        'default'                        // 优先级
    );
}
add_action('add_meta_boxes', 'display_existing_tags_metabox');

// 渲染标签列表
function render_existing_tags_list($post) {
    // 获取所有标签
    $all_tags = get_tags(array('hide_empty' => false));
    
    echo '<div style="max-height:200px; overflow-y:auto;">';
    foreach ($all_tags as $tag) {
        // 检查当前文章是否已关联该标签
        $checked = has_tag($tag->term_id, $post->ID) ? 'checked' : '';
        echo '<label style="display:block; margin:3px 0;">';
        echo '<input type="checkbox" name="post_tags[]" value="'.$tag->term_id.'" '.$checked.'> ';
        echo esc_html($tag->name);
        echo '</label>';
    }
    echo '</div>';
}

// 保存选中标签
function save_selected_tags($post_id) {
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
    if (!current_user_can('edit_post', $post_id)) return;
    
    if (isset($_POST['post_tags'])) {
        $selected_tags = array_map('intval', $_POST['post_tags']);
        wp_set_post_tags($post_id, $selected_tags, false);
    }
}
add_action('save_post', 'save_selected_tags');

下面的代码是在上面的基础修改：让自定义元框默认在发布文章下面显示，显示已有标签横排

// 在WordPress后台实现文章编辑时显示已有标签的功能 开  自定义元框默认在发布文章下面显示，显示已有标签横排
// 添加自定义元框显示已有标签（位于发布框下方）
function display_existing_tags_metabox() {
    add_meta_box(
        'existing_tags_metabox',        // 元框ID
        '已有标签列表',                   // 显示标题
        'render_existing_tags_list',     // 回调函数
        'post',                          // 文章类型
        'normal',                        // 改为normal显示在主要内容区域
        'high'                           // 提高优先级显示在发布框下方
    );
}
add_action('add_meta_boxes', 'display_existing_tags_metabox');

// 渲染标签列表（横向排列）
function render_existing_tags_list($post) {
    // 获取所有标签
    $all_tags = get_tags(array('hide_empty' => false));
    
    echo '<div style="overflow:hidden; margin:10px 0;">';
    foreach ($all_tags as $tag) {
        // 检查当前文章是否已关联该标签
        $checked = has_tag($tag->term_id, $post->ID) ? 'checked' : '';
        echo '<label style="float:left; margin:0 10px 5px 0; display:inline-block;">';
        echo '<input type="checkbox" name="post_tags[]" value="'.$tag->term_id.'" '.$checked.'> ';
        echo esc_html($tag->name);
        echo '</label>';
    }
    echo '<div style="clear:both;"></div></div>';
}

// 保存选中标签
function save_selected_tags($post_id) {
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
    if (!current_user_can('edit_post', $post_id)) return;
    
    if (isset($_POST['post_tags'])) {
        $selected_tags = array_map('intval', $_POST['post_tags']);
        wp_set_post_tags($post_id, $selected_tags, false);
    }
}
add_action('save_post', 'save_selected_tags');
// 在WordPress后台实现文章编辑时显示已有标签的功能 完

下面的代码是在上面的基础修改：让自定义元框默认在发布文章下面显示，显示已有标签分10列横排

// 在WordPress后台实现文章编辑时显示已有标签的功能 开  自定义元框默认在发布文章下面显示，显示已有标签分10列横排
// 添加自定义元框显示已有标签（位于发布框下方）
function display_existing_tags_metabox() {
    add_meta_box(
        'existing_tags_metabox',
        '已有标签列表（10列布局）',
        'render_existing_tags_list',
        'post',
        'normal',
        'high'
    );
}
add_action('add_meta_boxes', 'display_existing_tags_metabox');

// 渲染标签列表（10列网格布局）
function render_existing_tags_list($post) {
    $all_tags = get_tags(array('hide_empty' => false));
    $total_tags = count($all_tags);
    $tags_per_column = ceil($total_tags / 10);
    
    echo '<div style="display:flex; flex-wrap:wrap; gap:15px;">';
    for ($col = 0; $col < 10; $col++) {
        echo '<div style="flex:1; min-width:120px;">';
        for ($i = $col * $tags_per_column; $i < ($col + 1) * $tags_per_column; $i++) {
            if (isset($all_tags[$i])) {
                $tag = $all_tags[$i];
                $checked = has_tag($tag->term_id, $post->ID) ? 'checked' : '';
                echo '<label style="display:block; margin:3px 0;">';
                echo '<input type="checkbox" name="post_tags[]" value="'.$tag->term_id.'" '.$checked.'> ';
                echo esc_html($tag->name);
                echo '</label>';
            }
        }
        echo '</div>';
    }
    echo '</div>';
}

// 保存选中标签
function save_selected_tags($post_id) {
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
    if (!current_user_can('edit_post', $post_id)) return;
    
    if (isset($_POST['post_tags'])) {
        $selected_tags = array_map('intval', $_POST['post_tags']);
        wp_set_post_tags($post_id, $selected_tags, false);
    }
}
add_action('save_post', 'save_selected_tags');

// 在WordPress后台实现文章编辑时显示已有标签的功能 完

功能说明：

1. ‌显示机制‌：在文章编辑页右侧添加名为”已有标签列表”的元框，以滚动列表形式展示所有现有标签
2. ‌交互方式‌：
   • 每个标签前显示复选框
   • 已关联标签默认勾选
   • 支持多选操作
3. ‌数据保存‌：保存文章时会自动更新关联的标签

代码使用注意事项：

1. ‌标签加载‌：最多加载500个标签（可通过修改 get_tags() 参数调整）
2. ‌主题兼容‌：建议使用子主题添加代码，避免主题更新覆盖修改
3. ‌显示位置‌：可通过修改 add_meta_box() 的第四个参数调整显示区域（常用选项：normal/side）

扩展建议：

如需增强功能，可补充以下代码：

// 添加标签搜索功能
function enqueue_tag_search_assets() {
    global $pagenow;
    if (is_admin() && $pagenow === 'post.php') {
        wp_enqueue_script('tag-search', get_template_directory_uri().'/js/tag-search.js');
    }
}
add_action('admin_enqueue_scripts', 'enqueue_tag_search_assets');

需配合前端JS实现即时搜索过滤功能，提升大量标签时的操作体验。