如何在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

回答

相關問題