jack361博客WordPress 版本 3.3 中，对主题加载脚本与样式表的过程强制要求在 action wp_enqueue_scripts和 admin_enqueue_scripts进行处理，详细内容请见：WordPress 3.3 中加载脚本与样式表的新途径（http://www.ychong.com/wordpress-v-3-3-enqueue-scripts-and-styles/）。
The following content was written on September 10th, 2011
在许多场合中，不管是制作修改主题或插件，我们都需要调用一些 JavaScript 库，或者样式表等。这时，我们不应该直接去修改主题的 header.php，或者添加代码到 wp_head()或 wp_footer()钩子上，而是要使用 WordPress 官方文档建议使用的 WP 内建的 wp_enqueue_script()和 wp_enqueue_style()等函数进行操作。
本文将详细介绍这几个函数的作用和标准用法，以及其他等效办法的利弊。
函数：wp_enqueue_script()
函数用法：
| 1 | <?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()
函数用法：
| 1 | <?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, 非必需)。
示例
| 1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?php
functionmy_enqueue_scripts() { if( !is_admin ) { // 前台加载的脚本与样式表 // 去除已注册的 jquery 脚本 wp_deregister_script( ‘jquery’); // 注册 jquery 脚本 wp_register_script( ‘jquery’, ‘http://code.jquery.com/jquery.min.js‘, array(), ‘lastest’, false ); // 提交加载 jquery 脚本 wp_enqueue_script( ‘jquery’); // 注册 jquery-easing 脚本 wp_register_script( ‘jquery-easing’, get_template_directory_uri() . ‘/js/jquery.easing.js’, array( ‘jquery’), ‘1.2’, false ); // 提交加载 jquery-easing 脚本 wp_enqueue_script( ‘jquery-easing’); // 注册并加载 jquery-bxSlider 脚本 wp_enqueue_script( ‘jquery-bxSlider’, get_template_directory_uri() . ‘/js/jquery.bxSlider.min.js’, array( ‘jquery’, ‘jquery-easing’), ‘3.0’, false ); // 注册并加载 jquery-bxSlider 样式表 wp_enqueue_style( ‘jquery-bxSlider’, get_template_directory_uri() . ‘/css/jquery.bxSlider.css’, array(), ‘3.0’, ‘screen’); } else { // 后台加载的脚本与样式表 // 取消加载 jquery 脚本 wp_dequeue_script( ‘jquery’); // 注册并加载 jquery 脚本 wp_enqueue_script( ‘jquery’, ‘http://code.jquery.com/jquery.min.js‘, array(), ‘lastest’, false ); } } // 添加回调函数到 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 文件。
总结
在 WordPress 模板功能强大发展的今天，我们应尽量使用 WordPress 内建的众多的模板函数标签，实现主题或插件的各种功能。同时，我们更必须避免修改 WP 内核代码的可能性，WordPress 的 action 和 filter 功能已经格外强大了。
WordPress 官方参考文档链接：
- Function Reference/wp_enqueue_script
- Function Reference/wp_enqueue_style
- Function Reference/wp_register_script
- Function Reference/wp_deregister_script
评论前必须登录！
注册