WooCommerce商品添加视频两种实现方案失效问题排查求助

一、ACF自定义字段方案不显示视频的原因 #

• 字段返回值类型不匹配：ACF的oembed类型字段默认返回值为嵌入HTML字符串，即使设置为返回URL也只会返回纯字符串，不会返回带url键的数组，因此isset($file['url'])条件永远不成立，视频代码不会执行。
• 标签类型不兼容：<video>标签仅支持本地视频文件路径，无法直接加载YouTube等第三方平台的oEmbed资源，第三方视频需要用平台提供的iframe嵌入代码渲染。

二、Product Video for WooCommerce插件报错原因 #

• 资源加载函数使用错误：你使用wp_enqueue_script加载CSS资源，浏览器会将CSS文件按JavaScript语法解析，自然会抛出样式代码相关的语法错误，CSS资源需要使用wp_enqueue_style加载。
• Slick依赖未声明：Slick库强依赖jQuery，加载JS时未声明依赖会导致Slick在jQuery加载完成前执行，从而抛出jQuery(...).slick is not a function错误。
• 重复加载冲突：如果插件本身已经内置加载了Slick资源，手动重复引入也会导致方法覆盖、冲突报错。

三、正确实现方案 #

方案1：修正后的ACF自定义实现（无插件依赖，推荐） #

首先修改ACF字段设置：将product_video字段设置为oEmbed类型，返回格式选择「URL」，再使用以下代码：

add_action( 'woocommerce_before_shop_loop_item_title', 'custom_loop_product_media', 9 );
function custom_loop_product_media() {
    global $product;
    $video_url = get_field('product_video', $product->get_id());
    
    if ( $video_url ) {
        // 移除默认缩略图
        remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
        // 判断是否为本地视频
        $file_ext = pathinfo( parse_url( $video_url, PHP_URL_PATH ), PATHINFO_EXTENSION );
        $support_video_exts = ['mp4', 'webm', 'ogg'];
        if ( in_array( strtolower($file_ext), $support_video_exts ) ) {
            // 本地视频用video标签
            echo '<video width="200" muted loop autoplay playsinline src="' . esc_url($video_url) . '"></video>';
        } else {
            // 第三方视频用WordPress内置oEmbed解析输出
            echo wp_oembed_get( esc_url($video_url), ['width' => 200] );
        }
    }
}

方案2：修复插件报错 #

修改资源加载代码如下即可：

function enqueue_slick_assets() {
    if ( is_shop() || is_product() || is_product_category() ) {  
        // 加载CSS用wp_enqueue_style
        wp_enqueue_style( 'slick-css', get_stylesheet_directory_uri() . '/assets/js/slick/slick.css' );
        wp_enqueue_style( 'slick-theme-css', get_stylesheet_directory_uri() . '/assets/js/slick/slick-theme.css' );
        // 加载JS声明jQuery依赖，放在页脚避免加载顺序问题
        wp_enqueue_script( 'slick-min-js', get_stylesheet_directory_uri() . '/assets/js/slick/slick.min.js', ['jquery'], '1.8.1', true );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_slick_assets', 5 );

如果修改后还是报错，可先检查插件设置是否有启用自带Slick加载的选项，关闭后再手动引入即可。

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