将 javascript 和 CSS 添加到页脚答案

【问题标题】：Add javascript and CSS to footer将 javascript 和 CSS 添加到页脚
【发布时间】：2013-11-15 04:34:55
【问题描述】：

我希望根据 PageSpeed Insights 改进我的页面加载时间/排名。问题是我的很多脚本/css 都在渲染阻塞。我怎样才能成功地使用 wp_enqueue_script() 来帮助我将大部分脚本放入页脚而不是页眉（wordpress）。

subject site

CSS 示例

<!-- CSS -->
<link rel="stylesheet" href="<?php  echo get_option('siteurl'); ?>/wp-content/themes/<?php  echo get_current_theme()  ?>/style-jquery-ui-1.8.6.custom.css" type="text/css" />
<link rel="stylesheet" href="<?php  echo get_option('siteurl'); ?>/wp-content/themes/<?php  echo get_current_theme()  ?>/style-prettyPhotoCSS.php" type="text/css" />

脚本示例

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.7.1'></script>

【问题讨论】：

更改模板中的输出位置
@charlietfl 你能解释一下怎么做吗？我以前从来没有这样做过
你实际上想要css在头，js在脚。
您是否阅读过解释wp_enqueue_script 工作原理的文档？以及如何将脚本打印到页面上？有据可查
BTW...css 不应该进入页脚，否则页面在加载 html 时不知道如何设置样式。 CSS 应该始终在头部

标签： javascript css wordpress performance

【解决方案1】：

使用wp_enqueue_script() 会是这样的；

add_action('wp_enqueue_scripts','load_scripts');
function load_scripts() {
  wp_enqueue_script( 'modernizr', get_template_directory_uri() .'/js/modernizr.custom-2.6.2.min.js', array('jquery'), '0.1', true );
}

函数的最后一个 true 将脚本调用放在页脚中

【讨论】：

【解决方案2】：

http://www.wpbeginner.com/wp-tutorials/how-to-move-javascripts-to-the-bottom-or-footer-in-wordpress/

https://developers.google.com/speed/docs/insights/BlockingJS

http://unserkaiser.com/blog/2013/10/08/how-to-move-wordpress-core-javascript-to-the-footer/

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

使用 wp_enqueue_script。

“一旦你找到了在标题部分添加 JavaScript 的插件或主题，下一步就是找出插件在哪里调用了文件。在你的主题或插件的一个 PHP 文件中，你会看到对该特定 .js 文件的调用。

如果插件或主题已经使用入队来添加 JavaScript 文件，那么您需要做的就是更改插件或主题中的 wp_register_script 函数并为 $in_footer 参数添加 true。 "

【讨论】：