0

0

了解 WordPress 主题和插件的排队脚本

PHPz

PHPz

发布时间:2023-08-30 13:21:08

|

1035人浏览过

|

来源于php中文网

原创

了解 wordpress 主题和插件的排队脚本

wp_enqueue_script 函数是将 JavaScript 文件加载到 WordPress 站点的最佳解决方案。如果您正在开发使用 JavaScript 或 JavaScript 库的主题,则可以使用 wp_enqueue_script 函数。如果您以前没有真正使用过它,那么可能会感到困惑...所以今天,我们将深入研究如何使用排队函数将脚本正确加载到您的主题或插件中。

技术和软件的后续更改

自最初发布以来,本教程中使用的应用程序或技术的某些方面已经发生了变化。这可能会让后续操作变得有点困难。我们建议您查看有关同一主题的最新教程:

  • 如何在 WordPress 主题和插件中包含 JavaScript 和 CSS

为什么要使用入队函数?

如果您有基本的 HTML 背景,您可能习惯于直接将 Javascript 文件(包括从 jQuery 到插件脚本的任何内容)直接加载到文档的页眉或页脚中。当您处于像基本 HTML 页面这样的独立环境中时,这很好……但是一旦您引入了可能在 WordPress 安装上运行的无数其他脚本,执行我所说的“人群管理”就会变得更加棘手。使用您的脚本。

那么为什么不在页眉或页脚中加载 JavaScript呢?答案非常简单:通过像这样包含 JavaScript,您将面临在安装过程中与 JavaScript 发生冲突的风险(想想,多个插件试图加载相同的脚本或该脚本的不同版本)。此外,即使您不需要,您的 JavaScript 也会加载到每个页面上。这将导致页面的加载时间不必要地延长,并且可能会干扰其他 JavaScript,例如来自插件或仪表板内的 JavaScript……这在 WP 开发中是不可以的。

通过使用 wp_enqueue_script 函数。您将可以更好地控制加载 JavaScript 的方式和时间。您甚至可以决定是否加载到页眉或页脚中。


了解 wp_enqueue_script 函数

wp_enqueue_script 函数用于将脚本加载到您的 WordPress 站点中。您通常会在 functions.php 文件中使用它。

wp_enqueue_script 函数本身非常简单,所以让我们看一下它的结构。

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

  • $handle
    • 这是要加载的脚本的句柄(名称)。应全部小写。
    • 这是必需的
    • 默认值:无
  • $scr
    • 这是脚本的 URL。
    • 如果您从服务器本地加载,则不应在服务器上对脚本的 URL 进行硬编码。主题最好使用 content_urlbloginfo("template_url")get_template_directory_uri() (WordPress 函数参考推荐),插件最好使用 plugins_url
      
      
      
      
      
      
      
      
    • 如果您从另一台服务器加载脚本。例如,从 Google CDN 加载 jQuery 库。您只需输入要加载的文件的 URL 即可。
      
      
    • 这是可选的
    • 默认值:假
  • $deps
    • 这是一个处理任何脚本依赖项的数组。例如,您的 fade.js 脚本需要 jQuery 才能运行。此参数会将您的脚本关联到 jQuery 库。
    • 如果您不想使用此参数,但想使用其他参数,请使用“false”。
      
      
    • 必须首先加载所需的脚本。
    • 您使用数组所需的脚本句柄。
      
      
    • 这是可选的
    • 默认:数组()
  • $ver
    • 这是您的脚本的版本。
    • 版本作为查询字符串连接到路径的末尾。版本可以是版本号、false 或 NULL。
    • 如果您使用 false 作为版本。将使用 WordPress 版本。
    • 如果使用 NULL。什么都不会被用作版本。 WordPress 函数参考不建议这样做。
    • 如果不使用$ver参数,则默认使用WordPress版本。
      
      
    • 这是可选的
    • 默认值:假
  • $in_footer
    • 这将决定您的脚本在页面上的位置。
    • 此参数是一个布尔值(“true”或“false”)
    • 默认情况下,您的脚本将放置在 中,但最好将其放置在 标记结束之前。这是通过将“true”传递给参数来完成的。
      
      
    • 这是可选的
    • 默认值:假

如您所见,除了 $handle 之外的所有参数都是可选的。乍一看这似乎很奇怪。特别是 $scr 参数。 WordPress 如何在没有 url 的情况下找到脚本?

这背后的原因是 WordPress 附带了内置脚本。例如,jQuery 是 WordPress 核心的一部分,WordPress 开发团队使加载这些内置脚本变得非常简单。您所要做的就是将脚本的句柄传递给 wp_enqueue_script


有关内置 WordPress 脚本及其句柄的完整列表。请查看 WordPress 函数参考。


在您的 WordPress 主题中使用排队脚本

现在您已经了解了 wp_enqueue_script 的各个部分。让我们看看您如何在 WordPress 主题中实际使用它。

要事第一

在开始正确排列脚本之前,您还需要了解其他 WordPress 函数。

  • wp_register_script
    • wp_register_script 函数用于向 WordPress 注册您的脚本。这意味着,您将能够为您的脚本使用 wp_enqueue_script ,就像 WordPress 附带的内置脚本一样
    • wp_register_script 的参数结构与 wp_enqueue_script 结构完全相同,所以我不再赘述。如果需要,您可以参考上面的部分。
    • 只需设置 wp_register_script,就像设置 wp_enqueue_script 一样。然后通过将句柄传递给 wp_enqueue_script 将脚本排队。
      
      
  • wp_deregister_script
    • wp_deregister_script 删除已注册的脚本。
    • 您所需要做的就是将句柄传递给它。
      
      
  • wp_deregister_script
    • wp_dequeue_script 删除已注册的脚本。
    • 您所需要做的就是将句柄传递给它。
      
      

加载脚本

加载脚本的最简单方法是将 wp_enqueue_script 放置在页面上您想要的任何位置。

ChatX翻译
ChatX翻译

最实用、可靠的社交类实时翻译工具。 支持全球主流的20+款社交软件的聊天应用,全球200+语言随意切换。 让您彻底告别复制粘贴的翻译模式,与世界各地高效连接!

下载


足够简单,只是不太优雅。更好的方法是使用 function.php 文件来加载脚本。为此,您需要创建一个自定义函数。然后使用 add_action 来初始化您的函数。


  • 第 2 行创建一个名为 load_my_scripts 的函数
  • 第 3 行注册脚本 myscript
  • 第 4 行将脚本 myscript 排入队列
  • 第 6 行初始化函数 load_my_scripts

我们刚刚加载的脚本需要当前版本的 jQuery 才能运行,因此让我们注销 WordPress 附带的默认版本,并将新版本添加到我们的函数中。


  • 第 2 行取消注册 WordPress 附带的默认 jQuery
  • 第 3 行注册另一个版本的 jQuery
  • 第 4 行将脚本 myscript 排入队列

好的,WordPress 编码的良好实践表明我们需要在运行函数之前检查它是否存在。这样就完成了。


这会检查您的函数是否已存在。如果不存在,它将运行您的函数。

让我们将其添加到我们的 load_my_scripts 函数


现在,如果您转到管理页面,您不希望加载脚本。它可能会导致冲突并破坏管理页面。一般的经验法则是您不希望自定义脚本加载到管理页面中。插件脚本则是另一回事。我稍后会再讨论这个问题。

我们将使用 !is_admin() 检查加载的页面是否不是管理页面。如果不是,我们的脚本将加载。


现在函数看起来像这样。


给你。一个很好的模板,供您使用来将脚本排入队列


为您的插件使用排队脚本

好的,既然你已经记下来了。让我们添加一个仅在插件的管理页面上加载的脚本。

其实很简单。只需在插件文件中编写脚本函数,就像我们在上一节中所做的那样。只是现在不要在 add_action 中使用“init”,而是使用“admin_init”。


就是这样,现在您的脚本只会在您进入插件的管理页面时加载。


结论

我希望这将帮助您更好地理解 WordPress 中的入队脚本,因此现在您可以走出去并加载一些您自己的脚本!

如果有任何不明白或想继续阅读的内容。我建议访问 WordPress Codex。这里还列出了一些其他相关的法典链接:

  • 函数参考/wp 入队脚本
  • 函数参考/wp注册脚本
  • 函数参考/wp注销脚本
  • 函数参考/wp出队脚本
WPS零基础入门到精通全套教程!
WPS零基础入门到精通全套教程!

全网最新最细最实用WPS零基础入门到精通全套教程!带你真正掌握WPS办公! 内含Excel基础操作、函数设计、数据透视表等

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
php文件怎么打开
php文件怎么打开

打开php文件步骤:1、选择文本编辑器;2、在选择的文本编辑器中,创建一个新的文件,并将其保存为.php文件;3、在创建的PHP文件中,编写PHP代码;4、要在本地计算机上运行PHP文件,需要设置一个服务器环境;5、安装服务器环境后,需要将PHP文件放入服务器目录中;6、一旦将PHP文件放入服务器目录中,就可以通过浏览器来运行它。

1978

2023.09.01

php怎么取出数组的前几个元素
php怎么取出数组的前几个元素

取出php数组的前几个元素的方法有使用array_slice()函数、使用array_splice()函数、使用循环遍历、使用array_slice()函数和array_values()函数等。本专题为大家提供php数组相关的文章、下载、课程内容,供大家免费下载体验。

1298

2023.10.11

php反序列化失败怎么办
php反序列化失败怎么办

php反序列化失败的解决办法检查序列化数据。检查类定义、检查错误日志、更新PHP版本和应用安全措施等。本专题为大家提供php反序列化相关的文章、下载、课程内容,供大家免费下载体验。

1205

2023.10.11

php怎么连接mssql数据库
php怎么连接mssql数据库

连接方法:1、通过mssql_系列函数;2、通过sqlsrv_系列函数;3、通过odbc方式连接;4、通过PDO方式;5、通过COM方式连接。想了解php怎么连接mssql数据库的详细内容,可以访问下面的文章。

948

2023.10.23

php连接mssql数据库的方法
php连接mssql数据库的方法

php连接mssql数据库的方法有使用PHP的MSSQL扩展、使用PDO等。想了解更多php连接mssql数据库相关内容,可以阅读本专题下面的文章。

1400

2023.10.23

html怎么上传
html怎么上传

html通过使用HTML表单、JavaScript和PHP上传。更多关于html的问题详细请看本专题下面的文章。php中文网欢迎大家前来学习。

1229

2023.11.03

PHP出现乱码怎么解决
PHP出现乱码怎么解决

PHP出现乱码可以通过修改PHP文件头部的字符编码设置、检查PHP文件的编码格式、检查数据库连接设置和检查HTML页面的字符编码设置来解决。更多关于php乱码的问题详情请看本专题下面的文章。php中文网欢迎大家前来学习。

1439

2023.11.09

php文件怎么在手机上打开
php文件怎么在手机上打开

php文件在手机上打开需要在手机上搭建一个能够运行php的服务器环境,并将php文件上传到服务器上。再在手机上的浏览器中输入服务器的IP地址或域名,加上php文件的路径,即可打开php文件并查看其内容。更多关于php相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

1303

2023.11.13

php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

7

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号