将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（....