如何在Wordpress插件中加载Javascript

php javascript wordpress

2022-08-30 15:59:50

有人可以告诉我如何将这个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.
*/
?>

这是弹出窗口.js

<script type="text/javascript">

function popup(){


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

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

那么有没有人知道如何调用这个脚本在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来加载脚本。

答案 2

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

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

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

第一：

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

第二：

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

    echo $src;

测试位置是否正确。

第三：

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

    add_action('init','popup');

（由于您命名了函数弹出窗口，这就是我放入的内容 - 但是，为了防止函数名称与其他WP函数和插件一起使用，我再次评论您将其更改为更独特的东西，例如aghoshx提议的）

第四：

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

第五：

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

最后：

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

最后一点建议：

jQuery使许多事情变得容易得多。将jQuery带入WP插件非常容易。只需在php弹出函数中添加此内容：

    wp_enqueue_script('jquery');

祝你好运！