在开发WordPress插件或者制作WordPress主题时,会引用一些JavaScript和CSS脚本资源。 通常你直接使用链接和脚本标签写入HTML。 事实上,WordPress内置了比较完善的引用脚本的功能和技术。 显然引用javascript文件,使用WordPress的内置引文更加专业和可扩展。
有缺陷的引用
以下是两种常见的引用方式,这两种方式并没有错误,但是不健全或者不合理。
首先是常见的link标签引用的是CSS文件,而Script标签引用的是JS文件。 这里不再详细说明。
第二种是使用wp_head函数。 wp_head 函数用于输出一些自定义或系统定义的内容。 我们有时会使用以下代码来引用文件:
将前面的代码复制到functions.php文件中以引用相应的文件。
WordPress 中的排队脚本资源机制
要在 WordPress 中引用资源,您应该使用 wp_enqueue_script 函数。 函数名中有一个短语enqueue,意思是排队或排序。 众所周知引用javascript文件,WordPress有很多插件,几乎每个插件也引用了一些资源文件。 难免会出现两个插件引用的资源冲突等情况,会显得不稳定,还可能影响效率。
使用这些方法的引用与相应的文件和核心代码是分离的。 如果用户想要禁用某个资源,可以直接删除、修改或注释掉该资源,而无需从核心代码进行更改。
另外,WordPress还有一些常用的外部库(如jQuery、jQuery UI等)。 我们可以使用wp_enqueue_script函数直接调用内置的库,这样可以节省代码量,并且更清晰、更规范。 请提供内置已定义库的列表和标识符(句柄)。
如果使用该函数引用自己的JS、CSS文件,首先需要使用wp_register_script函数注册一个标记(句柄),然后使用wp_enqueue_script函数调用该标记对应的资源。
WordPress中引入JS和CSS的合理方式
您可以使用以下代码导入插件的plugin.css 文件。
上面首先使用wp_register_script函数创建一个标识符为plugin_stylesheet的资源,然后将其队列请求添加到wp_enqueue_scripts操作中。 script虽然在函数名中,但与资源文件的类型无关,对CSS和JS都有效。
显然wp_register_script函数没有这么简单,它可以有五个参数:
让我们看一个引用 JavaScript 文件的更完整的示例:
WordPress主题开发中使用wp_enqueue_script引入资源
以上示例均以插件开发引用资源为例。 主题中引用资源的方法类似。 主要区别在于,使用相应的函数来获取主题目录,从而获取主题下的资源文件地址。
您可以使用 get_template_directory_uri 函数获取当前主题的目录。 如果使用的是子主题,则需要使用 get_stylesheet_directory_uri 函数获取父主题的目录并获取相应的资源。
我喜欢煮鱼。 本站推荐主机为阿里云。 国外主机推荐使用BlueHost。