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 放置在页面上您想要的任何位置。

火山翻译
火山翻译

火山翻译,字节跳动旗下的机器翻译品牌,支持超过100种语种的免费在线翻译,并支持多种领域翻译

下载


足够简单,只是不太优雅。更好的方法是使用 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

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
jquery插件有哪些
jquery插件有哪些

jquery插件有jQuery UI、jQuery Validate、jQuery DataTables、jQuery Slick、jQuery LazyLoad、jQuery Countdown、jQuery Lightbox、jQuery FullCalendar、jQuery Chosen和jQuery EasyUI等。本专题为大家提供jquery插件相关的文章、下载、课程内容,供大家免费下载体验。

150

2023.09.12

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

311

2023.10.13

jquery删除元素的方法
jquery删除元素的方法

jquery可以通过.remove() 方法、 .detach() 方法、.empty() 方法、.unwrap() 方法、.replaceWith() 方法、.html('') 方法和.hide() 方法来删除元素。更多关于jquery相关的问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

394

2023.11.10

jQuery hover()方法的使用
jQuery hover()方法的使用

hover()是jQuery中一个常用的方法,它用于绑定两个事件处理函数,这两个函数将在鼠标指针进入和离开匹配的元素时执行。想了解更多hover()的相关内容,可以阅读本专题下面的文章。

503

2023.12.04

jquery实现分页方法
jquery实现分页方法

在jQuery中实现分页可以使用插件或者自定义实现。想了解更多jquery分页的相关内容,可以阅读本专题下面的文章。

182

2023.12.06

jquery中隐藏元素是什么
jquery中隐藏元素是什么

jquery中隐藏元素是非常重要的一个概念,在使用jquery隐藏元素之前,需要先了解css样式中关于元素隐藏的属性,比如display、visibility、opacity等属性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

120

2024.02.23

jquery中什么是高亮显示
jquery中什么是高亮显示

jquery中高亮显示是指对页面搜索关键词时进行高亮显示,其实现办法:1、先获取要高亮显示的行,获取搜索的内容,再遍历整行内容,最后添加高亮颜色;2、使用“jquery highlight”高亮插件。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

176

2024.02.23

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

38

2026.01.13

俄罗斯Yandex引擎入口
俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

69

2026.01.28

热门下载

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

精品课程

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

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