我正在使用Wordpress, 但是这个问题可能适用于其他PHP驱动的模板系统。
我想要一个css文件(即critical.css), 其中包含重要的全局元素和首屏内容(例如, 版式, 标头包括, 导航, 站点范围内的横幅/英雄)的所有样式, 并分开存放从我的模块化内容, 页面特定的样式和页脚样式。然后, 我想获取该文件的内容, 并在文档标题标签正下方的样式标签之间进行打印。
目标是提高首屏渲染速度。我注意到, 当优先考虑那些样式(以及所有重置)时, 首屏内容的呈现方式有了明显的改进, 即使这些改进比技术上的体验更丰富。
但是…
我在弄清楚如何将该文档中的内联样式”
打印”
到wp_head中时遇到了麻烦。
我已经研究过wp_add_inline_style, 但它似乎没有提供我需要的功能。看来你必须在函数中定义这些样式, 这绝对不是我要追求的。
- 是否存在将我的critical.css文件中的内联样式挂接到wp_head的方法?根据法典, 不建议使用wp_print_styles或不建议使用。
- 如果不是, 那么在Wordpress中强调这些关键样式的首选方法是什么?最好是一种不渲染阻止或不依赖于metabox的方法。
#1你只需在header.php中包含实际的CSS文件即可:
<
style>
<
?php include 'path/to/critical.css';
?>
<
/style>
PHP的include()函数不需要包含的文件也必须是PHP。
【如何使用WordPress内联整个样式表的内容()】另外, 如果要将内容保留在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页脚中添加保护我的版权链接()
- 如何使用Bootstrap使WordPress主题中的图像响应()
- 如何使用register_taxonomy_args WordPress过滤分类法args
- 如何从自定义帖子类型获取自定义类别slug和ID()
- 如何编辑dynamic_sidebar()的内容()
- 悬停时用颜色填充图像/按钮
- Firewalld
- Linux防火墙基础 —— iptables防火墙
- Shell编程之函数