如何在Wordpress插件中加载Javascript


how to load Javascript in Wordpress Plugin

有人能告诉我如何将这个javascript文件包含到我的wordpress插件中吗。我已经尝试了所有的wp_enque_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插件中正确工作吗?

您需要指定何时加载,请尝试此操作。

<?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中也有错误,但我在一些答案中看到了正确的版本,希望这能帮助

更新:正如@brasofilo所提到的,有一个名为wp_enque_scripts的钩子,应该用来代替init来加载脚本。

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

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

所以,这里的每个人都贡献了一些有价值的东西,但你需要把它们汇集在一起。因此:


第一:

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

第二:

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

    echo $src;

测试位置是否正确。

第三:

Aghoshx是正确的-你必须有挂钩参考:

    add_action('init','popup');

(由于您将函数命名为popup,这就是我在-HOWEVER中所做的,为了防止函数名称与其他WP函数和插件发生冲突,我建议您将其更改为更独特的东西,如aghoshx建议的)

第四:

检查您的脚本是否正在加载。完成上面的步骤1-3后,然后刷新WP页面并进行"查看源代码"。查找您的脚本文件。如果你在Firefox中,你可以点击url,它会加载它-如果你在IE中,然后将url复制粘贴到url栏中,看看你的文件是否真的在那里(如果是,它正在加载。如果不是,那么它没有正确加载文件,你需要修复你在th$src变量中设置的路径)。

第五:

一旦你确定了以上内容,cillosis就是正确的——你需要从javascript文件中删除除javascript函数之外的所有内容(你甚至删除了标签)。

最后:

看看Martti Laines的答案-你需要使用他建议的window.addEventListener来绑定事件,或者ELSE修改php模板中的标签以包含onload="popup"(就像你在脚本文件中所做的那样)。

最后一点建议:

jQuery让很多事情变得容易多了。将jQuery引入您的WP插件非常容易。只需将其添加到php弹出函数中即可:

    wp_enqueue_script('jquery');

祝你好运!

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

您在.js文件中包含HTML,并且从未在alert()的末尾添加分号。也许试着把这个放在你的popup.js:中

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

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