Question

我只是熟悉Wordpress并将脚本排入队列，所以我很感激一些帮助。我会尝试尽可能多地提供详细信息。

所有这些脚本以及它们如何在我的html模板中正常工作并不值得，但现在他们在Wordpress中似乎无法加载/我得到控制台静态模板中没有的错误。

在我的静态模板中，我加载了以下文件：

<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/responsive-nav.js"></script>
<script src="js/jquery.uniform.min.js"></script>
<script src="js/main.js"></script>

在main.js中，我使用以下内容加载其前面的2个脚本：

/**
 * RESPONSIVE-NAV.JS (plug-in)
 */ 

$(function(){

    var navigation = responsiveNav(".site-nav__list", {
        customToggle: "#site-nav__toggle",
        open: function(){
            $("#site-nav__toggle").addClass('open');
        },
        close: function(){
            $("#site-nav__toggle").removeClass('open');
        }
    });
});

/**
 * UNIFORM.JS (plug-in)
 */ 

$("select, input[type='file'], input[type='checkbox'], input[type='radio']").uniform({selectAutoWidth: false, fileButtonClass: 'btn'});

脚本无法加载，我收到这些控制台错误：

Uncaught TypeError: $ is not a function
    at main.js?ver=4.6.4:10
(anonymous) @ main.js?ver=4.6.4:10

(index):46 Uncaught ReferenceError: conditionizr is not defined
    at (index):46

我的脚本排队如下：

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 100 );
function my_theme_enqueue_styles() {

    // Dequeue files
    wp_dequeue_style( 'normalize');
    wp_dequeue_style( 'html5blank');

    // Equeue files
    wp_enqueue_style( 'main-css', get_stylesheet_directory_uri() . '/css/main.css' );

    wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:300,300i,400,400i,600,600i,700,700i');
}

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts', 100 );
function my_theme_enqueue_scripts() {

    // Dequeue files
    wp_deregister_script( 'conditionizr');
    wp_deregister_script( 'modernizr');
    wp_deregister_script( 'html5blankscripts');

    // Register/equeue files
    wp_register_script('responsive-nav', get_stylesheet_directory_uri() . '/js/responsive-nav.js', array('jquery'));
    wp_enqueue_script('responsive-nav'); // Enqueue it!

    wp_register_script('uniform-js', get_stylesheet_directory_uri() . '/js/jquery.uniform.min.js', array('jquery'));
    wp_enqueue_script('uniform-js');

    wp_register_script('main-js', get_stylesheet_directory_uri() . '/js/main.js', array('jquery'));
    wp_enqueue_script('main-js');
}

如果我删除似乎摆脱了其中一个错误的wp_deregister_script( 'conditionizr');，但它不是我需要的脚本 - 我使用了子主题，所以我只是想剥离来自标记的任何父主题css / scripts并使用我自己的。

希望有人可以帮忙解决这个问题！

如果有帮助，这里也是父主题排队样式：

// Load HTML5 Blank scripts (header.php)
function html5blank_header_scripts()
{
    if ($GLOBALS['pagenow'] != 'wp-login.php' && !is_admin()) {

        wp_register_script('conditionizr', get_template_directory_uri() . '/js/lib/conditionizr-4.3.0.min.js', array(), '4.3.0'); // Conditionizr
        wp_enqueue_script('conditionizr'); // Enqueue it!

        wp_register_script('modernizr', get_template_directory_uri() . '/js/lib/modernizr-2.7.1.min.js', array(), '2.7.1'); // Modernizr
        wp_enqueue_script('modernizr'); // Enqueue it!

        wp_register_script('html5blankscripts', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '1.0.0'); // Custom scripts
        wp_enqueue_script('html5blankscripts'); // Enqueue it!
    }
}

// Load HTML5 Blank conditional scripts
function html5blank_conditional_scripts()
{
    if (is_page('pagenamehere')) {
        wp_register_script('scriptname', get_template_directory_uri() . '/js/scriptname.js', array('jquery'), '1.0.0'); // Conditional script(s)
        wp_enqueue_script('scriptname'); // Enqueue it!
    }
}

// Load HTML5 Blank styles
function html5blank_styles()
{
    wp_register_style('normalize', get_template_directory_uri() . '/normalize.css', array(), '1.0', 'all');
    wp_enqueue_style('normalize'); // Enqueue it!

    wp_register_style('html5blank', get_template_directory_uri() . '/style.css', array(), '1.0', 'all');
    wp_enqueue_style('html5blank'); // Enqueue it!
}

Answer 1

正如其他人所指出的，您需要在wp_register_script()语句中修复依赖关系数组。

另外，您不需要同时使用wp_register_script()和wp_enqueue_script()。只需按照wp_register_script()语法操作，即可。例如：

wp_enqueue_script( 'my-script', get_stylesheet_directory_uri() . /js/script.js', array( 'jquery', 'responsive-nav', 'uniform-js', '', true);

这将注册句柄＆＃39; my-script＆＃39;，将其与主题目录script.j目录中的/js文件相关联，告诉WordPress它需要{ {1}}，jQuery和'responsive-nav'为了运行，没有版本号，并将其加载到页脚中。必须先加载所有依赖项。 jQuery是WordPress中唯一的一个，所以其他人需要先排队。

对于jQuery，WordPress在无冲突模式下加载它，因此默认情况下您将无权访问'uniform-js'。有一些解决方法。最简单的方法是将$()替换为$()。如果你的脚本必须加载到标题中，那么这就是你想要做的。

如果它可以在页脚中加载，这是你想要的选项，那么你可以将整个脚本包装在一个传递jQuery的匿名函数中。所以它看起来像这样：

jQuery()

此外，请尝试仅使用( function( $ ) { // Your jQuery Script Here } )( jQuery );，而不是仅使用wp_deregister_script()。所以：

wp_dequeue_script()

Answer 2

我不会假装知道那些Wordpress内部函数，但是你的第一个错误表明某些东西正在使用conditionizr对象。您可能不应该使用wp_deregister_script('conditionizr')，除非您首先处理引用它的脚本文件。

至于另一个错误，我最近必须向WP站点添加一些jQuery脚本，并且在使用$时遇到问题。用jQuery替换它解决了这个问题。例如：

jQuery(function(){

    var navigation = responsiveNav(".site-nav__list", {
        customToggle: "#site-nav__toggle",
        open: function(){
            jQuery("#site-nav__toggle").addClass('open');
        },
        close: function(){
            jQuery("#site-nav__toggle").removeClass('open');
        }
    });
});

jQuery("select, input[type='file'], input[type='checkbox'], input[type='radio']").uniform({selectAutoWidth: false, fileButtonClass: 'btn'});

根据下面的评论，这是因为jQuery有一个no-conflict mode，它将“放弃对$变量的控制。”

Answer 3

•您需要在 main-js 的依赖项中包含 responsive-nav 和 uniform-js ，因为您正在使用他们在main.js.里面（实际上，当您在每个脚本中调用jQuery作为依赖项时，无需再次调用它）

wp_register_script('main-js', get_stylesheet_directory_uri() . '/js/main.js', array('jquery','responsive-nav','uniform-js'));
wp_enqueue_script('main-js');

•错误1. Instead of starting your function：

$(function(){

尝试：

jQuery(function($){

•错误2.似乎有些脚本正在调用 conditionizr 函数，因此，当您取消注册时，JavaScript会抛出错误。找出正在调用它的脚本并删除该函数调用。（我可能错了，但看起来它是从内联脚本中调用的，请检查wp_add_inline_script）

Wordpress：Javascript＆＃39;已加载＆＃39;但不使用控制台错误

3 个答案: