WooCommerce Gallery - 通过 ACF 的 URL 添加视频

Question

我到处搜索，但似乎找不到解决方案。我正在与 WooCommerce 合作，希望将商店内某些产品的视频添加到 WooCommerce 画廊。简而言之，如果视频存在，它将在图库组件中添加另一个缩略图，单击该缩略图后将在视口中显示视频，就像现有图像的工作方式一样。

视频的 URL 保存在产品页面上的 ACF 文本字段中 (video_url_mp4)。我似乎无法找到如何做到这一点，我已经尝试按如下方式操作product-image.php，但这并没有按预期工作。

<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">
<figure class="woocommerce-product-gallery__wrapper">
    <?php
    if ( $post_thumbnail_id ) {
        $html = wc_get_gallery_image_html( $post_thumbnail_id, true );
    } else {
        $html  = '<div class="woocommerce-product-gallery__image--placeholder">';
        $html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
        $html .= '</div>';
    }

    echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped

    // Check for video URL and display video if available
    $video_url = get_field('video_url_mp4', $product->get_id());
    if ($video_url) {
        $video_thumbnail = wp_get_attachment_image_src( $post_thumbnail_id, 'woocommerce_thumbnail' ); // Get the thumbnail image for the video
        if ($video_thumbnail) {
            // Output the additional thumbnail in the thumbnail row
            echo '<div class="woocommerce-product-gallery__image">';
            echo '<a href="#" class="video-thumbnail-selector" data-video-url="' . esc_url( $video_url ) . '"><img src="' . esc_url( $video_thumbnail[0] ) . '" alt="Video Thumbnail"></a>';
            echo '</div>';
        }
    }

    do_action( 'woocommerce_product_thumbnails' );
    ?>
</figure>

如有任何帮助，我们将不胜感激。

Answer 1

您可以尝试多种方法，看看哪一种有效：

1.使用oEmbed字段类型。它提供了一个用于嵌入视频、图像、推文、音频和其他内容的交互式组件。 显示它：

<div class="embed-container">
<?php the_field('oembed'); ?>

有关更多信息，您可以参考文档 https://www.advancedcustomfields.com/resources/oembed/

2. 您可以使用“文件”字段类型上传视频文件。并使用 the_field 显示它。再次参考文档。

3. 您还可以使用“链接”字段类型并添加视频链接。 https://www.advancedcustomfields.com/resources/link/

希望这有帮助。