將Javascript和jQuery放入Wordpress插件中

Question

我是PHP的初學者，我一直在嘗試並且未能使其與合作用Javascript / jQuery加載基本測試警報。 我正在為Wordpress網站創建一個插件，我只需要確保可以在頁面上成功運行Javascript程序，然后才能真正開始為其編寫代碼。 這是我到目前為止的內容：

.js文件只是一個用jQuery編寫的測試警報。

$(document).ready(function () {

    alert("Your plugin's working");

});

PHP文件是一個非常簡單的插件，旨在運行警報。

<?php
/**
 * Plugin Name: PanoramaJKM
 * Plugin URI: unknown
 * Description: Should alert on loading
 * Version: 0.1
 * Author: Matt Rosenthal
 * Author URI: unknown
 */

    function loadQuery() {
        if (!is_admin()) {
            wp_enqueue_script('jquery');
        }
    }

    add_action('init', 'loadQuery');


    function headsUp() {
        wp_enqueue_script('alert-js', plugins_url('/js/alert.js', __FILE__), array('jquery'));
    }

    add_action('wp_enqueue_scripts', 'headsUp');
?>

每當我嘗試在我的Wordpress網站上加載插件時，JS控制台都會向我吐出此錯誤：

Uncaught TypeError: undefined is not a function 

如果將我的alert.js文件更改為不帶jQuery，我可以得到JS警報來顯示。 但是，我需要jQuery來編寫最終的插件，我感覺好像缺少了一些易於修復的東西。 任何幫助將不勝感激！ 我已經嘗試遵循其他SO帖子的建議以及一些在線指南，但均未成功。

Answer 1

WordPress以noconflict模式加載jQuery，因為它也隨Prototype一起提供。 因此，您不能使用$來引用jQuery，而需要拼寫jQuery。 您的Javascript代碼必須為：

jQuery(document).ready(function () {
    alert("Your plugin's working");
});

或者，您可以將代碼包裝在自定義匿名函數中，該函數在其中定義$：

(function($) {
    $(document).ready(function () {
        alert("Your plugin's working");
    });
})(jQuery);

Answer 2

戴夫·羅斯的答案是正確的。 我要補充一點，這是最常見的格式：

jQuery(document).ready(function($) // <-- $ as shortcut for jQuery
{   
    alert("Your plugin's working");
});

而且您不需要add_action('init', 'loadQuery'); 。 jQuery已經作為alert-js的依賴項被加載，並且正確的入隊位置是動作鈎子wp_enqueue_scripts （僅在前端運行）。

Answer 3

我相信在wordpress中使用$存在問題。 嘗試使用jQuery（document）.ready（....