引用javascript文件-WordPress 教程:如何正确引用 JavaScript 和 CSS 文件

2023-09-02 0 8,039 百度已收录

在开发WordPress插件或者制作WordPress主题时,会引用一些JavaScript和CSS脚本资源。 通常你直接使用链接和脚本标签写入HTML。 事实上,WordPress内置了比较完善的引用脚本的功能和技术。 显然引用javascript文件,使用WordPress的内置引文更加专业和可扩展。

有缺陷的引用

以下是两种常见的引用方式,这两种方式并没有错误,但是不健全或者不合理。

首先是常见的link标签引用的是CSS文件,而Script标签引用的是JS文件。 这里不再详细说明。

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

引用javascript文件-WordPress 教程:如何正确引用 JavaScript 和 CSS 文件

将前面的代码复制到functions.php文件中以引用相应的文件。

WordPress 中的排队脚本资源机制

引用javascript文件-WordPress 教程:如何正确引用 JavaScript 和 CSS 文件

要在 WordPress 中引用资源,您应该使用 wp_enqueue_script 函数。 函数名中有一个短语enqueue,意思是排队或排序。 众所周知引用javascript文件,WordPress有很多插件,几乎每个插件也引用了一些资源文件。 难免会出现两个插件引用的资源冲突等情况,会显得不稳定,还可能影响效率。

使用这些方法的引用与相应的文件和核心代码是分离的。 如果用户想要禁用某个资源,可以直接删除、修改或注释掉该资源,而无需从核心代码进行更改。

另外,WordPress还有一些常用的外部库(如jQuery、jQuery UI等)。 我们可以使用wp_enqueue_script函数直接调用内置的库,这样可以节省代码量,并且更清晰、更规范。 请提供内置已定义库的列表和标识符(句柄)。

引用javascript文件-WordPress 教程:如何正确引用 JavaScript 和 CSS 文件

如果使用该函数引用自己的JS、CSS文件,首先需要使用wp_register_script函数注册一个标记(句柄),然后使用wp_enqueue_script函数调用该标记对应的资源。

WordPress中引入JS和CSS的合理方式

您可以使用以下代码导入插件的plugin.css 文件。

引用javascript文件-WordPress 教程:如何正确引用 JavaScript 和 CSS 文件

上面首先使用wp_register_script函数创建一个标识符为plugin_stylesheet的资源,然后将其队列请求添加到wp_enqueue_scripts操作中。 script虽然在函数名中,但与资源文件的类型无关,对CSS和JS都有效。

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

引用javascript文件-WordPress 教程:如何正确引用 JavaScript 和 CSS 文件

让我们看一个引用 JavaScript 文件的更完整的示例:

WordPress主题开发中使用wp_enqueue_script引入资源

以上示例均以插件开发引用资源为例。 主题中引用资源的方法类似。 主要区别在于,使用相应的函数来获取主题目录,从而获取主题下的资源文件地址。

您可以使用 get_template_directory_uri 函数获取当前主题的目录。 如果使用的是子主题,则需要使用 get_stylesheet_directory_uri 函数获取父主题的目录并获取相应的资源。

我喜欢煮鱼。 本站推荐主机为阿里云。 国外主机推荐使用BlueHost。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 javascript 引用javascript文件-WordPress 教程:如何正确引用 JavaScript 和 CSS 文件 https://www.wkzy.net/game/189673.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务