WordPress插件开发调用未定义的函数jQuery()

时间：2015-01-24 作者：pSyToR

说真的，我整天都在这件事上。。。要么我完全没抓住重点。。。或者我真的在互联网上找不到合适的信息。。。

无论我在哪里发现他们说要以以下方式加载jQuery，在我插件的主文件中，我都会执行以下操作

这是用于加载脚本的wp\\u enqueue\\u脚本（带有S）

add_action(\'wp_enqueue_scripts\', \'myplugin_load_jquery\');

然后您需要调用jQuery的函数（此函数的wp\\u enqueue\\u script no S）。

function myplugin_load_jquery(){
    wp_enqueue_script(\'jquery\');
};

我错过了什么，

完成后，我尝试使用以下命令，它总是给我消息“调用未定义的函数jQuery（）”

jQuery(document).ready(function(){
    //Do anything...
});

最后有谁能告诉我如何正确地做到这一点吗？以明确的方式？或者给我指一个有正确清晰信息的地方？

我真的需要把我的脚本放在一个。JS文件？或者我可以从同一个文件运行它？

。。。正在工作。。。进行更多测试

4 个回复

最合适的回答,由SO网友:tao 整理而成

您需要将jquery指定为自定义脚本的依赖项，设置wp_enqueue_script() 到array(\'jquery\'), 像这样：

wp_enqueue_script(
    \'yourCustomScript\',
    plugins_url(\'js/yourCustomScript.js\', __FILE__),
    array(\'jquery\'),
    \'1.0.0\',
    false
);

更改路径以指向自定义脚本文件

至于你的last question, 答案是肯定的。你需要一个。js文件。基本上，WP需要知道在页面中加载的脚本是什么，以确保先加载依赖项，然后再加载依赖项。

还请记住，您通常$() 除非将代码包装到以下内容中，否则alias将无法工作：

jQuery(document).ready(function($) {
    // Inside of this function, $() will work as an alias for jQuery()
    // and other libraries also using $ will not be accessible under this shortcut
});

Refference.

下面是一个测试示例，它应该在自定义插件中工作：

jquery测试。js公司：

jQuery(document).ready(function($) {
    $(\'<a/>\', {
        id: \'foo\',
        href: \'https://www.google.com/webhp?q=jquery+mistakes+you+are+probably+making\',
        title: \'bar\',
        rel: \'external\',
        text: \'jQuery\\\'s dead! Long live jQuery!\',
        style: \'\' +
            \'position: fixed;\' +
            \'top: 120px; \' +
            \'left: 0; \' +
            \'padding: 10px 20px; \' +
            \'background-color: #369; \' +
            \'color: white; \' +
            \'z-index: 9999;\' +
            \'border-radius: 0 6px 6px 0\'
        })
    .prependTo(\'body\');
});

将此文件放入插件的/js 文件夹在插件的主文件中，添加以下php：

add_action(\'wp_enqueue_scripts\', \'testing_jquery\');
function testing_jquery() {
    if ( ! is_admin()) 
        wp_enqueue_script(
            \'testing-jquery\',
            plugins_url(\'js/testing-jquery.js\', __FILE__ ),
            [\'jquery\'],
            true
            );
}

确保它不在任何其他函数或类中。

如果您不是通过插件而是通过主题添加此内容，请将testing-jquery.js 主题中的文件/js 文件夹和替换plugins_url(\'js/testing-jquery.js\', __FILE__ ), 具有get_stylesheet_directory_uri() . \'/js/testing-jquery.js\',

这应该会在google搜索中添加一个蓝色链接，用于在网站的每个前端页面上使用jQuery时查找常见错误。

SO网友:paul

您不必专门将jQuery排队，因为您可能正在自定义脚本中使用jQuery。您可以执行以下操作：

wp_enqueue_script( \'my-script\', plugin_url( \'js/my-script.js\', __FILE__ ), array(\'jquery\') );

jQuery(document).ready(function($){
    //Do anything...
});

请注意$作为参数传递给回调，它将使jQuery可供您的函数范围访问。

SO网友:bonger

您需要确保jQuery已经加载，所以在稍后的操作中输出您的代码，例如对于您可以使用的前端\'wp_print_footer_scripts\' 优先级较高：

add_action( \'wp_print_footer_scripts\', function () {
    ?>
    <script>
    jQuery(document).ready(function(){
        //Do anything...
    });
    </script>
    <?php
}, 50 );

类似于admin\'admin_print_footer_scripts\'.

SO网友:Daniyal Ahmed

只需遵循这些步骤，在我的例子中，我的插件名称是awesome social icons。

   //  Step - 1
<?php
  function register_awesome_social_submenu_page()
    {
    add_submenu_page(\'options-general.php\', \'Awesome Social\', \'Awesome Social\', \'manage_options\', \'awesome-social\', \'awesome_social_callback\');
    }
  ?>
   // Step - 2
<?php
add_action(\'admin_menu\', \'register_awesome_social_submenu_page\');
?>
 // Step - 3

<?php 
function awesome_social_callback()
{
        wp_enqueue_script(\'jquery\');
        wp_enqueue_script(\'jquery-form\');
?>
<script>
$j=jQuery.noConflict();

        $j(document).ready(function(){

// Do what you want :)
});
</script>

<?php

    }

?>

结束

小码农CODE

WordPress插件开发调用未定义的函数jQuery()

jquery测试。js公司：

相关推荐

Plugins_url()错误地返回wp-Include目录