如何在 Wordpress 插件中加载 Javascript

Question

Can someone show me how to include this javascript file into my wordpress plugin.有人可以告诉我如何将这个 javascript 文件包含到我的 wordpress 插件中。 I have tried all the wp_enqeue_script() methods but nothing happens.我已经尝试了所有 wp_enqeue_script() 方法，但没有任何反应。

ok here is my example plugin code with comments explaining what I would like.好的，这是我的示例插件代码，带有解释我想要什么的注释。

<?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.
*/
?>

this is the popup.js这是 popup.js

<script type="text/javascript">

function popup(){


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

}
</script>
<body onload="popup()">
</body>

So does anybody know how to call this script to work correctly in wordpress plugin?那么有人知道如何调用这个脚本在wordpress插件中正常工作吗？

Answer 1

You need to specify when the load should happen, try this.您需要指定加载的时间，试试这个。

<?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__ ));
}

Also, there are errors in your JS, but I have seen the correct version in some answers, hope this helps另外，您的 JS 中存在错误，但我在某些答案中看到了正确的版本，希望对您有所帮助

Update : There is a hook called wp_enqueue_scripts, as mentioned by @brasofilo which should be used in lieu of init for loading scripts.更新：有一个名为 wp_enqueue_scripts 的钩子，正如@brasofolo 所提到的，它应该用来代替 init 来加载脚本。

Answer 2

Learning to work within WP structure can be frustrating.学习在 WP 结构中工作可能会令人沮丧。

And, learning to bring in javascript can be even more frustrating.而且，学习引入 javascript 可能更令人沮丧。

So, everyone here has contributed something valuable, however you need to bring it all together.所以，这里的每个人都贡献了一些有价值的东西，但是你需要把它们整合在一起。 So:所以：

First:第一的：

Remove your include line.删除包含行。 You do not need it.你不需要它。

Second:第二：

Be sure that the $src variable in your code is in fact the correct path.确保代码中的 $src 变量实际上是正确的路径。 I would add an:我会添加一个：

    echo $src;

To TEST if the location is correct.测试位置是否正确。

Third:第三：

Aghoshx is correct - you MUST have the hook reference: Aghoshx 是正确的 - 你必须有钩子参考：

    add_action('init','popup');

(Since you named the function popup, that's what I put in - HOWEVER, to prevent function name colissions with other WP functions and plugins, I recomment that you change it to something more unique, like aghoshx proposed) （由于您命名了函数弹出窗口，这就是我输入的内容-但是，为了防止函数名称与其他 WP 函数和插件发生冲突，我建议您将其更改为更独特的内容，例如建议的 aghoshx）

Fourth:第四：

Check that your script is LOADING.检查您的脚本是否正在加载。 After you do steps 1-3 above, then go refresh the WP page and do a "view source".完成上述步骤 1-3 后，请刷新 WP 页面并执行“查看源代码”。 Look for your script file.查找您的脚本文件。 If you're in Firefox, you can actually CLICK on the url and it will load it - if you are in IE, then copy-paste the url into the url bar and see if in fact your file is THERE (if so, it's loading. If NOT, then it's NOT loading the file properly, and you need to fix the path you are setting into th $src variable).如果您在 Firefox 中，您实际上可以单击 url 并加载它 - 如果您在 IE 中，则将 url 复制粘贴到 url 栏中，看看您的文件是否在那里（如果是，则是正在加载。如果不是，那么它没有正确加载文件，您需要修复您设置到 $src 变量中的路径）。

Fifth:第五：

Once you get the above nailed, cillosis is right - you need to remove everything BUT the javascript function (you even remove the tags) from the javascript file.一旦你解决了上述问题，cillosis 是正确的 - 你需要从 javascript 文件中删除除 javascript 函数之外的所有内容（你甚至删除标签）。

Finally:最后：

look at Martti Laines answer - you need to bind the event by using his suggested window.addEventListener, OR ELSE modify the tag in your php template to contain the onload="popup" (like you had in the script file).看看 Martti Laines 的回答——你需要使用他建议的 window.addEventListener 来绑定事件，或者修改你的 php 模板中的标签以包含 onload="popup" （就像你在脚本文件中那样）。

One final bit of suggestion:最后一点建议：

jQuery makes many things MUCH easier. jQuery 使许多事情变得容易得多。 It's very easy to bring jQuery into your WP plugin.将 jQuery 引入您的 WP 插件非常容易。 Just add this in your php popup function:只需将其添加到您的 php 弹出函数中：

    wp_enqueue_script('jquery');

Good luck!祝你好运！

Answer 3

popup.js should only containt JavaScript-code, no HTML. popup.js应该只包含 JavaScript 代码，没有 HTML。 Try this (in popup.js )试试这个（在popup.js ）

function popup(){
   alert('hello there this is a test popup');
}
window.addEventListener('load',function(event){popup();},false);

Or simply this:或者干脆这个：

window.addEventListener('load',function(event){
   alert('hello there this is a test popup');
},false);

Answer 4

You are including HTML in your .js file and you never added a semicolon to the end of the alert().您在 .js 文件中包含 HTML，并且从未在 alert() 末尾添加分号。 Maybe try just having this in your popup.js:也许尝试在您的 popup.js 中使用它：

function popup(){

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

}

And then in your HTML add the onload="popup()" to the body tag.然后在您的 HTML 中将onload="popup()"到 body 标记中。

如何在 Wordpress 插件中加载 Javascript

问题描述

4 个解决方案

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

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

First:第一的：

Second:第二：

Third:第三：

Fourth:第四：

Fifth:第五：

Finally:最后：

解决方案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

First:第一的：

Second:第二：

Third:第三：

Fourth:第四：

Fifth:第五：

Finally:最后：

解决方案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