如何为视频自定义文章类型添加链接并实现弹窗播放

1. 添加视频链接自定义字段 #

你需要先给videos自定义文章类型添加存储视频链接的字段，有两种实现方式：

方式一：用ACF插件（推荐） #

• 安装并激活Advanced Custom Fields插件
• 进入后台「自定义字段」→「添加字段组」
• 创建字段：类型选「URL」或「文本」，字段名设为video_link，和你代码中get_field的参数对应
• 设置规则：「文章类型」等于videos，确保只有视频类型文章显示这个字段
• 保存字段组后，创建/编辑videos文章时就能输入视频链接（支持YouTube、Vimeo、自托管视频等URL）

方式二：原生WordPress自定义字段 #

• 创建/编辑videos文章时，滚动到页面底部的「自定义字段」区域，若没看到，点击右上角「选项」勾选「自定义字段」
• 点击「添加新字段」，键名填video_link，值填视频链接，保存即可

2. 修正前端循环代码 #

你的现有代码存在两个核心问题：$video_link定义在循环外（导致所有卡片用同一个链接）、语法错误（标签未闭合、函数调用不规范）。修正后的代码如下：

<?php             
$case = new WP_Query( array(
    'post_type' => 'videos',
    'posts_per_page' => -1, // 显示全部文章，原paged参数用于分页，不适合这里
    'order' => 'DESC',
) );       
while ( $case->have_posts() ) : $case->the_post(); ?>  
    <?php $cur_terms = get_the_terms( get_the_ID(), 'categories' ); ?>
    <?php 
    // 循环内获取当前文章的视频链接
    $video_link = get_field('video_link'); 
    // 若用原生自定义字段，替换为：$video_link = get_post_meta(get_the_ID(), 'video_link', true);
    ?>
    <!-- 修复class属性的闭合引号 -->
    <li class="portfolio-section__item __js_masonry-item">
        <!-- 用esc_url转义链接，提升安全性 -->
        <a class="project-preview project-preview--elastic" data-fancybox href="<?php echo esc_url($video_link); ?>">
            <span class="project-preview__image">
                <!-- 修复函数调用，添加转义 -->
                <img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="<?php echo esc_attr(get_the_title()); ?>">
                <span class="hover-button"> 
                    <svg width="17" height="19">
                        <use xlink:href="#triangle"></use>
                    </svg>
                </span>
            </span>
            <span class="project-preview__bottom">
                <span class="project-preview__title"><?php the_title(); ?></span>
                <span class="project-preview__icon">
                    <svg width="24" height="23">
                        <use xlink:href="#link-arrow2"></use>
                    </svg>
                </span>
            </span>
        </a>
    </li>
<?php endwhile;
wp_reset_postdata();  ?>

3. 确保Fancybox正确播放视频 #

• 确认已引入Fancybox的CSS和JS文件，可通过主题functions.php或插件加载
• 针对不同视频平台，可添加data-type属性优化播放体验：

  <!-- YouTube视频 -->
  <a class="project-preview project-preview--elastic" data-fancybox data-type="youtube" href="<?php echo esc_url($video_link); ?>">
  <!-- Vimeo视频 -->
  <a class="project-preview project-preview--elastic" data-fancybox data-type="vimeo" href="<?php echo esc_url($video_link); ?>">
  

  多数情况下Fancybox能自动识别常见视频平台的URL，无需手动指定类型。

4. 额外优化 #

• 添加空值判断，避免显示无视频链接的卡片：

  <?php if (!empty($video_link)) : ?>
      <!-- 卡片代码 -->
  <?php endif; ?>
  

• 所有输出的动态内容用esc_url()、esc_attr()转义，避免XSS安全漏洞。

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