简体   繁体   English

将Javascript和jQuery放入Wordpress插件中

[英]Enqueueing Javascript and jQuery in a Wordpress plugin

I am a beginner to PHP and I'm trying and failing to get it to cooperate in loading a basic test alert in Javascript/jQuery. 我是PHP的初学者,我一直在尝试并且未能使其与合作用Javascript / jQuery加载基本测试警报。 I'm creating a plugin for a Wordpress site and I just need to make sure that I can successfully run Javascript programs on the page before I can really start writing for it. 我正在为Wordpress网站创建一个插件,我只需要确保可以在页面上成功运行Javascript程序,然后才能真正开始为其编写代码。 Here is what I have so far: 这是我到目前为止的内容:

The .js file is just a test alert, written with jQuery. .js文件只是一个用jQuery编写的测试警报。

$(document).ready(function () {

    alert("Your plugin's working");

});

The PHP file is an extremely simple plugin designed to run the alert. 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');
?>

Whenever I attempt to load the plugin on my Wordpress site, the JS console spits this error at me: 每当我尝试在我的Wordpress网站上加载插件时,JS控制台都会向我吐出此错误:

Uncaught TypeError: undefined is not a function 

I can get the JS alert to show if I change my alert.js file to be without jQuery. 如果将我的alert.js文件更改为不带jQuery,我可以得到JS警报来显示。 However, I need jQuery to write the final plugin and I feel like I'm missing something that's easily fixable. 但是,我需要jQuery来编写最终的插件,我感觉好像缺少了一些易于修复的东西。 Any help would be greatly appreciated! 任何帮助将不胜感激! I've already tried following the advice of other SO posts and a couple of online guides with no success. 我已经尝试遵循其他SO帖子的建议以及一些在线指南,但均未成功。

WordPress loads jQuery in noconflict mode because it ships with Prototype as well. WordPress以noconflict模式加载jQuery,因为它也随Prototype一起提供。 So, you can't refer to jQuery with $, you need to spell out jQuery. 因此,您不能使用$来引用jQuery,而需要拼写jQuery。 Your Javascript code needs to be: 您的Javascript代码必须为:

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

Alternately, you can wrap your code in a self-executiing anonymous function which defines $ inside of it: 或者,您可以将代码包装在自定义匿名函数中,该函数在其中定义$:

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

Dave Ross' answer is spot on. 戴夫·罗斯的答案是正确的。 I'll add that, this is the most common format: 我要补充一点,这是最常见的格式:

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

And you don't need add_action('init', 'loadQuery'); 而且您不需要add_action('init', 'loadQuery'); . jQuery is already being loaded as a dependency for alert-js and the correct place to enqueue is the action hook wp_enqueue_scripts (which only runs on the frontend). jQuery已经作为alert-js的依赖项被加载,并且正确的入队位置是动作钩子wp_enqueue_scripts (仅在前端运行)。

I believe there is an issue using $ in wordpress. 我相信在wordpress中使用$存在问题。 Try using jQuery(document).ready(.... 尝试使用jQuery(document).ready(....

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM