WordPress自定义主题视频上传及自动播放功能故障解决

问题根源 #

WP_Customize_Media_Control控件默认存储的是媒体附件的ID，而非直接的文件URL。你的代码存在以下错误：

• 使用esc_url_raw作为sanitize回调，错误地将附件ID当作URL处理，导致存储和读取时数据异常（出现https://35这类截断值）
• 读取时直接用get_theme_mod获取值当作URL输出，未将ID转换为实际文件地址
• 存储逻辑不匹配导致自定义izer发布后设置丢失

修复步骤 #

1. 修正functions.php中的自定义izer设置 #

将存储逻辑改为处理附件ID，调整sanitize回调并确保控件配置正确：

function theme_customizer_settings($wp_customize)
{
    // 注册视频设置（存储附件ID）
    $wp_customize->add_setting('theme_custom_video', array(
        'default' => 0, // 默认值设为0（无附件）
        'sanitize_callback' => 'absint', // 确保存储的是整数ID
    ));

    // 添加媒体控件
    $wp_customize->add_control(new WP_Customize_Media_Control($wp_customize, 'theme_custom_video', array(
        'label' => __('Custom Video', 'theme'),
        'section' => 'title_tagline',
        'mime_type' => 'video',
        'button_labels' => array( // 可选：优化按钮文字
            'select' => __('选择视频', 'theme'),
            'change' => __('更换视频', 'theme'),
            'remove' => __('移除视频', 'theme'),
        )
    )));
}
add_action('customize_register', 'theme_customizer_settings');

2. 修正front-page.php中的视频URL获取逻辑 #

先获取附件ID，再转换为实际文件URL，同时保留默认视频的 fallback：

<div>
    <?php
    // 获取存储的附件ID
    $video_id = get_theme_mod('theme_custom_video', 0);
    // 根据ID获取视频URL，若无则使用默认视频路径
    $video_url = $video_id ? wp_get_attachment_url($video_id) : get_template_directory_uri() . '/videos/offroading_video.mp4';
    ?>
    <video src="<?php echo esc_url($video_url); ?>" autoplay muted loop></video>
</div>

3. 额外优化建议 #

• 确保主题内videos/offroading_video.mp4文件路径正确，使用get_template_directory_uri()避免相对路径问题
• 可以添加视频加载失败的 fallback 图片，提升用户体验：

  <video src="<?php echo esc_url($video_url); ?>" autoplay muted loop poster="<?php echo get_template_directory_uri(); ?>/images/video-fallback.jpg">
      您的浏览器不支持视频播放
  </video>
  

• 测试时清空浏览器缓存，避免旧数据干扰

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