本文介绍如何通过扩展 WordPress 媒体上传流程，结合 AJAX 和 WooCommerce，将 FTP 目录中近 2000 张“漆色图”与“刷痕图”自动批量生成可筛选的画漆色产品，并实现悬停切换效果。

本文介绍如何通过扩展 WordPress 媒体上传流程，结合 AJAX 和 WooCommerce，将 FTP 目录中近 2000 张“漆色图”与“刷痕图”自动批量生成可筛选的画漆色产品，并实现悬停切换效果。

做一套专业级的油漆色卡展示，最麻烦的往往不是设计本身，而是后续大量重复操作。

如果每种颜色都手动创建一个产品，不仅非常耗时，2000+ 条目往往就要花掉几十个小时，中间任何环节还可能出错。

这里提供的是一套可以直接落地的自动化方案。它不依赖 CSV 导入，也不借助插件，而是基于 WordPress 原生的媒体上传机制，在图片上传完成后，自动触发 WooCommerce 产品创建与关联流程。

核心思路：上传即建站

这套方案的关键，是监听媒体上传完成事件。

通过 Ja vaScript 扩展 wp.Uploader 的 success 方法，在每张图片上传成功后，立即发送 AJAX 请求，再交由后端 PHP 处理。

• 若文件名以 paintcolor_ 开头 → 创建新商品，设置名称、价格、下载项、特色图；
• 若文件名以 paintbrush_ 开头 → 查找对应商品，将该图存入 ACF 自定义字段，如 paint_brush；
• 其他文件名则忽略，确保流程仅对目标图像生效。

文件命名规范（强制前提）

为精准识别图像类型与配对关系，请严格统一命名规则，支持 .png, .jpg, .jpeg。

• 漆色图：paintcolor_{name}.ext
• 示例：paintcolor_sky_blue_crayola.png
• 刷痕图：paintbrush_{name}.ext
• 示例：paintbrush_sky_blue_crayola.png

命名要求：

• 名称中仅允许小写字母、数字、下划线；
• 空格必须替换为 _；
• {name} 部分需完全一致，且大小写敏感。

必须先上传全部 paintcolor_ 图像，再上传 paintbrush_ 图像。

否则刷痕图无法找到匹配商品，并会被自动删除。

实现步骤详解

1. 前端监听脚本（/dist/js/admin.js）

(function($) {
if (pagenow === 'upload') {
$.extend(wp.Uploader.prototype, {
success: function(attachment) {
const data = {
action: 'media_upload_generate_product',
author_id: attachment.attributes.author,
attachment_id: attachment.attributes.id,
filename: attachment.attributes.filename,
title: attachment.attributes.title,
type: attachment.attributes.type
};
$.ajax({
url: ajaxurl,
method: 'GET',
data,
timeout: 300000, // 5分钟超时防阻塞
success: res => console.log(' Product created:', res.data),
error: xhr => console.error(' Failed:', xhr.responseJSON.data.message)
});
}
});
}
})(jQuery);

这段脚本运行在媒体库上传页面。

每当图片上传成功时，它就会把附件信息通过 AJAX 发给后端，从而触发自动建产品或自动关联图片的流程。

2. 后端处理逻辑（functions.php）

// 注册 AJAX 处理函数
add_action('wp_ajax_media_upload_generate_product', 'ajax_media_upload_generate_product');
function ajax_media_upload_generate_product() {
$title = sanitize_text_field($_GET['title']);
$attachment_id = (int) $_GET['attachment_id'];

// 匹配漆色图
if (strpos($title, 'paintcolor_') === 0) {
$clean_title = ucwords(str_replace('_', ' ', str_replace('paintcolor_', '', $title)));
$slug = sanitize_title($clean_title);

// 检查是否已存在同名商品
$existing = get_page_by_path($slug, OBJECT, 'product');
if (!$existing) {
$product = new WC_Product_Simple();
$product->set_name($clean_title);
$product->set_status('publish');
$product->set_price(19.99);
$product->set_image_id($attachment_id);
$product->sa ve();

// 关联到 ACF 字段（需提前在 ACF 中创建 'paint_color' 字段）
update_field('paint_color', $attachment_id, $product->get_id());
wp_send_json_success(['id' => $product->get_id()]);
} else {
wp_delete_attachment($attachment_id, true); // 清理重复上传
wp_send_json_error(['message' => "Product '$clean_title' already exists."]);
}
}
// 匹配刷痕图
elseif (strpos($title, 'paintbrush_') === 0) {
$clean_title = ucwords(str_replace('_', ' ', str_replace('paintbrush_', '', $title)));
$slug = sanitize_title($clean_title);
$existing = get_page_by_path($slug, OBJECT, 'product');

if ($existing && isset($existing->ID)) {
update_field('paint_brush', $attachment_id, $existing->ID);
wp_send_json_success(['id' => $existing->ID]);
} else {
wp_delete_attachment($attachment_id, true);
wp_send_json_error(['message' => "No product found for '$clean_title'."]);
}
} else {
wp_send_json_error(['message' => 'Filename must start with paintcolor_ or paintbrush_.']);
}
wp_die();
}

后端逻辑分为两类处理：

• 遇到 paintcolor_ 文件时，自动创建商品，并把图片设置为主图，同时写入 paint_color 字段；
• 遇到 paintbrush_ 文件时，查找同名商品，并把图片写入 paint_brush 字段；
• 若文件名不符合规范，系统会直接返回错误信息；
• 若商品不存在或重复上传，系统会自动清理对应附件。

3. ACF 字段配置（必需）

在 Advanced Custom Fields 中创建两个图像字段：

• 字段名称：paint_color，标签：「漆色主图」，返回格式：Image ID
• 字段名称：paint_brush，标签：「刷痕悬停图」，返回格式：Image ID

并将这两个字段添加到 WooCommerce 产品编辑页。

注意事项与优化建议

• 安全性：生产环境请添加 current_user_can('manage_woocommerce') 权限校验；
• 性能：2000+ 图像建议分批上传，每次 ≤ 20 张，避免超时；
• 容错：代码已内置重复检测与自动清理，但首次运行前请备份数据库；
• 扩展性：如需支持多属性，如色系、RAL 编号，可在 $product->set_meta_data() 中追加自定义字段；
• 前端展示：利用 WooCommerce REST API 或 WP_Query 获取产品列表，配合 CSS :hover 切换 paint_color / paint_brush 图像即可实现悬停效果。

这套方案可将传统数日工作压缩至数小时。

同时，它完全基于 WordPress 原生能力，无需第三方插件依赖，兼顾稳定性与可维护性。