Wordpress：Javascript已“加載”，但無法使用控制台錯誤

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 /腳本並使用我自己的主題。

希望有人可以幫忙！

如果有幫助，這里還列出了父主題樣式：

// 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);

這將注冊句柄“ my-script”，並將其與主題目錄的/js目錄中的script.j s文件相關聯，告訴WordPress它需要jQuery ， 'responsive-nav'和'uniform-js'才能運行，沒有版本號，並將其加載到頁腳中。 必須先加載所有依賴項。 jQuery是WordPress隨附的唯一工具，因此其他工具需要首先入隊。

至於jQuery，WordPress將其以無沖突模式加載，因此默認情況下您將無權訪問$() 。 有一些解決方法。 最簡單的方法是將$()替換$() jQuery() 。 如果您的腳本必須加載到標題中，那么這就是您想要做的。

如果它可以加載到頁腳中（這是您想要的選項），則可以將整個腳本包裝在傳遞jQuery的匿名函數中。因此，它看起來像這樣：

( function( $ ) {
   // Your jQuery Script Here
} )( jQuery );

此外，而不是只用wp_deregister_script()請嘗試使用剛剛wp_dequeue_script()來代替。 所以：

wp_dequeue_script( 'modernizr' );

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具有無沖突模式 ，該模式將“放棄對$變量的控制”。

Answer 3

•您需要在main-js的依賴關系中同時包含響應式導航和統一 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. 而不是啟動您的功能 ：

$(function(){

嘗試：

jQuery(function($){

•錯誤2。似乎某些腳本正在調用conditionizr函數，因此在注銷時，JavaScript會引發錯誤。 找出正在調用哪個腳本並刪除該函數調用。 （我可能是錯的，但看起來好像是從內聯腳本調用的，請檢查wp_add_inline_script ）