如何在Gutenberg区块render回调函数中向wp_head动态添加内容

你遇到的失效问题确实和执行时机有关：WordPress的页面渲染流程中，wp_head钩子会在页面主体内容渲染前就全部执行完毕，而Gutenberg区块的render回调是在文章内容渲染阶段触发，此时wp_head已经执行完成，后续挂载的动作自然不会生效。

以下是两种可直接落地的实现方案：

方案1：服务端缓冲注入（对SEO更友好，preload触发时机更早） #

这个方案通过输出缓冲在页面最终输出前把收集到的资源插入头部，是最符合预加载需求的实现方式。

• 先定义全局存储容器，用来收集需要预加载的视频资源，避免重复添加：

// 放在主题functions.php或者自定义插件的主文件中
function custom_slider_collect_preload_resources($src = null) {
    static $preload_videos = [];
    if ($src && !in_array($src, $preload_videos)) {
        $preload_videos[] = esc_url($src);
    }
    return $preload_videos;
}

• 改造你的slider区块render回调，检测到视频字段存在时，把视频地址存入容器：

// 你的区块render回调逻辑
function custom_slider_render($attributes, $content) {
    // 假设你的视频字段存储在$attributes['video_url']中
    if (!empty($attributes['video_url'])) {
        custom_slider_collect_preload_resources($attributes['video_url']);
    }
    // 原有区块输出逻辑保持不变
    return $content;
}

• 注册缓冲处理逻辑，把收集到的资源拼接成preload标签插入头部：

add_action('template_redirect', function() {
    // 仅在前端页面生效，跳过后台场景
    if (is_admin()) return;
    ob_start(function($html) {
        $preload_tags = '';
        $videos = custom_slider_collect_preload_resources();
        foreach ($videos as $video_src) {
            $preload_tags .= "<link rel=\"preload\" href=\"{$video_src}\" as=\"video\" />\n";
        }
        // 把preload标签插入到</head>标签之前
        if ($preload_tags) {
            $html = str_replace('</head>', $preload_tags . '</head>', $html);
        }
        return $html;
    });
});

方案2：前端动态注入（实现更简单，兼容所有场景） #

如果不需要严格控制预加载触发时机，直接在区块输出时插入一段JS来动态添加头部标签即可：

// 你的区块render回调逻辑
function custom_slider_render($attributes, $content) {
    $extra_script = '';
    if (!empty($attributes['video_url'])) {
        $video_src = esc_js($attributes['video_url']);
        $extra_script = <<<HTML
        <script>
        (function() {
            const preloadLink = document.createElement('link');
            preloadLink.rel = 'preload';
            preloadLink.href = '{$video_src}';
            preloadLink.as = 'video';
            document.head.appendChild(preloadLink);
        })();
        </script>
        HTML;
    }
    // 把脚本拼接到原有区块输出内容的末尾
    return $content . $extra_script;
}

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