WordPress怎么引用javascript和 CSS 文件

2024-09-07 00:50:09

字体：大中小

来源：转载

供稿：网友

第一种就是常见的 link 标签引用 CSS 文件,Script 标签应用 JS 文件,这里不再赘述.

第二种就是使用 wp_head 函数,wp_head 函数用来输出一些自定义或者系统定义的内容,我们有时候会使用下面代码引用文件:

<?php

add_action('wp_head', 'wpjam_normal_script');

function wpjam_normal_script() {

echo '资源文件的链接';

}

?>

将上面代码复制到 functions.php 文件中,即可引用对应的文件.

WordPress 的排队引用（Enqueue Scripts）资源机制

在 WordPress 中引用资源,应该使用 wp_enqueue_script 这个函数,函数名中有个单词 enqueue 是排队或者排序的意思,众所周知，WordPress 有很多的插件,几乎每个插件都会引用一些资源文件,难免会有两个插件引用的资源发生冲突等,这样会变得不稳定而且可能会影响效率.

使用这种方式引用,和对应文件以及核心代码分离的,如果用户想要禁用某个资源,直接删除、修改、注释掉即可,而不需要从核心代码中修改.

此外,WordPress 中内置了一些常用的库(例如 jQuery、jQuery UI 等),我们可以使用wp_enqueue_script 这个函数直接调用内置库,可以节约代码量,更加清晰规范.

如果使用这个函数来引用自己的 JS 和 CSS 文件,首先需要使用 wp_register_script 这个函数注册一个标识(handle),然后使用 wp_enqueue_script 函数调取这个标志对应的资源。

WordPress 合理引入 JS 和 CSS 的方法,可以使用下面代码为你的插件引入 plugin.css 文件.

<?php

function wpjam_add_styles() {

  wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));

  wp_enqueue_script('plugin_stylesheet');

}



add_action( 'wp_enqueue_scripts', 'wpjam_add_styles' );

?>

上面先用 wp_register_script 函数创建了一个标识符为 plugin_stylesheet 的资源,随后将其排队请求添加到 wp_enqueue_scripts action 中,虽然函数名中是 script，但是跟资源文件的类型没有关系,对 CSS 和 JS 都有效。

很显然 wp_register_script 函数没有这么简单,它可以有五个参数：

•$handle：资源标识符，供 wp_enqueue_script 调用。

•$src：资源的位置。相对地址或者绝对地址或者使用 WordPress 内置的函数获取地址等。常用定位函数有 plugins_url、get_template_directory_uri 等。

•$deps：依赖关系。如果引用的是 jQuery 插件，需要依赖 jQuery 组建，那么就需要填写上 jQuery。注意，以数组的形式传递。

•$ver：资源版本，可选的。

•$in_footer：是否放在底部,一般来说,JS 文件要放在页面的底部,就可以设置这个参数为 True,留空或者 False 会输出到顶部。

下面看一个引用 JavaScript 文件的比较完整的例子:

<?php

function wpjam_add_scripts() {

  wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);

  wp_enqueue_script('plugin_script');

}

add_action( 'wp_enqueue_scripts', 'wpjam_add_scripts' );

?>