在wordpress中运行jquery还需要什么?

时间:2013-04-11 20:25:35

标签: jquery wordpress

我一直试图让jquery运行在我正在构建的wordpress主题中。如果我将传统方法用于非worpress网站,我可以让它工作:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

但我已经读过,这不是在wordpress中使用jquery的正确方法,因为它可能会导致冲突和其他问题。我已经阅读了wordpress codex和这个网站:http://www.ericmmartin.com/5-tips-for-using-jquery-with-wordpress/这实际上比codex更有帮助。我在StackOverflow上检查了类似的问题,并尝试了那里列出的解决方案,但jquery仍然无法加载。我发现关于这个主题的其他网站不是很清楚。这是我目前在我的functions.php文件中的代码,但它仍然无效:

function jqry_init() {
    if (!is_admin()) {
        // comment out the next two lines to load the local copy of jQuery
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://code.jquery.com/jquery-latest.min.js', false);
        wp_enqueue_script('jquery');
    }
}

add_action('init', 'jqry_init');

我尝试从Google直接从jquery加载它,并引用我在网站上的文件中的jquery副本。没有这些工作。我应该提一下,如果这会产生影响,我会在localhost上使用xampp进行所有这些操作。我错过了什么?

更新 以下是我正在运行的片段/其他脚本:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/scripts/isotope.js"></script>

        <script type="text/javascript">
            JQuery(document).ready(function($) {
                var $container = $('#content');
                $container.isotope({
                    filter: '*',
                    animationOptions: {
                        duration: 750,
                        easing: 'linear',
                        queue: false,
                    }
                });

                JQuery('#nav a').click(function($) {
                    var selector = $(this).attr('data-filter');
                    $container.isotope({
                        filter: selector,
                        animationOptions: {
                            duration: 750,
                            easing: 'linear',
                            queue: false,
                        }
                    });
                    return false;
                });

            });
        </script>

1 个答案:

答案 0 :(得分:3)

您想使用wp_enqueue_scripts挂钩添加脚本。您不需要检查admin,因为管理脚本admin_enqueue_scripts

还有另一个钩子
function jqry_init() {

    // comment out the next two lines to load the local copy of jQuery
    wp_deregister_script('jquery');
    wp_register_script('jquery', 'http://code.jquery.com/jquery-latest.min.js', false);
    wp_enqueue_script('jquery');

}

add_action('wp_enqueue_scripts', 'jqry_init');

如果您的jQuery代码段仍然无效,则可能是由于noconflict包装器。

例如,如果以下内容不起作用,您将获得$ is not defined error

$( document ).ready( function() {
   //do stuff here
});

您需要将其更改为

jQuery( document ).ready( function( $ ) {
    //do stuff here with the $ shorthand
});

<强>更新

header.php中 在结束</head>标记之前,请确保您拥有 <?php wp_head();?>

wp_head()很重要,因为这是添加到wp_enqueue_scripts的函数的运行位置。没有它,它们就不会被运行。