用wp_enqueue_script()和wp_enqueue_style()加载脚本与样式提高效率

WP教程 欲思 3评论

WordPress 本身以及主题和插件通常需要加载一些 JavaScript 来实现某些特殊功能。为了最大限度地保证兼容性,不至于出现 JavaScript 失效的情况,所以一般在页头加载 JavaScript 文件。

但是我们一般不建议直接去修改主题的 header.php,或者添加代码到 wp_head() 或 wp_footer() 钩子上,而是要使用 WordPress 官方文档建议使用的 WP 内建的wp_enqueue_script() 和 wp_enqueue_style() 等函数进行操作。

wordpress-functions

函数:wp_enqueue_script()

函数用法:

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

参数解释:

  • $handle:用于区别 JS 名称,即标识字串 (string);
  • $src:JS 的文件 URL (string);
  • $deps:加载的 JS 所依存的其他 JS 标识字串数组 (array:string, 非必需);
  • $ver:JS 的版本号,留空则使用当前 WP 版本号 (string, 非必需);
  • $in_footer:是否放置到网页 HTML 底部加载 (boolean, 非必需)。

函数:wp_enqueue_style()

函数用法:

<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>

参数解释:

  • $handle:用于区别 CSS 的名称,即标识字串 (string);
  • $src:CSS 的文件 URL (string);
  • $deps:加载的 CSS 所依存的其他 CSS 标识字串数组 (array:string, 非必需);
  • $ver:CSS 文件的版本号,留空则使用当前 WP 版本号 (string, 非必需);
  • $media:用于加载 CSS 的头部标签 link 的 media 参数值 (string, 非必需)。

示例:

<?php
function my_enqueue_scripts() {
if( !is_admin ) { // 前台加载的脚本与样式表
// 去除已注册的 jquery 脚本
wp_deregister_script( 'jquery' );
// 注册 jquery 脚本
wp_register_script( 'jquery', get_template_directory_uri() . '/js/jquery.js', false, '1.0', false );
// 提交加载 jquery 脚本
wp_enqueue_script( 'jquery' );
 } 
} 
// 添加回调函数到 init 动作上
add_action( 'init', 'my_enqueue_scripts' );
?>

在以往我们制作 WP 主题的时候,当引入 JS 文件或 CSS 文件时,通常是直接编辑 header.php 文件,然后将相应的页面头部 HTML 代码添加进去。或者利用 wp_head() 函数钩子插入 HTML 代码。

遇到一个插件或主题功能比较多的 WordPres 网站时,如果仍使用自行插入代码的方式引入 JS / CSS,将可能导致 JS 的重载和 CSS 的重定义或覆盖的后果。而使用 wp_enqueue_script() 和wp_enqueue_style() 等函数操作头部引用,将输出 HTML 语句的工作交给 WP 内核去完成(几乎所有插件都这么做),不仅能够避免重复加载的现象出现,也可实现按 PHP 脚本顺序,任意修改、覆盖、删除即将被加载的 JS 文件和 CSS 文件。

另外一个函数:wp_print_scripts()

虽然将 JavaScript 文件都放到页面末尾加载对于页面加载速度很有帮助,但是请注意,所谓页面末尾指的是在 WordPress 的 wp_footer() 函数中调用,这个函数通常刚好位于页面的 </body> 标签前面(当然是末尾了)。

有时候我们可能会在 wp_footer 函数出现之前就需要用到某些 JavaScript,比如 jquery.js 文件。

这样的情况也是很常见的。比如我单独创建了一个链接页面,在这个页面中我使用了 jQuery 方法来获取链接网站的 favicon。很显然,我只需要在这唯一一个页面使用这部分代码,所以将这段代码直接放在这个页面模板中是最好的做法。

问题来了:这部分内容显然是在 wp_footer 之前出现的,那么这段代码就在 jquery.js 文件之前出现了,导致该代码段实际上无法工作,因为调用 jQuery 方法的代码段必须比 jquery.js 文件后加载。

那么如何处理这种特殊情况呢?其实也很简单。以上面的情景为例,既然我们需要先调用 jquery.js 文件,那我们就在该代码段之前直接输出需要的 jquery.js 文件,不使用 wp_enqueue_script() 函数,而改用wp_print_scripts() 函数。

wp_enqueue_script() 与 wp_print_scripts() 的区别是:wp_enqueue_script() 是告诉 WordPress “我在这个页面上需要用到某个 JavaScript 文件,你可要记得加载啊”。WordPress 默认在 wp_head() 中处理,而我们改为在 wp_footer() 中处理。wp_print_scripts() 则直接在你使用此方法的位置输出需要的 JavaScript 文件,而不是加入到 WordPress 的处理任务中。

如果我们在页面的中间使用,

 <?php wp_print_scripts('jquery'); ?>

直接输出了 jquery.js 文件(通常是其压缩版本 jquery.min.js),那么即使其它的插件或者什么东西使用,

 <?php wp_enqueue_script('jquery'); ?>

告诉 WordPress 需要加载 jquery.js,WordPress 在 wp_footer() 中处理的时候也会先检查前面是不是已经有了,如果有了就不会再重新加载一次。

在 WordPress 中加载 JavaScript 最好使用 wp_enqueue_script() 函数以减少问题提高效率。如果不是有这些特殊情况要处理,使用 Autoptimize 插件显然比较好,它全面完成任务而且使用简单。但是如果使用的主题本身已经很简洁了,那么 直接把JavaScript脚本放在footer或者使用:JavaScript to Footer(后台搜索即可安装)更简单高效,也就更好。

转载请注明:欲思博客 » 用wp_enqueue_script()和wp_enqueue_style()加载脚本与样式提高效率

如果你觉得这篇文章或者我分享的主题对你有帮助,请支持我继续更新网站和主题 !捐赠本站
喜欢 (23)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(3)个小伙伴在吐槽
  1. :smile: 近期着手制作主题,收藏了
    汉克博客2015-06-03 22:54 回复
  2. :grin: 很有用,正好对我有用,谢谢啦
    howru2015-04-09 16:50 回复
  3. 不错,感觉WordPress的加载样式表和JS脚本的方法有点特别,不是传统的直接在模板页面导入css和js,不知道这个有什么特殊意义没有?
    自主创业网2014-11-12 14:40 回复