如何将WooCommerce的product gallery功能应用到WordPress自定义文章类型

以下方案完全基于WooCommerce原生类和钩子实现，无需修改WooCommerce核心代码，稳定性、兼容性远高于手动提取代码拼接的方式，可直接适配你提到的projects自定义文章类型。

后台功能实现 #

将以下代码添加到主题的functions.php文件或自定义功能插件中即可完成后台图库功能的适配：

1. 添加图库元框 #

// 为projects自定义文章类型注册WooCommerce图库元框
add_action( 'add_meta_boxes', 'add_wc_gallery_to_projects_cpt' );
function add_wc_gallery_to_projects_cpt() {
    add_meta_box(
        'woocommerce-product-images',
        __( '项目相册', 'your-text-domain' ),
        [ 'WC_Meta_Box_Product_Images', 'output' ],
        'projects', // 自定义文章类型名称
        'side',
        'low'
    );
}

2. 适配数据保存逻辑 #

WooCommerce默认仅保存product类型的图库数据，添加以下代码兼容projects类型的图库数据保存：

// 保存projects类型的图库数据
add_action( 'save_post', 'save_wc_gallery_for_projects_cpt', 10, 2 );
function save_wc_gallery_for_projects_cpt( $post_id, $post ) {
    // 权限和类型校验
    if ( $post->post_type !== 'projects' || ! current_user_can( 'edit_post', $post_id ) ) {
        return;
    }
    // 非提交请求过滤
    if ( empty( $_POST['woocommerce_meta_nonce'] ) || ! wp_verify_nonce( wc_clean( wp_unslash( $_POST['woocommerce_meta_nonce'] ) ), 'woocommerce_save_data' ) ) {
        return;
    }
    // 复用WC原生逻辑保存图库ID
    if ( isset( $_POST['product_image_gallery'] ) ) {
        $gallery_ids = wc_clean( wp_unslash( $_POST['product_image_gallery'] ) );
        update_post_meta( $post_id, '_product_image_gallery', $gallery_ids );
    }
}

3. 加载后台所需JS资源 #

WooCommerce默认仅在产品编辑页加载图库相关JS，添加以下代码在projects编辑页加载对应资源：

// 为projects编辑页加载图库依赖JS
add_action( 'admin_enqueue_scripts', 'enqueue_wc_gallery_scripts_for_projects' );
function enqueue_wc_gallery_scripts_for_projects() {
    global $post_type;
    if ( $post_type === 'projects' ) {
        wp_enqueue_media();
        wp_enqueue_script( 'wc-admin-meta-boxes-product' );
    }
}

前端渲染实现 #

在projects自定义文章类型的单页模板（通常为single-projects.php）中需要显示相册的位置添加以下代码，即可复用WooCommerce原生的图库渲染逻辑：

// 输出项目相册
$gallery_ids = get_post_meta( get_the_ID(), '_product_image_gallery', true );
if ( ! empty( $gallery_ids ) ) {
    $gallery_id_arr = array_filter( explode( ',', $gallery_ids ) );
    foreach ( $gallery_id_arr as $image_id ) {
        // 复用WC原生图库HTML输出方法
        echo wc_get_gallery_image_html( $image_id, true );
    }
    // 加载WC前端图库交互资源（放大镜、轮播等）
    wp_enqueue_script( 'wc-single-product' );
    wp_enqueue_style( 'woocommerce-general' );
}

注意事项 #

• 请确保WooCommerce插件处于启用状态，所有原生类、函数才能正常调用
• 若不需要WooCommerce自带的前端交互效果，可自行遍历图片ID输出自定义结构，无需加载对应的前端资源

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