如何加载高效的脚本与样式到WordPress

0 326

在进行开发 WordPress 主题或插件时会经常需要加载一些 JavaScript 来实现某些特殊功能,或添加一些CSS样式表美化UI;Wordpress为了最大限度地保各证 JavaScript 脚本的兼容性,不至于出现 JavaScript 失效的情况,所以一般在页头加载 JavaScript 文件。

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

wordpress

函数:wp_enqueue_script()

使用方法:

参数分解:

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

函数:wp_enqueue_style()

使用方法:

参数分解:

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

示例:


在以往我们制作 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_register_script()

wp_register_script 用于注册一个脚本文件(JS文件)并将返回值的句柄提供给函数 wp_enqueue_script() 使用。

使用方法:

参数分解:

  • $handle:
    (string) (必须) 脚本名称. 名称必须唯一在之后函数 wp_enqueue_script() 会使用到该名称.
    Default: None
  • $src:
    (string) (必须) 脚本路径,可以使用绝对路径。
    Default: None
  • $deps:
    (array) (可选) 脚本依赖包,依赖包会在脚本加载之前预先加载。
    Default: array()
  • $ver:
    (string) (可选)脚本版本控制。
    Default: false
  • $in_footer:
    (boolean) (可选) 定义脚本的位置,如果为true脚本会在页面底部加载,默认在head头部加载。
    Default: false

应用实例
使用下面的方式,脚本被会自己的加载:

// 使用下面的方式进行脚本的注册及入队
add_action('wp_enqueue_scripts', 'enqueue_and_register_my_scripts');
 
function enqueue_and_register_my_scripts() {
    // 注册脚本
    wp_register_script('my_plugin', plugins_url('my-plugin/js/my_script.js'));
    // 只在特定页面使用该脚本
    if (is_page('careers')) {
        // 需要使用脚本依赖于上面注册的脚本及jQuery,则
        wp_enqueue_script('my-careers-script', plugins_url('my-pluing/js/my_careers_script.js', array('jquery', 'my_plugin'));
    }
}

发表评论

您的电子邮件地址将不会发布。