主题现在使用Require.js,入队脚本不再起作用

时间:2015-02-03 作者:cody

我创建了一个小的自定义脚本,它根据是否有横幅在不同的位置修复了一个侧栏。我在子函数文件中使用了排队脚本,然后使用了自定义脚本。js文件和我的javascript。见下文:

function.php (In Child Theme Folder)

function custom_scripts() {

wp_register_script( \'custom-script\', get_stylesheet_directory_uri() . \'/custom.js\', array() , false, true );

wp_enqueue_script( \'custom-script\' );

}

add_action( \'wp_enqueue_scripts\', \'custom_scripts\', 99 );

custom.js (In Child Theme Folder)

$(function() {
var div = $(".sidebar-wrapper");
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if ($(".sidebar-wrapper").closest(".mk-main-wrapper").length  && scroll > 147) {
        div.addClass("fixed-product-nav");
    } else if (scroll > 263) {
        div.addClass("fixed-product-nav");
    } else {
        div.removeClass("fixed-product-nav");
    }
});
});
正如我所说,这工作得很好,但现在我的WP主题(Jupiter)已经做了一个更新,现在使用require。他们告诉我WordPress排队脚本将不再工作。这是真的还是我只需要使用不同的方式来加载脚本?

由于这是自定义工作,因此主题支持不会有帮助。

当我查看页面源代码时,我可以看到自定义。js加载到页面上,让我觉得脚本有问题,但它过去工作得很好,页面的HTML结构没有改变。

所以我想真正的问题是我如何获得我的习惯。js可以像它那样加载和工作,但需要。js?

该网站处于开发模式,因此很抱歉,我无法共享公共链接。

非常感谢您的帮助。

1 个回复
SO网友:tao

如果有脚本,它应该可以工作。它可能会失败,因为您没有声明jquery 并且您没有正确包装它(在无冲突模式下)。下面是脚本应如何排队:

function custom_scripts() { 
    wp_enqueue_script( \'unique-custom-script\', 
        get_stylesheet_directory_uri() . \'/custom.js\', 
        array(\'jquery\') , 
        false, 
        true 
    );
}
add_action( \'wp_enqueue_scripts\', \'custom_scripts\', 99 );
还有你的习惯。js公司:

jQuery(document).ready(function($) {
    $(window).scroll(function() {
        var div = $(".sidebar-wrapper");
        var scroll = $(window).scrollTop();
        if (div.closest(".mk-main-wrapper").length  && scroll > 147) {
            div.addClass("fixed-product-nav");
        } else if (scroll > 263) {
            div.addClass("fixed-product-nav");
        } else {
            div.removeClass("fixed-product-nav");
        }
    });
});
我将脚本的注册名称更改为unique-custom-script 以减少名称冲突的风险。

当WP被告知从两个不同的来源以相同的名称注册脚本时,它将查看版本号并加载最高的版本号。您的版本号设置为false, 因此,在您的示例中,如果任何其他主题或插件以custom-script WordPress会确保在您试图加载自己的脚本的地方加载另一个脚本,前提是另一个脚本的声明版本为0.0.1 或更高。

更新:

如果你的主题提供了在页脚中注册脚本的方法,只需添加custom.js 并从中删除零件functions.php. 这可能有用。

结束

相关推荐

如何让jQuery在Bootstrap之前加载?

我正在构建引导程序/WordPresssite 我对引导有问题。在jquery之前加载min.js,这会导致导航无法正常工作等问题。下面是我将脚本放入队列的方式。function turtles_scripts() { wp_enqueue_style( \'turtles-bootstrap-min\', get_template_directory_uri() . \'/css/bootstrap.min.css\', array(), null, \'all\' );