Question

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

我希望有一个css文件（即critical.css），其中包含重要全局元素的所有样式。首屏内容（例如排版，标题包括，导航，网站范围的横幅/英雄），与我的模块化内容，页面特定的样式＆amp;页脚样式。然后，我想获取此文件的内容，并在文档标题标记正下方的样式标记之间打印。

目标是提高折叠率以上的渲染速度。我注意到，当这些样式被优先处理（以及任何重置）时，对上层内容的呈现有一定的改进，即使这些改进比经验更具体验性。

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

我已经探索过wp_add_inline_style，但这似乎并没有提供我需要的功能。看来你必须在一个函数中定义那些样式，这绝对不是我要追求的。

是否存在将从我的critical.css文件中取出的内联样式挂钩到wp_head的方法？根据{{3}}，wp_print_styles已弃用或不推荐。
如果没有，在Wordpress中强调这些关键风格的首选方法是什么？优选地，不是渲染阻止或不依赖于元框的方法。

我正在尝试避免使用PHP包含（即将关键样式.php文件中的PHP标记之间的所有内容转储，然后在wp_head中调用它），以支持更清洁或可以通过functions.php实现的内容。或Wordpress的本机钩子。现在所有人都强调了Pagespeed优化，我很惊讶这里没有在Wordpress环境中提出这个问题。我们非常感谢您对此有所帮助或对您有所帮助的方法。

Answer 1

您只需include 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');

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

1 个答案: