如何在 Wordpress 插件中加载 Javascript答案

【问题标题】：how to load Javascript in Wordpress Plugin如何在 Wordpress 插件中加载 Javascript
【发布时间】：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 插件中正常工作吗？

【问题讨论】：

标签： php javascript 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 标签。

【讨论】：