如何使用 Wordpress 内联整个样式表的内容？

Question

我正在使用 Wordpress，但这个问题可能适用于其他 PHP-driven 模板系统。

我想要一个 css 文件（即 critical.css），其中包含重要全局元素的所有样式和 above-the-fold 内容（例如排版，header 包括导航、site-wide banners/heros)，与我的模块化内容、page-specific 样式和页脚样式分开。然后我想获取此文件的内容并将其打印在文档标题标签正下方的样式标签之间。

目标是提高 above-the-fold 渲染速度。我注意到，当优先考虑这些样式（以及任何重置）时，above-the-fold 内容的呈现有了明显的改进，即使这些改进更多的是体验性的而不是技术性的。

但是...我无法弄清楚如何将此文档中的内联样式 "print" 插入 wp_head。

我已经研究过 wp_add_inline_style，但它似乎没有提供我需要的功能。看来你必须在一个函数中定义这些样式，而这绝对不是我想要的。

是否有一种方法可以将我的 critical.css 文件中的内联样式挂钩到 wp_head 中？根据 the Codex.
如果不是，在 Wordpress 中强调这些关键样式的首选方法是什么？最好是一种不 render-blocking 或不依赖元数据框的方法。

我试图避免使用 PHP 包含（即将 PHP 标签之间的所有内容转储到 critical-styles.php 文件中，然后在wp_head) 支持更清洁的东西，或者可以使用 functions.php 或 Wordpress 的本机挂钩实现的东西。现在所有的重点都放在了 Pagespeed 优化上，令我惊讶的是这里没有在 Wordpress 上下文中提出这个问题。非常感谢任何对此或对您更有效的方法的帮助。

Answer 1

您可以简单地 include 实际 CSS 文件 header.php:

<style>
    <?php include 'path/to/critical.css'; ?>
</style>

PHP 的 include() 函数不要求包含的文件也必须是 PHP.

或者，如果您想将内容保留在 functions.php 中，您可以执行 file_get_contents() 并挂接到 wp_head 操作挂钩:

function hook_critical_css() {
    $critical_css = file_get_contents( 'path/to/critical.css' );
    echo '<style>' . $critical_css . '</style>';
}
add_action('wp_head','hook_critical_css');

如何使用 Wordpress 内联整个样式表的内容？

How to inline the contents of an entire stylesheet with Wordpress?

css

php

wordpress

wordpress-theming