JQuery问题和wp_enQueue_脚本

时间:2013-08-24 作者:user2501504

实际上,我有一个主题,用于插入jquery代码和核心参考以及jquery iu

总线发生了一些我不理解的事情,实际上正如我所说的,直到我需要插入代码来创建图像幻灯片,简单的幻灯片和流行的插件,这些插件在单页中工作非常完美

为此,我创建了简单的快捷码并显示图像,然后将其移动到幻灯片中

当我创建这个显示图像但不移动的快捷码时,我看到插件的代码是否加载到DOM中,我看到了完美的引用,并且在主题的头部和加载页面时也看到了对jquery核心的引用

我看到一次又一次,滑块不起作用,最后我把jquery的参考远程代码放在了r shortcode的内容中,最后滑块的脚本起作用了,但我博客其余部分的所有jquery代码都没有起作用,在dom中我看到了2个加载jquery核心的调用

我不明白如果我在DOM中看到了对jquery通用核心的引用,为什么所有脚本都不起作用,因为在DOM中,我看到这个jquery核心和所有脚本都可以完美地工作,如果核心加载,但如果jquery的核心一直到短码内,它也可以工作

如何可能

对不起,我希望能理解所有的问候

例如,只有在调用jquery的远程核心之前,这个插件的代码才起作用,如果没有,则不加载任何内容,并且这个核心代码真的加载在头部。。。。。

wp_enqueue_script(\'jquery-cycle\',  TEMPLATE_PATH . \'/js/jquery.cycle.all.js\', array(\'jquery\'), null );
对于“不获取”问题,我创建了以下内容,但继续解决这些问题:

function fix_noconflict() {
wp_deregister_script( \'jquery\' );
wp_register_script( \'jquery\' , \'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js\' );
}
add_action( \'wp_enqueue_scripts\' , \'fix_noconflict\' );

1 个回复
SO网友:gmazzap

开发Wordpress主题的最佳实践是always use WP中包含的jquery。因此,应避免取消注册并使用cdn托管版本。

这是一种必要的做法,例如,在wordpress存储库中包含主题,而且一些著名的主题市场(如themeforest)目前不接受使用cdn托管版本jQuery的主题。

之后,您的代码:

wp_enqueue_script(\'jquery-cycle\',  TEMPLATE_PATH . \'/js/jquery.cycle.all.js\', array(\'jquery\'), null );
有点不对,因为TEMPLATE_PATH 返回主题的路径,但是wp_enqueue_script 需要url。另一个问题是wp_enqueue_script 应使用调用wp_enqueue_scripts 行动挂钩(admin_enqueue_scripts 用于支持)。看见here

因此,您应该将以前的代码替换为:

add_action(\'wp_enqueue_script\', \'enqueue_my_scripts\');

function enqueue_my_scripts() {
  wp_enqueue_script(\'jquery-cycle\',  get_template_directory_uri() . \'/js/jquery.cycle.all.js\', array(\'jquery\'), null );
}
注意我是如何使用add_action 要挂接的函数wp_enqueue_script 动作以及我在函数中使用的方式get_template_directory_uri 函数检索主题根文件夹的url。

看见here 的文档add_action, here 的文档wp_enqueue_script 挂钩和here 的文档get_template_directory_uri.

来自codex,在wp_enqueue_script 文档页面(link) 你可以阅读

WordPress附带的jQuery库被设置为noConflict()模式(请参阅wp includes/js/jQuery/jQuery.js)。这是为了防止与WordPress可以链接的其他JavaScript库的兼容性问题。

因此,在wordpress中使用jquery的每个脚本都必须包装在noConflict wrappers. 例如,如果您想使用此代码(示例取自jquery cycle docs):

$(\'#shuffle\').cycle({ 
    fx:     \'shuffle\', 
    easing: \'easeOutBack\', 
    delay:  -4000 
})
您需要使用noConflict包装器对其进行包装,因此它应该是:

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

    $(\'#shuffle\').cycle({ 
        fx:     \'shuffle\', 
        easing: \'easeOutBack\', 
        delay:  -4000 
    })

});
可能在您使用的代码中$ 直接使用jQuery快捷方式,因此它不起作用。

结束