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

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

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

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

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

我已经探索了wp_add_inline_style,但它似乎没有提供我需要的功能.看来您必须在函数中定义这些样式,这绝对不是我要追求的.

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

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

解决方法:

您只需在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-theming,css,wordpress,php
来源： https://codeday.me/bug/20191119/2038359.html