WooCommerce产品图库：实现点击多选图片及代码部署位置咨询

你提供的代码只是定义了媒体选择器的基础配置，缺少绑定触发事件和选中图片后的处理逻辑，下面是完整的部署方案：

方法1：添加到主题（子主题）的functions.php文件 #

这种方式适合不想额外安装插件的场景，优先用子主题的functions.php，避免主题更新丢失代码：

1. 登录WordPress后台，进入「外观」→「主题文件编辑器」
2. 在右侧文件列表找到functions.php，点击打开
3. 将下面的完整代码粘贴到文件末尾，点击「更新文件」

add_action('admin_enqueue_scripts', 'woocommerce_gallery_multiselect_script');
function woocommerce_gallery_multiselect_script() {
    // 仅在产品编辑页面加载脚本，节省资源
    if (get_current_screen()->post_type !== 'product') return;

    wp_add_inline_script('jquery', '
        jQuery(document).ready(function($) {
            // 绑定产品图库添加按钮的点击事件
            $(document).on("click", ".add_product_images", function(e) {
                e.preventDefault();
                
                // 初始化媒体选择器，开启多选模式
                var send_attachment_multiple = wp.media({
                    title : "选择或上传图片",
                    multiple: "add",
                    library: {
                        type: [ "image" ]
                    },
                });

                // 处理选中图片后的逻辑
                send_attachment_multiple.on("select", function() {
                    var attachments = send_attachment_multiple.state().get("selection").map(function(attachment) {
                        attachment.toJSON();
                        return attachment;
                    });

                    // 将选中的图片ID添加到产品图库隐藏字段
                    var gallery_ids = $("#product_image_gallery").val().split(",");
                    attachments.forEach(function(attachment) {
                        if (!gallery_ids.includes(attachment.id.toString())) {
                            gallery_ids.push(attachment.id);
                        }
                    });
                    $("#product_image_gallery").val(gallery_ids.filter(Boolean).join(","));
                    // 触发WooCommerce的图库预览刷新
                    $(document.body).trigger("wc_refresh_product_images");
                });

                // 打开媒体选择器弹窗
                send_attachment_multiple.open();
            });
        });
    ');
}

方法2：创建自定义插件部署 #

如果不想修改主题文件，可通过自定义插件实现，更安全：

1. 在服务器的wp-content/plugins/目录下新建文件夹wc-gallery-multiselect
2. 在该文件夹内新建文件wc-gallery-multiselect.php，粘贴以下内容：

<?php
/**
 * Plugin Name: WooCommerce 图库点击多选
 * Description: 实现产品图库图片点击直接多选，无需按住Ctrl键
 * Version: 1.0
 * Author: 自定义
 */

add_action('admin_enqueue_scripts', 'woocommerce_gallery_multiselect_script');
function woocommerce_gallery_multiselect_script() {
    if (get_current_screen()->post_type !== 'product') return;

    wp_add_inline_script('jquery', '
        jQuery(document).ready(function($) {
            $(document).on("click", ".add_product_images", function(e) {
                e.preventDefault();
                
                var send_attachment_multiple = wp.media({
                    title : "选择或上传图片",
                    multiple: "add",
                    library: {
                        type: [ "image" ]
                    },
                });

                send_attachment_multiple.on("select", function() {
                    var attachments = send_attachment_multiple.state().get("selection").map(function(attachment) {
                        attachment.toJSON();
                        return attachment;
                    });

                    var gallery_ids = $("#product_image_gallery").val().split(",");
                    attachments.forEach(function(attachment) {
                        if (!gallery_ids.includes(attachment.id.toString())) {
                            gallery_ids.push(attachment.id);
                        }
                    });
                    $("#product_image_gallery").val(gallery_ids.filter(Boolean).join(","));
                    $(document.body).trigger("wc_refresh_product_images");
                });

                send_attachment_multiple.open();
            });
        });
    ');
}

3. 回到WordPress后台「插件」页面，找到「WooCommerce 图库点击多选」插件并激活即可

内容的提问来源于stack exchange，提问作者Empresa video