正文 

当前位置： 首页 > 问答 >

如何在 Wordpress 插件中加载 Javascript

     2023-02-24     95

关键词：

【中文标题】如何在 Wordpress 插件中加载 Javascript【英文标题】：how to load Javascript in Wordpress Plugin 【发布时间】：2012-02-26 20:27:01 【问题描述】：

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

好的，这是我的示例插件代码，其中 cmets 解释了我想要什么。

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

【问题讨论】：

【参考方案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 来加载脚本。

【讨论】：

你应该把你的js文件命名为ava_test_.js，并把它放在你插件目录下一个叫js的文件夹里，你这样做了吗？ 正确的是add_action('wp_enqueue_scripts','ava_test_init'); ava-test-js 指的是什么？ 那是脚本的“句柄”，你可以给任何你想要的名字，它不应该和WordPress核心注册的脚本句柄冲突。更多细节可以在这里找到 - developer.wordpress.org/reference/functions/wp_register_script【参考方案2】：

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

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

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

第一：

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

第二：

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

    echo $src;

测试位置是否正确。

第三：

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

    add_action('init','popup');

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

第四：

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

第五：

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

最后：

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

最后一点建议：

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

    wp_enqueue_script('jquery');

祝你好运！

【讨论】：

谢谢 Cale_b。总是乐于助人，为我们服务...谢谢。会试一试，然后让你知道我想出什么。 :)【参考方案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);

【讨论】：

感谢您的帮助 Martti，但同样的问题仍然存在。当我使用 wp_enqeue_script 调用脚本并且当我使用 include() 时它没有任何反应，但插件被激活并出现错误。一定有办法..:( 检查 JavaScript 错误控制台。有什么错误吗？还要从生成的源代码中检查是否实际创建了 script-tag 并指向确切的 popup.js【参考方案4】：

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

function popup()

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

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

【讨论】：

jQuery插件未在WordPress中加载

】jQuery插件未在WordPress中加载【英文标题】：jQuerypluginnotloadinginWordPress【发布时间】：2013-08-2113:08:58【问题描述】：我已经在functions.php中成功地将jQuery链接到WordPress。但是，center.js似乎没有加载。我这么说是因为控制台给了我... 查看详情

如何在 Wordpress 中加载 Ajax

】如何在Wordpress中加载Ajax【英文标题】：HowtoLoadAjaxinWordpress【发布时间】：2013-07-1615:38:41【问题描述】：我熟悉用jQuery以普通方式使用ajax。我已经玩了一段时间了，但不明白Wordpress需要什么才能让它工作......我这里的内容来自... 查看详情

如何在functions.php（wordpress）中加载引导脚本和样式？

】如何在functions.php（wordpress）中加载引导脚本和样式？【英文标题】：Howtoloadbootstrapscriptandstyleinfunctions.php(wordpress)?【发布时间】：2014-12-2210:04:56【问题描述】：我将引导主题转换为wordpress。现在，我在加载引导脚本和样式时遇... 查看详情

php如何在wordpress中加载fontawesome5(代码片段)

查看详情

我如何在我的 wordpress 主题头标签中加载 CSS 文件 [重复]

】我如何在我的wordpress主题头标签中加载CSS文件[重复]【英文标题】：HowicanloadaCSSfileinmywordpressthemeheadtag[duplicate]【发布时间】：2016-10-2623:47:08【问题描述】：我是WordPress新手。我有一个链接，我想在我的WordPress主题的head标签中... 查看详情

在wordpress中加载jquery

<?phpwp_enqueue_script("jquery");?> 查看详情

如何在 Cordova 插件中加载数据文件？

】如何在Cordova插件中加载数据文件？【英文标题】：HowtoloaddatafileinCordovaplugin?【发布时间】：2016-09-1503:21:28【问题描述】：我正在开发一个带有一些数据文件的Cordova插件。我需要这些文件来被复制到移动设备上，然后在运行时... 查看详情

phpjquery在wordpress中加载最新版本(代码片段)

查看详情

php在wordpress中加载css(代码片段)

查看详情

php在wordpress中加载javascript库(代码片段)

查看详情

在 WordPress 中加载模板而不回显它

】在WordPress中加载模板而不回显它【英文标题】：LoadtemplateinWordPresswithoutechoit【发布时间】：2013-09-2805:47:09【问题描述】：我正在尝试编写一个自定义函数，以在单独的div中加载一组产品，以便在选项卡中使用。每个选项卡都有... 查看详情

php在php/wordpress中加载主题元素(代码片段)

查看详情

在 WordPress 中加载更多帖子 Ajax 按钮

】在WordPress中加载更多帖子Ajax按钮【英文标题】：LoadMorePostsAjaxButtoninWordPress【发布时间】：2015-10-1317:59:39【问题描述】：我浏览了旧问题并尝试了许多似乎可以做到这一点的不同方法。我最接近工作的是这里：Howtoimplementpaginati... 查看详情

在wordpress生成的页面中加载javascript库

LoadjQueryintoWordPressgeneratedpages,thewp_enqueue_scriptfunctioncanbeusedinpluginsaswell.ORAddandloadanewscriptthatdependsonjQuery(thiswillalsocauseittoloadjQueryintothepageaswell).<?phpwp_enqueu 查看详情

php在wordpress生成的页面中加载javascript库(代码片段)

查看详情

WordPress/Avada 网站未在 XAMPP 中加载

】WordPress/Avada网站未在XAMPP中加载【英文标题】：WordPress/AvadawebsitenotLoadinginXAMPP【发布时间】：2017-05-1016:45:24【问题描述】：所以我一直在尝试进入一个我应该在工作的WordPress网站的管理仪表板，但由于某种原因，我的XAMPP/phpMyAd... 查看详情

jquery在wordpress中加载最新版本

//frombit.ly/kleary-latestjqy /*** UselatestjQueryrelease*/if(!is_admin()){ wp_deregister_script('jquery'); wp_register_script('jquery',("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"),false,''); wp_enqueue_script('jquery... 查看详情

Wordpress 站点在 LAN 中加载，但不是从 WAN 加载，但父方向同时加载

】Wordpress站点在LAN中加载，但不是从WAN加载，但父方向同时加载【英文标题】：WordpresssiteloadsinLANbutnotfromWAN,yetparentdirectionloadswithboth【发布时间】：2018-06-1320:05:53【问题描述】：--------------已解决--------------请参阅@fubar在cmets部分... 查看详情