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

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

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

目标是提高首屏渲染速度。我注意到, 当优先考虑那些样式(以及所有重置)时, 首屏内容的呈现方式有了明显的改进, 即使这些改进比技术上的体验更丰富。

但是…我在弄清楚如何将该文档中的内联样式”打印”到wp_head中时遇到了麻烦。

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

1. 是否存在将我的critical.css文件中的内联样式挂接到wp_head的方法？根据法典, 不建议使用wp_print_styles或不建议使用。
2. 如果不是, 那么在Wordpress中强调这些关键样式的首选方法是什么？最好是一种不渲染阻止或不依赖于metabox的方法。

我试图避免使用PHP包含(例如, 将PHP标记之间的所有内容都转储到critical-styles.php文件中, 然后在wp_head中进行调用), 而倾向于使用更清洁的方法或可以使用functions.php或Wordpress的本机实现的方法钩子。如今, 由于所有重点都放在了Pagespeed优化上, 令我惊讶的是, 在Wordpress上下文中没有被问到这一点。非常感谢你对此方法或方法的帮助。

#1

你只需在header.php中包含实际的CSS文件即可：

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