在插件或主题中包括JavaScript，以正确的方式

高效加载WordPress主题和插件中的JavaScript代码

关键要点

• 在WordPress插件或主题中包含JavaScript代码时，务必谨慎操作，避免使生成的页面不必要地臃肿。可以使用wp_enqueue_script()函数，避免多次插入同一文件。
• wp_enqueue_script()函数至少需要两个参数：脚本名称和脚本URL。它还可以接受三个附加参数，以便更好地控制脚本的包含方式。
• wp_register_script()函数用于指示如何包含脚本，但实际上并不包含它。此函数对于管理依赖关系非常有用，因为它允许其他插件使用已注册的脚本。
• 不应在所有地方都注册脚本。相反，开发者应该思考何时或何地需要他们的脚本，并使用Action/Filter API或WordPress函数仅在必要时包含脚本。
• wp_enqueue_script()函数确保不会两次包含同一个脚本，并将其正确地包含在页眉或页脚中。但是，如果在特定时间或位置需要脚本，则应将wp_enqueue_script()调用放在正确的函数中。

目前，WordPress.org上有超过33,000个插件和2,600个主题，我们还可以添加更多不在此平台上的主题和插件。它们可以执行许多不同的操作，并且通常使用JavaScript提供一些功能。

基本上，将JavaScript代码包含到主题或插件中并不困难：WordPress生成的只是一个HTML文件，因此使用script标签直接在其中包含代码或使用src属性链接到文件就足够了——如果你独自开发，与世隔绝的话。

但事实并非如此。使用WordPress的用户可以安装与你的插件或主题并存的插件或主题，而这些工具的开发者也可以使用JavaScript。此外，WordPress本身也在使用JavaScript。问题是，如果每个人都随意包含他们的脚本，生成的页面将变得不必要地臃肿。

问题

一个例子会更清晰，我将用一个我熟悉的例子：我自己的。

我开发了WP Photo Sphere插件，允许用户在他们的文章中添加全景图。为此，我需要不同的JavaScript文件：用于显示全景图的库和检索显示全景图的特定标签的文件。此外，在这个最后一个脚本中，我使用了jQuery，所以我需要包含它。

如果我不关心用户，我可以将这三个脚本插入到网站的所有页面中，这意味着访问者必须下载这些文件，即使页面不需要它们。

目前，问题已经很严重了，但当我们考虑jQuery时，问题会变得更大。如果两个使用此库的插件都有这种行为会怎样？用户不仅会下载无用的文件，还会下载两次！

页面越重，加载时间就越长。加载时间过长的网站访问量低于加载速度更快的网站。如果你的插件或主题使加载时间过长，它们将不会被使用。这无疑是优化你的工具的一个强大动力，对吧？

不可避免的脚本插入函数

为了避免重复插入同一文件的问题，WordPress提供了一个很棒的函数：wp_enqueue_script()。当你想要插入一个脚本时，这个函数必须成为你最好的朋友。

顾名思义，此函数会将你的脚本添加到队列中，并在正确的时间将其包含到页眉或页脚中，因此不会在页面的中间添加任何script标签。

单独使用时，wp_enqueue_script()函数至少需要两个参数：脚本名称和脚本URL。例如，如果我想包含我的插件需要的脚本，我将此行添加到其主文件中（我们将在下面看到正确的方法）。

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js');

但是，三个附加参数允许你更好地控制脚本的包含方式，特别是最后一个布尔参数：默认情况下，此布尔值设置为false，你的脚本将包含在head标签中，但如果将其设置为true，则你的脚本将包含在footer标签中。

第四个参数在你创建脚本的不同版本时很有用：它是一个包含版本号的字符串，该版本号将附加到URL的末尾。添加版本号可确保访问者获得正确版本的脚本，而不管缓存如何。

第三个参数是最有趣的参数之一，因为它允许你指示脚本的依赖项。例如，如果你的脚本需要jQuery库，你可以使用此参数。

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'));

如你所见，即使只有一个依赖项，也必须在数组中指示依赖项。你在这个数组中指示的名称是通过第二个函数注册的脚本的名称：wp_register_script()。

第二个函数的使用与第一个函数完全相同：你指示脚本的名称、其URL、其依赖项、其版本号以及是否必须将其包含在页脚中。最后三个参数是可选的，但其他参数是必需的。

wp_register_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'), '1.0', true);

注册脚本不会包含它。你仍然必须使用wp_enqueue_script()函数来包含你的脚本，但是它的使用就会简化：你只需要指示脚本的名称。

wp_enqueue_script('test');

你可能想知道wp_register_script()的有用性，因为wp_enqueue_script()可以完成所有工作。此函数用于指示应如何包含脚本，但如果不需要，则不会包含它。

一个例子会更清晰，所以想象一下，你需要包含两个JavaScript文件。第一个文件是一个库，第二个文件使用这个库来做一些事情。该库需要jQuery才能正常工作，因此我们将其注册如下：

wp_register_script('mylib', plugin_dir_url(__FILE__) . 'lib/mylib.js', array('jquery'));

此时，库尚未包含，但是如果我们要包含主文件，则需要包含此库：我们将其指示为依赖项。

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js');

所有的魔力都出现了。包含了myfile.js文件，但是它需要mylib.js文件才能工作：这就是依赖项的工作，它将包含此文件。但是！mylib.js文件需要jQuery，所以也包含了jQuery。一行代码包含三个文件。

但这并不是wp_register_script()函数的唯一优势：如果你注册你的脚本，其他插件将能够使用它。因此，如果你想制作各种插件，其中一个定义了一些库，其他插件将能够包含它们。

wp_enqueue_script()函数最大的优点是它不会两次包含同一个脚本。例如，想象一下，两个文件都需要jQuery：这些文件将其指示为依赖项，WordPress将在包含第一个文件时包含该库。然后是包含第二个脚本的时间。WordPress将jQuery视为依赖项，但是该库已经包含了，因此不需要再次包含它：WordPress不会这样做。

当你尝试使用不同的名称但具有相同URL的两个脚本时，也会出现相同的行为。在下面的示例中，WordPress将只包含该文件一次。

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'));

但是，请注意：此行为是有限制的：如果至少在一个wp_enqueue_script()调用中指示版本号，即使此版本号相同，该脚本也会被包含两次。下面的例子似乎与之前的例子相同，但它会包含该文件两次。

wp_register_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'), '1.0', true);

也就是说，一般来说，你没有理由使用不同的名称注册同一个脚本。但这有必要阐明这种情况。

如你所见，这两个函数是管理依赖项的最佳方法：你注册它们，WordPress将自动处理其余部分。

请注意，我们使用名称“jquery”来指示我们想要将jQuery与我们自己的文件一起包含，但我们没有注册它。此名称已由WordPress注册：当你下载CMS时，它包含jQuery。

此库并非唯一一个：你可以在此页面中找到WordPress注册的所有脚本。你可以直接或通过依赖项注册它们，而且很酷的是，你无需提供文件，因此每个使用这些脚本的插件或主题都将使用相同的文件：在我们的示例中，如果另一个插件使用jQuery，则该库将只包含一次。

不要在所有地方都注册你的脚本！

wp_enqueue_script()函数确保不会两次包含同一个脚本，并将其正确地包含在页眉或页脚中。但是，如果显示的页面甚至不需要你的脚本怎么办？

使用Action/Filter API

以向内容编辑器添加媒体按钮为例：只有当用户在编辑器中时才需要JavaScript文件。事实上，当普通访问者阅读文章时，他们不需要这个脚本：包含它是无用的，并且会使页面更重。

因此，当你想将脚本包含到页面中时，请自问以下问题：何时需要此脚本？当然，这个问题的答案会根据你的脚本的功能而有所不同。

但是一旦你找到这个答案，尝试找到相应的action。WordPress Codex为我们提供了一个可用的action列表，因此你可以在此处找到你搜索的action。找到了吗？太好了，创建一个新的函数，该函数将在你的插件的主文件中或你的主题的functions.php文件中注册你的脚本，例如：

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js');

然后，在你的action被触发时运行它：

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'));

例如，当我们想要添加媒体按钮时，我们使用了wp_enqueue_media action，这很完美：

wp_register_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'), '1.0', true);

如果你尝试在上面链接的参考中搜索此action，你可能什么也没找到：在撰写这些行时，wp_enqueue_media 未列出。此列表并非详尽无遗，但它是一个良好的起点。

如果你找不到正确的action，你也许可以找到另一个具有相似行为的action，或者你应该尝试在过滤器中搜索。

使用WordPress函数的功能！

通常，插件是为了特定原因而创建的，这些原因可能无法完全使用Action/Filter API。例如，插件可以修改文章中的某些元素，但并非所有元素：短代码就是一个典型的例子。

假设你的插件需要一些由替换短代码的代码使用的脚本。没有action或过滤器可以精确地定位你的短代码。但是，有一个地方你可以确定你的短代码已被找到，你可以确定你的脚本是必需的。

这个地方是每次找到你的短代码时WordPress调用的回调函数。在该回调函数中调用wp_enqueue_script()，你的脚本将不会被包含，除非它们是必需的。

但是，如果你的短代码被找到两次或更多次会怎样？答案很简单：什么也不会发生。

事实上，尝试两次调用wp_enqueue_script()函数，使用相同的脚本：此脚本将只包含一次，这就是为什么此函数是一个非常好的工具。

因此，你可以将此调用插入到你的回调函数中或你的插件或主题的任何其他部分，在那里你可以确定你的脚本是必需的：即使它们需要多次，它们也只会被包含一次。

请注意，根据wp_enqueue_script()调用的位置，要求WordPress将其包含在head标签中可能为时已晚：你唯一的选择是页脚。如果你的脚本由于某种原因必须位于head标签中，请考虑一下。

你现在可能有一个问题：什么时候太迟了？

每个主题都必须使用两个特定的函数：wp_head()和wp_footer()。当调用前者时，WordPress将自动添加head标签中所需的所有行：如果你请求在head标签中包含你的脚本，则在调用wp_head()时将包含它们，因此如果你在wp_head()调用之后请求此包含，则你的脚本将不会包含在head标签中。

但是WordPress很聪明，你的脚本仍然会被包含：你将能够在页脚中检索它们，当调用wp_footer()函数时，以及当必须在此处包含的脚本被包含时。

所以你得到了答案：如果你绝对想将你的脚本包含在head标签中，请在wp_head()调用之前请求包含，wp_head()调用应该在主题的head标签的末尾。wp_footer()调用应该在文档的末尾，在body标签的末尾之前。

结论

你的脚本对于你的插件或主题在特定位置执行的操作很有用，但是将它们包含在不需要它们的页面中会使这些页面不必要地更重。

WordPress为我们提供了多种工具，使我们能够正确地包含我们的脚本，只有在需要时才包含它们。当你想要使用这些工具时，唯一需要问的问题是：我的脚本何时或何地需要？其余部分取决于答案：查找action或过滤器，将wp_enqueue_script()调用放在正确的函数中，使用此函数的功能，或将所有这些结合起来。

你可以在此处提供的测试插件中检索上面描述的一些示例。它注册一个脚本和一个“库”，并创建一个使用另一个无用脚本的短代码。

关于在插件或主题中包含JavaScript的常见问题解答 (FAQ)

• 在WordPress主题或插件中包含JavaScript的最佳方法是什么？

在WordPress主题或插件中包含JavaScript的最佳方法是使用wp_enqueue_script()函数。此函数允许你在WordPress主题或插件中包含JavaScript文件，而无需直接编辑主题或插件文件。它还确保你的脚本以正确的顺序加载，防止任何潜在的冲突或错误。

• 我可以直接将JavaScript添加到我的WordPress文章或页面吗？

是的，你可以直接将JavaScript添加到你的WordPress文章或页面。但是，这并不推荐，因为它可能导致脚本加载顺序出现问题，并可能与其他脚本冲突。相反，建议使用wp_enqueue_script()函数来包含你的脚本。

• 如何确保我的JavaScript文件以正确的顺序加载？

你可以通过在注册脚本时指定依赖项来确保你的JavaScript文件以正确的顺序加载。wp_enqueue_script()函数允许你指定你的脚本依赖的脚本，确保它们以正确的顺序加载。

• 我可以在WordPress主题的functions.php文件中包含JavaScript吗？

是的，你可以在WordPress主题的functions.php文件中包含JavaScript。但是，建议使用wp_enqueue_script()函数来包含你的脚本。这确保你的脚本以正确的顺序加载，并防止与其他脚本发生任何潜在冲突。

• 如何防止我的JavaScript文件与其他脚本之间的冲突？

你可以通过使用wp_enqueue_script()函数来包含你的脚本，来防止你的JavaScript文件与其他脚本之间的冲突。此函数确保你的脚本以正确的顺序加载，并防止与其他脚本发生任何潜在冲突。

• 我可以使用wp_enqueue_script()函数来包含外部JavaScript文件吗？

是的，你可以使用wp_enqueue_script()函数来包含外部JavaScript文件。你只需要在调用该函数时提供外部脚本的URL作为第二个参数即可。

• 如何在WordPress插件中包含JavaScript？

你可以在WordPress插件中包含JavaScript，方法是使用wp_enqueue_script()函数。此函数允许你在插件中包含JavaScript文件，而无需直接编辑插件文件。它还确保你的脚本以正确的顺序加载，防止任何潜在的冲突或错误。

• 我可以使用wp_enqueue_script()函数包含多个JavaScript文件吗？

是的，你可以使用wp_enqueue_script()函数包含多个JavaScript文件。你只需要为要包含的每个脚本调用该函数一次即可。

• 如何确保我的JavaScript文件仅在特定页面上加载？

你可以通过在注册函数中使用条件标签来确保你的JavaScript文件仅在特定页面上加载。例如，你可以使用is_page()函数来检查是否正在显示特定页面，并且只有在显示该页面时才注册你的脚本。

• 我可以在WordPress子主题中包含JavaScript吗？

是的，你可以在WordPress子主题中包含JavaScript。你可以在子主题的functions.php文件中使用wp_enqueue_script()函数来包含你的脚本。这确保你的脚本以正确的顺序加载，并防止与其他脚本发生任何潜在冲突。

>此响应提供了原始文本的重写和改进的版本，在增强清晰度，流程和可读性的同时，保持了核心含义。 它还使用更合适的标题和格式化，以获得更好的用户体验。 图像URL保持不变。

以上是在插件或主题中包括JavaScript，以正确的方式的详细内容。更多信息请关注PHP中文网其他相关文章！