wp_enqueue_script()、wp_enqueue_style() 加载脚本与样式表

技术文章 2014年9月24日 4.51K

在许多场合中,不管是制作修改主题或插件,我们都需要调用一些 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, 非必需)。

示例:

<?php

function my_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 功能已经格外强大了。

 


关注微信公众号『PHP学习网

第一时间了解最新网络动态
关注博主不迷路~

PHP学习网:站内收集的部分资源来源于网络,若侵犯了您的合法权益,请联系我们删除!
分享到:
赞(0)

文章评论

您需要之后才可以评论
0点赞 0评论 收藏 QQ分享 微博分享

PHP学习网

PHP学习网