如何在WordPress插件中加载Javascript

有人可以告诉我如何将此JavaScript文件包含到我的WordPress插件中。我尝试了所有的wp_enqeue_script（）方法，但没有任何反应。如何在WordPress插件中加载Javascript

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

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

来源

2012-02-04 Ronny Kibet

您需要指定当负载情况发生时，试试这个。

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

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来加载脚本。

来源

2012-02-04 17:50:13 aghoshx

我试过这一个， – 2012-02-04 18:47:50

你应该把你的js文件命名为ava_test_.js，并把它放在你的插件目录下的一个名为js的文件夹中，你是否这样做？ – aghoshx 2012-02-07 14:56:04

正确的是'add_action（'wp_enqueue_scripts'，' ava_test_init'）;' – brasofilo 2014-09-16 19:58:03

您的.js文件中包含HTML，并且您从未在分隔符的末尾添加分号（）。也许尝试只是有这个在您的popup.js：

function popup(){ 

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

}

然后在你的HTML的onload="popup()"添加到body标签。

来源

2012-02-04 15:31:27

我已经做到了。仍是同样的问题。 – 2012-02-04 15:34:21

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

来源

2012-02-04 16:45:01

感谢您对Martti的帮助，但同样的问题仍然存在。当我使用wp_enqeue_script调用脚本时，以及在使用include（）时它没有任何反应，但插件被激活并出现错误。必须有一个方法.. :( – 2012-02-04 17:23:06

检查JavaScript错误控制台。任何错误？还检查从生成的源代码脚本标记实际上是创建并指向确切的'popup.js' – 2012-02-04 17:27:14

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

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

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

第一张：
删除您的包含行。你不需要它。

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

echo $src;

要测试位置是否正确。

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

add_action('init','popup');

（既然你命名的函数弹出，这就是我把 - 但是，为了防止函数名colissions与其他WP功能和插件，我建议你把它改成更独特的东西，比如aghoshx建议）

第四：检查你的脚本是LOADING。在执行上述步骤1-3之后，请刷新WP页面并执行“查看源代码”。寻找你的脚本文件。如果你在Firefox中，你可以实际点击网址，它会加载它 - 如果你在IE浏览器，然后复制粘贴到网址栏，看看你的文件是否在其中（如果是，它是如果不是，那么它不会正确地加载文件，并且你需要修改你设置的路径到$ src变量中）。

第五个：一旦你得到上述钉子，cillosis是正确的 - 你需要删除的一切，但JavaScript函数（你甚至删除标签）从JavaScript文件。

终于：看看Martti Laines的答案 - 你需要使用他的建议window.addEventListener绑定事件，或者ELSE修改你的php模板中的标签以包含onload =“popup”（就像你在脚本文件）。

最后一点建议：

jQuery让许多事情变得更容易。将jQuery带入WP插件非常容易。只需在您的php弹出功能中添加以下内容：

enqueue_script('jquery');

祝您好运！

来源

2012-02-05 00:39:14

感谢Cale_b。总是乐于助人，对我们来说......谢谢你，请给我一个机会，然后让你知道我想出了什么。 – 2012-02-05 04:26:37

如何在WordPress插件中加载Javascript

回答

相关问题