如何在 Wordpress 插件中加载 Javascript

Question

有人可以告诉我如何将这个 javascript 文件包含到我的 wordpress 插件中。 我已经尝试了所有 wp_enqeue_script() 方法，但没有任何反应。

好的，这是我的示例插件代码，带有解释我想要什么的注释。

<?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插件中正常工作吗？

Answer 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 的钩子，正如@brasofolo 所提到的，它应该用来代替 init 来加载脚本。

Answer 2

学习在 WP 结构中工作可能会令人沮丧。

而且，学习引入 javascript 可能更令人沮丧。

所以，这里的每个人都贡献了一些有价值的东西，但是你需要把它们整合在一起。 所以：

第一的：

删除包含行。 你不需要它。

第二：

确保代码中的 $src 变量实际上是正确的路径。 我会添加一个：

    echo $src;

测试位置是否正确。

第三：

Aghoshx 是正确的 - 你必须有钩子参考：

    add_action('init','popup');

（由于您命名了函数弹出窗口，这就是我输入的内容-但是，为了防止函数名称与其他 WP 函数和插件发生冲突，我建议您将其更改为更独特的内容，例如建议的 aghoshx）

第四：

检查您的脚本是否正在加载。 完成上述步骤 1-3 后，请刷新 WP 页面并执行“查看源代码”。 查找您的脚本文件。 如果您在 Firefox 中，您实际上可以单击 url 并加载它 - 如果您在 IE 中，则将 url 复制粘贴到 url 栏中，看看您的文件是否在那里（如果是，则是正在加载。如果不是，那么它没有正确加载文件，您需要修复您设置到 $src 变量中的路径）。

第五：

一旦你解决了上述问题，cillosis 是正确的 - 你需要从 javascript 文件中删除除 javascript 函数之外的所有内容（你甚至删除标签）。

最后：

看看 Martti Laines 的回答——你需要使用他建议的 window.addEventListener 来绑定事件，或者修改你的 php 模板中的标签以包含 onload="popup" （就像你在脚本文件中那样）。

最后一点建议：

jQuery 使许多事情变得容易得多。 将 jQuery 引入您的 WP 插件非常容易。 只需将其添加到您的 php 弹出函数中：

    wp_enqueue_script('jquery');

祝你好运！

Answer 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);

Answer 4

您在 .js 文件中包含 HTML，并且从未在 alert() 末尾添加分号。 也许尝试在您的 popup.js 中使用它：

function popup(){

   alert('hello there this is a test popup');

}

然后在您的 HTML 中将onload="popup()"到 body 标记中。

如何在 Wordpress 插件中加载 Javascript

问题描述

4 个解决方案

解决方案1
52 已采纳 2012-02-04 17:50:13

解决方案2
2 2012-02-05 00:39:14

第一的：

第二：

第三：

第四：

第五：

最后：

解决方案3
0 2012-02-04 16:45:01

解决方案4
-2 2012-02-04 15:31:27

如何在 Wordpress 插件中加载 Javascript

问题描述

4 个解决方案

解决方案1 52 已采纳 2012-02-04 17:50:13

解决方案2 2 2012-02-05 00:39:14

第一的：

第二：

第三：

第四：

第五：

最后：

解决方案3 0 2012-02-04 16:45:01

解决方案4 -2 2012-02-04 15:31:27

解决方案1
52 已采纳 2012-02-04 17:50:13

解决方案2
2 2012-02-05 00:39:14

解决方案3
0 2012-02-04 16:45:01

解决方案4
-2 2012-02-04 15:31:27