WordPress中为script标签添加preload属性失败，求解决

问题根源 #

你当前使用的style_loader_tag过滤器仅作用于<link>样式标签，对<script>标签完全无效，这是属性未成功添加的核心原因。脚本标签需要使用script_loader_tag专用过滤器来处理。另外，直接通过str_replace匹配id字符串的方式不够健壮，若WordPress生成的标签中引号格式或id位置发生变化，替换操作就会失效。

修正后的代码 #

function my_script_loader_tag_filter($html, $handle)
{
    if ($handle === 'preload-custom-font') {
        // 移除WordPress默认添加的脚本类型属性，预加载字体无需该属性
        $html = str_replace("type='text/javascript'", "", $html);
        // 在script标签开头插入预加载相关属性，保留原有src和id
        return str_replace("<script", "<script rel='preload' as='font' type='font/ttf'", $html);
    }
    return $html;
}
add_filter('script_loader_tag', array($this, 'my_script_loader_tag_filter'), 10, 2);

关键说明 #

1. 替换为script_loader_tag过滤器，这是WordPress专门用于修改脚本标签的钩子。
2. 先移除默认的type='text/javascript'属性，避免与预加载字体的type='font/ttf'冲突。
3. 直接在<script标签开头插入目标属性，比匹配id的方式更可靠，能适应标签属性顺序变化的情况。

额外注意 #

• 确保注册/入队该脚本时使用的handle值确实是preload-custom-font，与过滤器中的判断条件完全一致。
• 预加载字体后，CSS中引用该字体的URL需与预加载的URL完全匹配，避免浏览器重复发起请求。

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