来自父主题的jQuery与单个min.js文件中的许多其他脚本一起加载

时间:2017-03-17 作者:Diogo

我正在为加载到其函数中的父主题构建子主题。phpall 它的脚本位于单个缩小的JS文件中。它通过设置wp_enqueue_script() 至“真”

但是,请注意single file 在开发人员的代码显示在最底部之前,包括几个库。因此,通过向下滚动文件,您将得到:jQuery、Parsley、Slick、Select2,最后是开发人员代码。

就像我说的,all in the same file, 一个接一个地生成一个大文件(缩小242kb,超过20K行代码)。

因此,在我的子主题中创建自定义jQuery脚本时,我可以将它们加载到页面上,但我的脚本都不起作用。控制台显示“UncaughtReferenceError:$未定义”,我假设这表示未安装jQuery。。。

但是jQuery在我前面提到的那个缩小的文件中。我的主题使用jQuery。。。所以我很困惑。为什么不起作用?

我怀疑这与父主题的开发人员采用的这种方法有关,因为他没有像您通常那样安装jQuery。通过完全复制原始文件来覆盖它,只包含几行简单的代码,这似乎不是一种方法。。。有什么想法可以解决这个问题吗?

我正在将脚本加载到我的孩子主题函数中。php如下所示:

define( \'BLK_BOX_VERSION\', \'1.0.0\' );
define( \'BLK_BOX_TEMPLATE_URI\', get_stylesheet_directory_uri() );
define( \'BLK_BOX_THEME_SLUG\', \'black-box\' );

if ( ! function_exists( \'headerNavBar_script\' ) ) :

function headerNavBar_script() {


wp_enqueue_script( BLK_BOX_THEME_SLUG . \'-scripts\', BLK_BOX_TEMPLATE_URI . \'/static/dist/scripts/navbar-scroll.js\', array(), BLK_BOX_VERSION, true );
}
endif;
add_action( \'wp_enqueue_scripts\', \'headerNavBar_script\' );

3 个回复
SO网友:Keshav Kalra

以这种方式将所有$更改为jQuery和enque脚本,这样您的脚本将在加载jQuery后加载,而且由于wordpress确实使用prototype,所以我们不能使用$user jQuery

wp_enqueue_script(\'name_of_script\',\'path\',array(\'jquery\'));

SO网友:Cedon

WordPress以无冲突模式加载jQuery。因此,默认情况下,不能使用$()。您可以通过以下两种方式之一修复此问题。

1) 更改$()jQuery() 在脚本中。

2) 将所有jQuery封装在匿名函数中,如下所示:

(function($) {
   // Your Code Here
})(jQuery)
注意:选项2仅在未在标头中加载脚本时有效。如果你这样做了,你需要做一些小事来让它发挥作用。

我会在缩小的脚本中删除您的jQuery副本,然后让WordPress处理加载。

SO网友:Diogo

终于成功了!

除了像belinus善意地建议的那样,将jQuery封装在匿名函数中之外,我还需要添加wp_enqueue_script(\'jquery\');就在我的脚本排队之前。

这是Gavin Simpson在Stack Overflow上提供的答案:https://stackoverflow.com/questions/28248113/jquery-is-not-defined-in-wordpress-but-my-script-is-enqueued-properly

成功了!