我可以用$wp_Style->Add_Data将样式添加到页脚吗?

时间:2014-09-21 作者:Jeremiah Prummer

我正在编写一个脚本,使用$wp\\u脚本和$wp\\u样式中的add\\u数据功能轻松地将js和css脚本移动到页脚。我知道对于脚本,如果组大于0,脚本调用将移动到页脚(下面的第一个foreach会这样做)。但是,为样式设置组并没有相同的效果(并且使用第二个foreach正确设置了组)。有没有办法用相同的方法将样式移动到页脚,或者我应该寻找一种替代方法?

function mod_scripts(){
    global $wp_scripts, $wp_styles;
    foreach($wp_scripts->queue as $script){
        if ( ! $wp_scripts->get_data( $script, \'group\' ) ){
            $wp_scripts->add_data( $script, \'group\', 1 );
        }
    }
    foreach($wp_styles->queue as $style){
        if ( ! $wp_styles->get_data( $style, \'group\' ) ){
            $wp_styles->add_data( $style, \'group\', 1 );
        }       
    }
}
EDIT: 请求的原因是我正在尝试删除阻塞的css,以加快页面加载速度。推荐的方法基本上是直接将css嵌入到页面中,但效果并不理想。现在我意识到我所问的问题是有缺陷的。我只是在寻找一种有效的加载样式的方法,它仍然保持与插件的适当兼容性。

7 个回复
最合适的回答,由SO网友:Pieter Goosen 整理而成

我不知道您这样做的确切原因是什么,但您应该放弃将样式移动到页脚的想法。如果你想提高速度,你可能会获得一个不可忽视的数量,如果有的话,但这将以其他更大的事情为代价。

应始终在<head></head> 标签原因是<style> head标记之外的标记是无效的HTML。这就是为什么您没有在页脚中加载样式的选项wp_enqueue_stylewp_register_style 就像脚本一样。

我会认真重新考虑这整个想法。

EDIT

作为@G.M.对该答案评论的旁注。

wp_enqueue_style 添加<link> 标签,非<style> 一然而<link> 标签不允许在外部<head>

SO网友:gmazzap

@pieter-goosen@birgire 在其他答复和评论中,W3C specs 不允许在页脚中使用css,引用规范页面链接:

A.link 元素必须具有rel 属性

如果rel 属性,则元素限制为head 要素

除此之外,您应该注意,当您在页脚中添加css时,当有人打开您的页面时,它会显示为未设置样式,直到加载完整的css为止:如果连接速度较慢,您的页面会出现几秒钟的中断,通过css隐藏的元素将可见,滑块显示为可见图像的ul列表。。。

所以,真的,我认为这是个坏主意。

也就是说,我不喜欢那种“不要那样做”的回答,我更喜欢那种“你可以这样做,但我建议你不要那样做”。

所以,这里是这样做的方法,但是嘿,我建议不要这样做。

正如您所期望的那样,事情变得更加简单:应该添加脚本和样式wp_enqueue_scripts 钩子,但如果您将样式排队after wp_head 钩子被激发,然后脚本和样式被添加到页脚中。

这方面的一个有用应用是,当脚本在短代码回调中排队时,可以轻松添加特定于短代码的脚本。

关于样式,WordPress对W3C语句并不是不妥协的,它会将样式无链接地放在页脚上。

工作流:

吊钩\'wp_print_styles\', 当所有脚本和样式都已排队但未打印时,将脚本和样式的当前队列存储在变量中,清空脚本和样式的队列,这样,当WordPress查找打印头中的脚本和样式时,将找不到要打印的内容\'wp_footer\' 使用优先级0,恢复存储在点2的样式和脚本队列,这样,当WordPress查找要在页脚中打印的样式和脚本时,页脚可以找到并打印它们

add_action(\'wp_print_styles\', function() {
  if ( ! doing_action( \'wp_head\' ) ) { // ensure we are on head
    return;
  }
  global $wp_scripts, $wp_styles;
  // save actual queued scripts and styles
  $queued_scripts = $wp_scripts->queue; 
  $queued_styles  = $wp_styles->queue;
  // empty the scripts and styles queue
  $wp_scripts->queue = array();
  $wp_styles->queue  = array();
  $wp_scripts->to_do = array();
  $wp_styles->to_do  = array();
  add_action( \'wp_footer\', function() use( $queued_scripts, $queued_styles ) {
    // reset the queue to print scripts and styles in footer
    global $wp_scripts, $wp_styles;
    $wp_scripts->queue = $queued_scripts;
    $wp_styles->queue  = $queued_styles;
    $wp_scripts->to_do = $queued_scripts;
    $wp_styles->to_do  = $queued_styles;
  }, 0 );
}, 0);
注:上述代码要求PHP 5.3+用于闭包,WP 3.9用于doing_action.

SO网友:Jeff Jenkins

我最近专门研究这个问题,是因为Google PageSpeed Insights的要求:

消除折叠内容上方的渲染阻塞JavaScript和CSS

您的页面有1个阻止脚本资源和1个阻止CSS资源。这会导致页面呈现延迟。

如果不等待加载以下资源,则无法呈现页面上的上述折叠内容。尝试延迟或异步加载阻塞资源,或将这些资源的关键部分直接内联到HTML中。

优化以下内容的CSS交付:
/风格最小css?版本=4.8

Google\'s recommendation 是使用内联<style>...</style> 中的块<head>...</head> 并通过JavaScript加载非关键CSS。

我不知道如何在不需要外部样式表的情况下使用WordPress的本机函数将本机样式块排队(请参阅:wp_add_inline_style. 因此,我只是使用自己的自定义header.phpfooter.php 模板文件:

header.php

<!-- ... -->
  <?php wp_head(); ?>
  <style id="critical-styles" type="text/css" media="screen">html { background: black; } body { opacity: 0; }</style>
</head>
<!-- ... -->

footer.php

  <!-- ... -->
  <noscript id="deferred-styles">
    <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri() . \'/style.min.css?\' . urb_get_version(); ?>" />
  </noscript>
  <script>
    var loadDeferredStyles = function() {
      var addStylesNode = document.getElementById(\'deferred-styles\');
      var replacement = document.createElement(\'div\');
      replacement.innerHTML = addStylesNode.textContent;
      document.body.appendChild(replacement)
      addStylesNode.parentElement.removeChild(addStylesNode);
    };
    var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame;
    if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
    else window.addEventListener(\'load\', loadDeferredStyles);
  </script>
  <?php wp_footer(); ?>
</body>
</html>
注意:我的关键样式块包括:body { opacity: 0; } 作为隐藏未设置样式的内容的一种方式。加载延迟样式表后,它包括body { opacity: 1; } 使用转换清除此属性。

SO网友:Tyler Smith

我将重复这里的其他答案,即如果没有充分的理由,您可能不应该在页脚中添加样式。然而,我只是在一个插件在body标签中插入样式的网站上做了这件事,所以我想分享一下我是如何在页脚中添加样式的。

<?php
function print_footer_styles() {
    $style_handle  = \'footer-styles\';
    wp_register_style( $style_handle, get_template_directory_uri() . \'/css/footer-styles.css\' );
    wp_print_styles( array( $style_handle ) );
}

add_action( \'wp_footer\', \'print_footer_styles\' );

SO网友:Diogo Gomes

页面加载速度可能受到其他请求的影响
喜欢Pieter Goosen 说你可能不会注意到其中的区别
要证明这一点,请删除这些脚本请求并检查页面加载的差异。

使用Firefox或Google Chrome开发工具,您可以轻松地检查所有请求,并查看哪些请求减慢了您的网站速度。

加快页面加载:

检查SQL查询并对其进行优化缩小脚本使用缓存插件干杯

SO网友:Eugen Mihailescu

不管有没有建议不要在页脚上加载CSS(我同意这一点),如果您真的需要在前端的页脚上加载CSS,那么最简单的方法是在wp\\u footer hook(如果是admin,则为admin\\u footer)上挂接排队函数,在那里您将对样式表进行排队:

// change these variables to fit your needs
$handle = \'my-css\';
$css_url = plugins_url( \'plugin_style.css\', __FILE__ );
$priority = 10; // make it 9999 if you want to enqueue it just before </body>

add_action(\'wp_footer\',\'enqueue_my_styles\', $priority);

function enqueue_my_styles(){
    wp_enqueue_style( $handle, $css_url);
}

SO网友:Prince of Peace and Happiness

实际上,完整css概念背后的原理应该放在底部(页脚),最后加载,这相当复杂。

它从“如何做生意”(MONEY)开始,从谷歌的研究中发现,如果[移动]用户必须等待3秒钟以上才能呈现网页,他们将“弃车而去”-->网站将损失约xxx%的利润。研究内容如下:https://think.storage.googleapis.com/docs/mobile-page-speed-new-industry-benchmarks.pdf

https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/

更多参考:https://developers.google.com/speed/docs/insights/mobile https://www.thinkwithgoogle.com/feature/mobile-app-user-demographics/#/

从研究中,他们得出结论,网页必须能够在第一秒钟内交付第一次呈现(因此,“高于折叠内容”--AFT),才能不流失访问者(以及经济利益)。这对于移动站点来说是特别的,但对于“桌面站点”来说也是一样的(程度稍低)。

根据研究得出的结论,他们制定了优化“网页呈现方式/顺序”的原则和实施方案,以获得最大效益,并留住尽可能多的访问者(为了更准确地说,尽可能减少访问者)。

这就是(根据谷歌的说法)网站应该只在标题中包含基本资源(CSS、JS)的方式:尽可能快地交付AFT内容,直到交付AFT内容的理想时间达到1秒。所有剩余的资源(完整CSS、完整JS等)应在后台加载,而AFT内容应在第一秒钟内交付给访问者,以保持他们留在网页上。

这就是他们推广这种方法的方式和原因。记住,网站的好处也是谷歌的好处:如果网站失去了太多的访问者(根据研究,如果他们必须等待3秒钟以上,则为53%),他们将失去经济利益;如果网站失去了财务利益,谷歌也会失去自己的财务利益——这是互惠互利的。这些研究针对的是移动网站,对于“桌面网站”,其影响会稍微小一些——但仍然存在!

你可能同意我,也可能同意谷歌,或者不同意!你也可能有更好/不同的方式做生意!

所有最好的!

结束

相关推荐

为什么带有?ver=3.9.2的style.css没有更新为没有?ver=3.9.2的?

我的问题是风格。我上传到主机服务器的css未生效。我正在使用GoDaddy business wordpress托管。请注意,以下两个具有不同的内容,只有第一个应用了我的更新:http://auapg.com/wp-content/themes/homeland/style.csshttp://auapg.com/wp-content/themes/homeland/style.css?ver=3.9.2 我不知道是什么魔法?ver=3.9.2“对css文件进行了修改。无论如何,我希望它可以有相同的内容作