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;">';
    }
}
收藏
评论
打赏
Mirage 主题"查看更多"一直处在加载中的解决办法
上一篇
WordPress 外观菜单添加自定义字段
下一篇

0 条评论

像素鱼丸
62096 阅读
102 发布
3 收藏
动态
Mirage 主题 v2.33.1 发布
MirageV 主题 v2.29.0 发布
MirageV 主题 v2.6.4 发布
LandV 企业主题 v2.6.0 发布
FishV 主题 v1.14 发布
BotV 插件 v1.7.0 发布
MirageV 主题 v2.5 正式发布
FishV 主题 v1.21.0 发布
生成中...
真诚赞赏,手留余香
登录
注册
重置密码