在 Wordpress 插件中排队 Javascript 和 jQuery

Posted 2023-05-09

【中文标题】在 Wordpress 插件中排队 Javascript 和 jQuery

【英文标题】：Enqueueing Javascript and jQuery in a Wordpress plugin

【发布时间】：2014-05-29 03:54:53

【问题描述】：

我是 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 帖子和一些在线指南的建议，但没有成功。

【参考方案1】：

Dave Ross 的回答很到位。我补充一下，这是最常见的格式：

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

你不需要add_action('init', 'loadQuery');。 jQuery 已作为 alert-js 的依赖项加载，正确的入队位置是动作挂钩 wp_enqueue_scripts（仅在前端运行）。

【参考方案2】：

WordPress 以无冲突模式加载 jQuery，因为它也附带 Prototype。所以，你不能用$来引用jQuery，你需要拼出jQuery。您的 Javascript 代码必须是：

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

或者，您可以将代码包装在一个自执行匿名函数中，该函数在其中定义 $：

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

【参考方案3】：

我认为在 wordpress 中使用 $ 存在问题。尝试使用 jQuery(document).ready(....