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

Question

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

我想要一个 css 文件(即 critical.css)，其中包含重要全局元素和首屏内容(例如版式、标题包含、导航、站点范围的横幅/英雄)的所有样式, 与我的模块化内容、页面特定样式和页脚样式分开。然后我想获取此文件的内容并将其打印在文档标题标签正下方的样式标签之间。

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

但是...我无法弄清楚如何将本文档中的内联样式“打印”到 wp_head 中。

我探索了 wp_add_inline_style这似乎没有提供我需要的功能。看来您必须在一个函数中定义这些样式，而这绝对不是我想要的。

1. 是否有一种方法可以将我的 critical.css 文件中的内联样式 Hook 到 wp_head 中？根据 the Codex，wp_print_styles 已弃用或不推荐使用.
2. 如果不是，在 Wordpress 中强调这些关键样式的首选方法是什么？最好是不阻塞渲染或不依赖元数据框的方法。

我试图避免使用 PHP include(即将 PHP 标签之间的所有内容转储到 critical-styles.php 文件中，然后在 wp_head 中调用它)以支持更清晰的内容或可以通过 functions.php 实现的内容或 Wordpress 的原生钩子(Hook)。现在所有的重点都放在了 Pagespeed 优化上，令我惊讶的是这里没有在 Wordpress 上下文中提出这个问题。非常感谢您对此提供的任何帮助或更适合您的方法。

Answer 1

您可以简单地包含 header.php 中的实际 CSS 文件:

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

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

或者，如果您想将内容保存在functions.php 中，您可以执行file_get_contents() 并挂接到wp_head 中。 Action Hook :

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');