WordPress多视频区块重复输出同一视频URL问题求助

问题描述 #

我正在尝试构建一个可通过ACF添加MP4视频的行布局，目前基础功能已实现，但在同一文章中添加多个视频区块时，尽管后台配置的是不同视频，前端每个播放器却都输出同一视频。

行布局代码：

<?php if (get_row_layout() == 'video') : ?>

    <?php get_template_part('template-parts/sections/section', 'video'); ?>

<?php endif; ?> 

视频区块代码：

<div class="section section-type-video flex">

    <?php

    $video_mp4 =  get_field('video_file'); // MP4 Field Name
    $video_poster  = get_field('video_poster_image'); // Poster Image Field Name

    // Build the Shortcode
    $attr =  array(
        'mp4'      => $video_mp4,
        'poster'   => $video_poster,
        'preload'  => 'auto'
    );


    echo wp_video_shortcode($attr);
     ?>

    
</div>

问题原因 #

在ACF的灵活内容（Flexible Content）或重复行（Repeater）布局中，直接使用get_field()而不指定当前行上下文时，函数会默认读取第一个匹配字段的值，导致所有重复区块都调用同一个视频资源。

解决方案 #

推荐使用ACF专门为行内字段设计的get_sub_field()函数，它会自动识别当前行上下文，直接读取对应行的字段值：

修改视频区块代码如下：

<div class="section section-type-video flex">

    <?php
    // 用get_sub_field替代get_field，自动匹配当前行的字段
    $video_mp4 = get_sub_field('video_file');
    $video_poster = get_sub_field('video_poster_image');

    $attr = array(
        'mp4'      => $video_mp4,
        'poster'   => $video_poster,
        'preload'  => 'auto'
    );

    echo wp_video_shortcode($attr);
    ?>

</div>

备选方案（手动传递行ID） #

如果需要保持get_field()的使用方式，可以在加载模板时传递当前行的ID：

1. 修改行布局代码：

<?php if (get_row_layout() == 'video') : ?>
    <?php get_template_part('template-parts/sections/section', 'video', ['row_id' => get_row_index()]); ?>
<?php endif; ?> 

2. 修改视频区块代码：

<div class="section section-type-video flex">
    <?php
    $row_id = isset($args['row_id']) ? $args['row_id'] : false;
    $video_mp4 = get_field('video_file', $row_id);
    $video_poster = get_field('video_poster_image', $row_id);

    $attr = array(
        'mp4'      => $video_mp4,
        'poster'   => $video_poster,
        'preload'  => 'auto'
    );

    echo wp_video_shortcode($attr);
    ?>
</div>

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