在WordPress中为CSS文件添加预加载

Question

我是新手，正在学习WordPress，并尝试预加载某些CSS文件。我了解到可以使用wp_enqueue_style（）将它们加载到头部，因此我尝试访问从中生成的HTML以添加rel ="preload"。

到目前为止，它看起来像这样：

wp_enqueue_script('main-style', 'styles/main-style.css', false, null);

add_filter('script_loader_tag', 'preload_filter', 10, 2);

function preload_filter($html, $handle) {
   if (strcmp($handle, 'main-style') == 0) {
      $html = str_replace("rel='stylesheet'", "rel='preload' as='style' ", $html);
   }

   return $html;
} 

尽管我添加了这个 preload_filter 函数，但我的CSS没有完全加载，不仅仅是指定的样式表... 我在尝试做什么方面缺少了什么，或者有更简单的方法吗？任何帮助都将不胜感激。

- SkinnyBetas

---

为什么你在wp_enqueue_script()中添加了main-style.css，应该是wp_enqueue_style()。 - undefined

Answer 1

为了将样式文件加入队列，您需要使用 wp_enqueue_style 函数。您使用的是 wp_enqueue_script 函数，该函数用于将 JavaScript 文件加入队列。

wp_enqueue_style('preload-style', 'styles/main-style.css', false, null);

你需要使用 style_loader_tag 过滤器来过滤已加入队列的样式表的 HTML 链接标签。

add_filter( 'style_loader_tag',  'preload_filter', 10, 2 );
function preload_filter( $html, $handle ){
    if (strcmp($handle, 'preload-style') == 0) {
        $html = str_replace("rel='stylesheet'", "rel='preload' as='style' ", $html);
    }
    return $html;
}

但是您使用了 script_loader_tag 过滤器，该过滤器用于过滤 <script> 标签。

- Intelligent Web Solution

---

嗯，奇怪的是，即使我进行了这些更改，使用预加载函数时，我所排队的CSS文件根本没有加载。 - undefined

你需要稍后再次加载CSS文件。请查看https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content 换句话说，你的HTML中应该有两行（预加载和加载）。<link rel="preload" href="style.css" as="style"> 和 <link rel="stylesheet" href="style.css"> 一起使用。如果你无法解决问题，请随时私信我。 - undefined

啊，好的，所以我还没有加载。那么我应该再次使用wp_enqueue_style吗？因为我已经预加载了吗？ - undefined

是的，没错。如果你遇到任何其他问题，请随时通过Skype（live:rsm0128）与我联系。 - undefined

所以现在我已经让预加载部分正常工作了，但是现在我需要再次加载CSS文件，我应该再次使用wp_enqueue_style（就像在添加预加载过滤器之前第一次加载时那样）吗？ - undefined

不必再使用enqueue样式，可以使用onload方法。 $html = str_replace("rel='stylesheet'", "rel='preload' as='style' onload='this.rel=\"stylesheet\"'", $html); - undefined

Answer 2

(无法回复，但可以通过此答案进行扩展https://dev59.com/OV4KtIcB2Jgan1znNMeJ#66640766)

此修改使用noscript回退，这是谷歌推荐的用于延迟CSS加载的方法。https://web.dev/defer-non-critical-css/#optimize

add_filter( 'style_loader_tag',  'preload_filter', 10, 2 );
    function preload_filter( $html, $handle ){
    if (strcmp($handle, 'preload-style') == 0) {
        $fallback = '<noscript>' . $html . '</noscript>';
        $preload = str_replace("rel='stylesheet'", "rel='preload' as='style' onload='this.rel=\"stylesheet\"'", $html);
        $html = $preload . $fallback;
    }
    return $html;
}

- vosykapavel