如何在 Wordpress 插件中加载 Javascript
Posted
技术标签:
【中文标题】如何在 Wordpress 插件中加载 Javascript【英文标题】：how to load Javascript in Wordpress Plugin 【发布时间】：2012-02-26 20:27:01 【问题描述】：谁能告诉我如何将此 javascript 文件包含到我的 wordpress 插件中。我已经尝试了所有 wp_enqeue_script() 方法，但没有任何反应。
好的，这是我的示例插件代码，其中 cmets 解释了我想要什么。
<?php
/*
Plugin Name: Ava Test
Plugin URI: http://#.com
Description: A plugin that is used for my javascript tests
Author: Ronny Kibet
Author URI: http://ronnykibet.com
version: 1.001
*/
include(popup.js);
/*when I include it this way, it works fine, but gives an error when I activate the plugin
'plugin generated 453 characters ...'
*/
function popup()
$src = plugins_url('popup.js', __FILE__);
wp_register_script( 'popup', $src );
wp_enqueue_script( 'popup' );
/*
when I included it this way, plugin is activated but nothing happens.
*/
?>
这是 popup.js
<script type="text/javascript">
function popup()
alert('hello there this is a test popup')
</script>
<body onload="popup()">
</body>
那么有人知道如何调用此脚本以在 wordpress 插件中正常工作吗？
【问题讨论】：
【参考方案1】：您需要指定加载的时间，试试这个。
<?php
/*
Plugin Name: Ava Test
Plugin URI: https://matsio.com
Description: A plugin that is used for my javascript tests
Author: Ronny Kibet
Author URI: https://matsio.com
version: 1.001
*/
add_action('wp_enqueue_scripts','ava_test_init');
function ava_test_init()
wp_enqueue_script( 'ava-test-js', plugins_url( '/js/ava_test_.js', __FILE__ ));
另外，您的 JS 中存在错误，但我在一些答案中看到了正确的版本，希望对您有所帮助
更新：有一个名为 wp_enqueue_scripts 的钩子，正如 @brasofilo 所提到的，它应该用来代替 init 来加载脚本。
【讨论】：
你应该把你的js文件命名为ava_test_.js，并把它放在你插件目录下一个叫js的文件夹里，你这样做了吗？ 正确的是add_action('wp_enqueue_scripts','ava_test_init');
ava-test-js 指的是什么？
那是脚本的“句柄”，你可以给任何你想要的名字，它不应该和WordPress核心注册的脚本句柄冲突。更多细节可以在这里找到 - developer.wordpress.org/reference/functions/wp_register_script【参考方案2】：
学习在 WP 结构中工作可能会令人沮丧。
而且，学习引入 javascript 可能更令人沮丧。
因此，这里的每个人都贡献了一些有价值的东西，但是您需要将它们整合在一起。所以：
第一：
删除您的包含行。你不需要它。
第二：
确保代码中的 $src 变量实际上是正确的路径。我会添加一个：
echo $src;
测试位置是否正确。
第三：
Aghoshx 是正确的 - 你必须有钩子参考：
add_action('init','popup');
（由于您将函数命名为弹出窗口，这就是我输入的内容 - 但是，为了防止函数名称与其他 WP 函数和插件发生冲突，我建议您将其更改为更独特的名称，例如建议的 aghoshx）
第四：
检查您的脚本是否正在加载。完成上述步骤 1-3 后，请刷新 WP 页面并执行“查看源代码”。查找您的脚本文件。如果你在 Firefox 中，你实际上可以点击 url，它会加载它 - 如果你在 IE 中，然后将 url 复制粘贴到 url 栏中，看看你的文件是否真的存在（如果是，它是加载。如果不是，那么它没有正确加载文件，你需要修复你设置到 $src 变量的路径。
第五：
一旦您确定了上述内容，纤毛病是正确的 - 您需要从 javascript 文件中删除除 javascript 函数之外的所有内容（甚至删除标签）。
最后：
查看 Martti Laines 的答案 - 您需要使用他建议的 window.addEventListener 来绑定事件，或者修改 php 模板中的标签以包含 onload="popup"（就像您在脚本文件中所做的那样）。
最后一点建议：
jQuery 让很多事情变得更容易。将 jQuery 引入您的 WP 插件非常容易。只需将其添加到您的 php 弹出函数中即可：
wp_enqueue_script('jquery');
祝你好运！
【讨论】：
谢谢 Cale_b。总是乐于助人，为我们服务...谢谢。会试一试，然后让你知道我想出什么。 :)【参考方案3】：popup.js 应该只包含 JavaScript 代码，不包含 html。试试这个（popup.js）
function popup()
alert('hello there this is a test popup');
window.addEventListener('load',function(event)popup();,false);
或者简单地说：
window.addEventListener('load',function(event)
alert('hello there this is a test popup');
,false);
【讨论】：
感谢您的帮助 Martti，但同样的问题仍然存在。当我使用 wp_enqeue_script 调用脚本并且当我使用 include() 时它没有任何反应，但插件被激活并出现错误。一定有办法..:( 检查 JavaScript 错误控制台。有什么错误吗？还要从生成的源代码中检查是否实际创建了 script-tag 并指向确切的popup.js【参考方案4】：
您在 .js 文件中包含 HTML，并且您从未在 alert() 的末尾添加分号。也许尝试在你的 popup.js 中加入这个：
function popup()
alert('hello there this is a test popup');
然后在你的 HTML 中添加 onload="popup()" 到 body 标签。
【讨论】：
以上是关于如何在 Wordpress 插件中加载 Javascript的主要内容，如果未能解决你的问题，请参考以下文章
如何在functions.php（wordpress）中加载引导脚本和样式？
php 如何在WordPress中加载Font Awesome 5