WordPress中Meta Box为空时动态切换嵌入内容的实现问题

需求逻辑 #

• 在.trailer容器中实现视频内容的动态切换：
  • 优先读取自定义字段ytvideourl的存储值，字段非空时，直接渲染该字段对应的iframe嵌入视频
  • 若ytvideourl字段为空，则自动切换为读取自定义字段ytembed的存储值，拼接YouTube标准嵌入地址生成对应的iframe内容

最初的错误实现代码 #

<div class="trailer"><iframe src="<?php echo get_post_meta($post->ID, 'ytvideourl', true);?>

<?php if( ! empty( $ytvideourl ) ) : ?>

 <iframe src="https://www.youtube.com/embed/<?php echo get_post_meta($post->ID, 'ytembed', true);?>?rel=0">

<?php endif; ?> ?rel=0"></iframe></div>

这版代码无法运行的核心原因：

• 未提前将get_post_meta的读取结果赋值给$ytvideourl变量，条件判断时变量始终为空值，逻辑完全失效
• HTML标签嵌套错位，将单个iframe的src属性拆成了三段，甚至生成了两个不闭合的iframe标签，最终输出的DOM结构完全破碎
• 条件分支和对应渲染内容完全颠倒，逻辑判断和实际渲染不匹配

当前正在使用的代码实现 #

<div class="trailer">
    <?php
    $ytvideourl = get_post_meta($post->ID, 'ytvideourl', true);
?>
    
    <?php if( ! empty( $ytvideourl ) ) : ?>
    <iframe src="<?php echo $ytvideourl; ?>"></iframe>
    <?php else : ?>
        <iframe src="https://www.youtube.com/embed/<?php echo get_post_meta($post->ID, 'ytembed', true);?>?rel=0" width="400" height="230" frameborder="0" allowfullscreen="allowfullscreen"><span style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" data-mce-type="bookmark" class="mce_SELRES_start"></span><span style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" data-mce-type="bookmark" class="mce_SELRES_start"></span><span style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" data-mce-type="bookmark" class="mce_SELRES_start"></span><span style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" data-mce-type="bookmark" class="mce_SELRES_start"></span></iframe>  
    <?php endif; ?>
</div>

这版代码的现存问题：

• 未做全局文章对象的安全校验，在自定义模板、Ajax渲染等场景下，会因为$post对象未加载直接抛出PHP报错
• iframe标签内残留了4个WordPress可视化编辑器自动插入的无效占位代码，无实际功能作用，仅会污染页面DOM结构
• 缺少兜底判断逻辑，当ytvideourl为空、同时ytembed也为空时，会渲染出地址残缺的无效YouTube iframe

修复后可正常运行的代码 #

<div class="trailer">
    <?php
    // 安全加载全局文章对象，避免未加载场景的报错
    global $post;
    // 一次性读取两个自定义字段值，减少重复数据库查询
    $yt_video_url = get_post_meta($post->ID, 'ytvideourl', true);
    $yt_embed_code = get_post_meta($post->ID, 'ytembed', true);

    // 优先字段非空时，直接渲染对应视频
    if ( ! empty( $yt_video_url ) ) :
    ?>
        <iframe 
            src="<?php echo esc_url( $yt_video_url ); ?>"
            width="400" 
            height="230" 
            frameborder="0" 
            allowfullscreen="allowfullscreen"
        ></iframe>
    <?php 
    // 优先字段为空时，判断嵌入字段是否存在，存在才渲染
    elseif ( ! empty( $yt_embed_code ) ) :
    ?>
        <iframe 
            src="https://www.youtube.com/embed/<?php echo esc_attr( $yt_embed_code ); ?>?rel=0"
            width="400" 
            height="230" 
            frameborder="0" 
            allowfullscreen="allowfullscreen"
        ></iframe>
    <?php 
    // 两个字段都为空时，输出兜底提示
    else :
    ?>
        <p>暂无相关视频内容</p>
    <?php endif; ?>
</div>

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