如何在 Wordpress 插件中加載 Javascript

Question

有人可以告訴我如何將這個 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.
*/
?>

這是 popup.js

<script type="text/javascript">

function popup(){


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

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

那么有人知道如何調用這個腳本在wordpress插件中正常工作嗎？

Answer 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 的鈎子，正如@brasofolo 所提到的，它應該用來代替 init 來加載腳本。

Answer 2

學習在 WP 結構中工作可能會令人沮喪。

而且，學習引入 javascript 可能更令人沮喪。

所以，這里的每個人都貢獻了一些有價值的東西，但是你需要把它們整合在一起。 所以：

第一的：

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

第二：

確保代碼中的 $src 變量實際上是正確的路徑。 我會添加一個：

    echo $src;

測試位置是否正確。

第三：

Aghoshx 是正確的 - 你必須有鈎子參考：

    add_action('init','popup');

（由於您命名了函數彈出窗口，這就是我輸入的內容-但是，為了防止函數名稱與其他 WP 函數和插件發生沖突，我建議您將其更改為更獨特的內容，例如建議的 aghoshx）

第四：

檢查您的腳本是否正在加載。 完成上述步驟 1-3 后，請刷新 WP 頁面並執行“查看源代碼”。 查找您的腳本文件。 如果您在 Firefox 中，您實際上可以單擊 url 並加載它 - 如果您在 IE 中，則將 url 復制粘貼到 url 欄中，看看您的文件是否在那里（如果是，則是正在加載。如果不是，那么它沒有正確加載文件，您需要修復您設置到 $src 變量中的路徑）。

第五：

一旦你解決了上述問題，cillosis 是正確的 - 你需要從 javascript 文件中刪除除 javascript 函數之外的所有內容（你甚至刪除標簽）。

最后：

看看 Martti Laines 的回答——你需要使用他建議的 window.addEventListener 來綁定事件，或者修改你的 php 模板中的標簽以包含 onload="popup" （就像你在腳本文件中那樣）。

最后一點建議：

jQuery 使許多事情變得容易得多。 將 jQuery 引入您的 WP 插件非常容易。 只需將其添加到您的 php 彈出函數中：

    wp_enqueue_script('jquery');

祝你好運！

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

Answer 4

您在 .js 文件中包含 HTML，並且從未在 alert() 末尾添加分號。 也許嘗試在您的 popup.js 中使用它：

function popup(){

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

}

然后在您的 HTML 中將onload="popup()"到 body 標記中。

如何在 Wordpress 插件中加載 Javascript

問題描述

4 個解決方案

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

如何在 Wordpress 插件中加載 Javascript

問題描述

4 個解決方案

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

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