在页脚加载CSS，就像您可以使用JS一样？

时间：2019-01-18 作者：Johan Dahl

我正在wp\\u enqueue\\u风格的帮助下加载一些第三方CSS。我希望这个CSS加载到页脚中，这样它就不会阻止页面的呈现。这很好，因为这个CSS与一些即时加载到页面上的聊天功能相关。对于JS，有一个选项可以在body标记的末尾之前添加，而不是在页面的顶部，但是CSS似乎不存在这样的选项。所以，我想知道是否有一些聪明的解决方案？

--Edit

我知道严格来说，样式和链接标签除了在头部之外，在任何地方都是不允许的，但我认为这是一个有争议的问题。浏览器不会对此抱怨，如果情况如此糟糕，谷歌为什么会推荐这种做法？

3 个回复
最合适的回答,由SO网友:admcfajn 整理而成

是的，从技术上讲你可以。但您不应该在页脚中加载css，css链接位于<head> 被视为无效。

更好的技术是使用javaScript将css链接添加到dom。您甚至可能希望拆分css，以便以内联方式加载关键部分（因此您可以避免FOUC)

以下是GiftOfSpeed

这个JS将动态创建css链接元素

<script type="text/javascript">
  /* First CSS File */
  var wpse326013 = document.createElement(\'link\');
  wpse326013.rel = \'stylesheet\';
  wpse326013.href = \'../css/yourcssfile.css\';
  wpse326013.type = \'text/css\';
  var godefer = document.getElementsByTagName(\'link\')[0];
  godefer.parentNode.insertBefore(wpse326013, godefer);

  /* Second CSS File */
  var wpse326013_2 = document.createElement(\'link\');
  wpse326013_2.rel = \'stylesheet\';
  wpse326013_2.href = \'../css/yourcssfile2.css\';
  wpse326013_2.type = \'text/css\';
  var godefer2 = document.getElementsByTagName(\'link\')[0];
  godefer2.parentNode.insertBefore(wpse326013_2, godefer2);
</script>
&；H；为了实现优雅的降级，我们还将在head元素内部包含以下内容
<noscript>
  <link rel="stylesheet" type="text/css" href="../css/yourcssfile.css" />
  <link rel="stylesheet" type="text/css" href="../css/yourcssfile2.css" />
</noscript>
您还可以将javaScript的执行包装在一个超时内，下面的示例会将执行延迟2秒。

setTimeout(function(){
  var wpse326013 = document.createElement(\'link\');
  wpse326013.rel = \'stylesheet\';
  wpse326013.href = \'../css/yourcssfile.css\';
  wpse326013.type = \'text/css\';
  var godefer = document.getElementsByTagName(\'link\')[0];
  godefer.parentNode.insertBefore(wpse326013, godefer);
}, 2000);

SO网友:Liam Stewart

尝试：

function 326013_add_footer_styles() {
    wp_enqueue_style( \'your-style-id\', get_template_directory_uri() . \'/stylesheets/somestyle.css\' );
};
add_action( \'get_footer\', \'326013_add_footer_styles\' );
从这个答案中：https://wordpress.stackexchange.com/a/186066/121955

SO网友:Keith Tysinger

现代网络浏览器似乎没有这个问题。您可以这样做，并对网页的任何关键部分使用内联CSS。

然而，这并不意味着您应该将CSS放在文档的主体中。它被设计为只包含在标题中。这是正确的Html语法。我讨厌看到网站元素重新排列自己，因为css被插入了页脚。

我建议您通过最小化程序运行CSS，并/或将其添加到CDN。您还可以通过添加一些gzip压缩。htaccess文件（如果适用）。最后，您可以将站点的所有css合并到一个大文件中，以加快加载时间。

标签： css   wp-enqueue-style   footer   小码农  

相关推荐

将页面特定的css文件入队的正确方法

我正在寻找一种替代使用函数的方法。php并基于每个页面的ID应用条件，相反，我希望将CSS排在每个页面的顶部，如下所示：<?php defined(\'ABSPATH\') or die(); ?> <?php get_header();?> <?php wp_enqueue_style(\'home\', get_template_directory_uri() . \'/assets/css/style.css\', \'\',