WordPress自定义短代码实现YouTube嵌入及WP-Rocket懒加载兼容求助

问题出在你使用的wp_video_shortcode是针对自托管视频的，生成的是<video>播放器结构，而非WP自动嵌入YouTube时生成的标准<iframe>，所以WP-Rocket的懒加载规则无法识别。要实现和纯文本URL完全一致的效果，需要让短代码输出WP标准的YouTube嵌入代码，具体有两种可靠方法：

方法1：直接生成标准oEmbed嵌入代码 #

这个方法通过WP内置的wp_oembed_get函数生成和纯文本URL转嵌入完全一致的iframe结构，WP-Rocket能直接识别并触发懒加载：

function sidebar_youtube_video_shortcode( $atts ) {
    // 定义短代码参数，支持直接传视频URL或ID
    $atts = shortcode_atts( array(
        'url' => '',
        'id'  => ''
    ), $atts );

    // 构建视频URL（优先使用传入的URL，没有则用ID拼接）
    if ( ! empty( $atts['id'] ) ) {
        $video_url = 'https://www.youtube.com/watch?v=' . esc_attr( $atts['id'] );
    } elseif ( ! empty( $atts['url'] ) ) {
        $video_url = esc_url( $atts['url'] );
    } else {
        return ''; // 无有效参数时返回空
    }

    // 获取WP标准的YouTube嵌入代码
    $embed_code = wp_oembed_get( $video_url );

    // 嵌入失败时返回原URL作为降级方案
    return $embed_code ?: $video_url;
}
add_shortcode( 'sidebar_youtube', 'sidebar_youtube_video_shortcode' );

使用方式 #

• 传入完整URL：[sidebar_youtube url="https://www.youtube.com/watch?v=ydZit1jcG8c"]
• 传入视频ID：[sidebar_youtube id="ydZit1jcG8c"]

方法2：让纯文本URL触发WP自动嵌入 #

如果希望保留和纯文本URL完全一致的处理流程，可通过the_content过滤器让WP自动把短代码输出的URL转为嵌入代码：

function sidebar_youtube_video_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'url' => '',
        'id'  => ''
    ), $atts );

    if ( ! empty( $atts['id'] ) ) {
        $video_url = 'https://www.youtube.com/watch?v=' . esc_attr( $atts['id'] );
    } elseif ( ! empty( $atts['url'] ) ) {
        $video_url = esc_url( $atts['url'] );
    } else {
        return '';
    }

    // 通过the_content过滤器触发WP自动嵌入机制
    return apply_filters( 'the_content', $video_url );
}
add_shortcode( 'sidebar_youtube', 'sidebar_youtube_video_shortcode' );

注意事项 #

1. 确保WP-Rocket后台「媒体」设置中，YouTube懒加载已开启（默认是开启状态）。
2. Elementor的文本小部件需启用「处理短代码」选项（默认启用）。

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