我的JavaScript文件未在WordPress中加載

Question

我正在嘗試在WordPress中運行燈箱插件。 由於某種原因，它將無法加載，並且我具有正確的文件路徑。 通常我使用CDN版本的文件，但是周圍沒有這樣的版本，我必須在本地加載它。 我也有一些違規行為。 我不知道發生了什么，為什么會收到錯誤消息。

functions.php

function nutrition_club_theme_script_enqueue() {


 wp_enqueue_script('jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js');



    wp_enqueue_script('jquery-tools', get_template_directory_uri() .'/js/jquery.tools.min.js', array('jquery'), '', true);

    wp_enqueue_script('jquery-portfoliolightbox', get_template_directory_uri() .'/js/jquery.portfoliolightbox.js', '', '', true);

    wp_enqueue_script('jquery-magnific-popup', 'https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js');


    wp_enqueue_script('customjs', get_template_directory_uri() . '/js/nutrition_club_theme.js', array('jquery'), '4.8', false);



    wp_enqueue_script('owljs', 'https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js');


    wp_enqueue_script('bootstrapjs', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '3.3.7', true);

    wp_enqueue_script('popup-galleryjs', get_template_directory_uri() . '/js/popup-gallery.js', array(), '', true);

    wp_enqueue_script('wowjs', 'https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js');




}


add_action(wp_enqueue_scripts, 'nutrition_club_theme_script_enqueue');

custom.js

     jQuery(".service-popup").lightBox({
    imgpath: 'https://unsplash.it/1200/900?image=839',
    title: 'Your Title',
    text: 'Enter any text',
    link: ['http://www.link1.com', 'http://www.link2.com'],
    linkText: ['Site 1 Text', 'Link 2 text']
});     

Chrome錯誤

Uncaught TypeError: jquery-3.2.1.min.js?ver=3.2.1:2 
jQuery(...).lightBox is not a function
        at HTMLDocument.<anonymous> (nutrition_club_theme.js?ver=4.8:81)
        at j (jquery-3.2.1.min.js?ver=3.2.1:2)
        at k (jquery-3.2.1.min.js?ver=3.2.1:2)
    (anonymous) @ nutrition_club_theme.js?ver=4.8:81
    j @ jquery-3.2.1.min.js?ver=3.2.1:2
    k @ jquery-3.2.1.min.js?ver=3.2.1:2

違規

[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.
jquery-3.2.1.min.js?ver=3.2.1:2 [Violation] 'setTimeout' handler took 341ms
[Violation] Forced reflow while executing JavaScript took 197ms
[Violation] Forced reflow while executing JavaScript took 65ms

Answer 1

您要在Lightbox腳本之前加載custom.js。

嘗試為入隊添加額外的依賴項

wp_enqueue_script('customjs', get_template_directory_uri() . '/js/nutrition_club_theme.js', array('jquery', 'jquery-portfoliolightbox', 'jquery-magnific-popup'), '4.8', false);

或添加lightBox的腳本是什么。 您應該始終確保正確設置依賴項以避免這種情況。

注意：您還應該確保，如果有排隊的腳本（如lightBox one）需要jQuery，請將其設置為依賴項。