WordPress 代码实现文章上传多个特色图像

WordPress 有时候一篇文章需要上传多个特色图像，常用于产品详情页。使用一下的代码，可以实现在文章编辑页右侧添加一个模块：

功能说明
我们将使用 add_meta_box 和 update_post_meta 手动创建多个“特色图像”字段。你可以上传多张图片，并在前台调用它们。

实现步骤
步骤 1：添加 Meta Box（在 functions.php 中添加）

// 添加多个特色图像 Meta Box
function add_multiple_featured_images_metabox() {
    $post_types = array('post', 'product'); // 支持的文章类型，可以根据需要修改

    foreach ($post_types as $post_type) {
        add_meta_box(
            'multiple-featured-images',
            __('额外特色图像', 'textdomain'),
            'render_multiple_featured_images_metabox',
            $post_type,
            'side',
            'default'
        );
    }
}
add_action('add_meta_boxes', 'add_multiple_featured_images_metabox');

步骤 2：渲染 Meta Box 内容（继续在 `functions.php` 中）

// 渲染 Meta Box 内容
function render_multiple_featured_images_metabox($post) {
    wp_nonce_field('save_multiple_featured_images', 'multiple_featured_images_nonce');

    // 获取已保存的图片 ID 数组
    $image_ids = get_post_meta($post->ID, '_multiple_featured_image_ids', true);
    if (!is_array($image_ids)) $image_ids = array();

    echo '<div id="multiple-featured-images-container" style="margin-top:10px;">';

    foreach ($image_ids as $image_id) {
        $image_url = wp_get_attachment_image_url($image_id, 'thumbnail');
        echo '<div class="image-item" data-id="' . esc_attr($image_id) . '" style="display:inline-block; position:relative; margin:5px;">
                <img src="' . esc_url($image_url) . '" style="width:60px;height:60px;" />
                <a href="#" class="remove-image" style="position:absolute;top:0;right:0;color:red;">&times;</a>
              </div>';
    }

    echo '</div>';

    echo '<a href="#" id="add-multiple-featured-images" class="button">' . __('添加图片', 'textdomain') . '</a>
          <input type="hidden" name="multiple_featured_image_ids" id="multiple_featured_image_ids" value="' . esc_attr(implode(',', $image_ids)) . '" />';
}

步骤 3：保存 Meta Box 数据（继续在 `functions.php` 中）

// 保存数据
function save_multiple_featured_images($post_id) {
    if (!isset($_POST['multiple_featured_images_nonce']) || !wp_verify_nonce($_POST['multiple_featured_images_nonce'], 'save_multiple_featured_images')) {
        return;
    }

    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;

    if (!current_user_can('edit_post', $post_id)) return;

    $image_ids = isset($_POST['multiple_featured_image_ids']) ? explode(',', sanitize_text_field($_POST['multiple_featured_image_ids'])) : array();
    update_post_meta($post_id, '_multiple_featured_image_ids', $image_ids);
}
add_action('save_post', 'save_multiple_featured_images');

步骤 4：加载前端脚本（媒体库支持多图上传）

// 加载媒体库脚本
function enqueue_multiple_featured_images_scripts($hook) {
    global $post_type;

    if ($hook == 'post.php' || $hook == 'post-new.php') {
        if (in_array($post_type, array('post', 'product'))) { // 修改为你想支持的文章类型
            wp_enqueue_media();
            wp_enqueue_script('multiple-featured-images', get_template_directory_uri() . '/js/multiple-featured-images.js', array('jquery'), null, true);
        }
    }
}
add_action('admin_enqueue_scripts', 'enqueue_multiple_featured_images_scripts');

步骤 5：创建 JS 文件 `js/multiple-featured-images.js`

在你的主题目录下新建文件夹 `/js/`，并创建文件 `multiple-featured-images.js`：

jQuery(document).ready(function($) {
    var frame;
    $('#add-multiple-featured-images').on('click', function(event){
        event.preventDefault();

        if (frame) {
            frame.open();
            return;
        }

        frame = wp.media({
            title: '选择图片',
            button: { text: '选择图片' },
            multiple: true
        });

        frame.on('select', function(){
            var attachments = frame.state().get('selection').toJSON();
            var ids = [];

            $('#multiple-featured-images-container').empty();

            $.each(attachments, function(index, attachment){
                var item = $('<div class="image-item" data-id="'+attachment.id+'" style="display:inline-block; position:relative; margin:5px;"><img src="'+attachment.sizes.thumbnail.url+'" style="width:60px;height:60px;" /><a href="#" class="remove-image" style="position:absolute;top:0;right:0;color:red;">&times;</a></div>');
                $('#multiple-featured-images-container').append(item);
                ids.push(attachment.id);
            });

            $('#multiple_featured_image_ids').val(ids.join(','));
        });

        frame.open();
    });

    // 删除图片
    $('#multiple-featured-images-container').on('click', '.remove-image', function(e){
        e.preventDefault();
        $(this).parent().remove();

        var ids = [];
        $('.image-item').each(function(){
            ids.push($(this).attr('data-id'));
        });

        $('#multiple_featured_image_ids').val(ids.join(','));
    });
});

前端调用这些图片的方法

你可以在模板中使用如下代码来显示所有上传的“额外特色图像”：

$image_ids = get_post_meta(get_the_ID(), '_multiple_featured_image_ids', true);
if (is_array($image_ids)) {
    foreach ($image_ids as $image_id) {
        $image_url = wp_get_attachment_image_url($image_id, 'full');
        echo '<img src="' . esc_url($image_url) . '" alt="" style="max-width:100%;margin-bottom:10px;">';
    }
}