如何使用单独的 .js 文件正确地将 Fancybox 初始化为 WordPress？

Question

我进行了搜索，并在此处使用wp_add_inline_script. 它有效。但是，如果我想将我的初始化脚本保存到另一个 .js 文件中怎么办？这就是我最初想要的。我怎样才能正确加载？我试过了，但是我的加载init-fancybox一定是太早了，因为我得到了一个错误。（我的init-fancybox脚本不是问题，因为它在使用正确加载时有效wp_add_inline_script）function fancybox_enqueues() {     wp_register_script( 'fancybox', get_theme_file_uri( '/assets/js/jquery.fancybox.min.js' ), array('jquery'), '3.5.7', true);    wp_register_script( 'init-fancybox', get_theme_file_uri( '/assets/js/init-fancybox.js' ), array('jquery','fancybox'), '1.0', true);    wp_register_style( 'fancybox-css', get_theme_file_uri( '/css/jquery.fancybox.min.css' ), '1.0');    if ( is_singular( 'item' ) ) {        wp_enqueue_script( 'jquery');        wp_enqueue_script( 'fancybox' );        wp_enqueue_script ('init-fancybox');        wp_enqueue_style( 'fancybox-css' );    }}add_action( 'wp_enqueue_scripts', 'fancybox_enqueues');这是我得到的错误TypeError: $ is not a function这是init-fancybox.js$('[data-fancybox="single-item__gallery"]').fancybox({    buttons : [         "zoom",        "share",        //"slideShow",        "fullScreen",        //"download",        "thumbs",        "close"    ],    thumbs : {      autoStart : false    }  });

Answer 1

在您的代码运行时，jQuery 似乎未加载。尝试在其周围添加以下函数以确保在代码运行之前 jQuery 存在：

jQuery(document).ready(function ($) {

  // Your function goes here:

  $('[data-fancybox="single-item__gallery"]').fancybox({

    buttons: [

      "zoom",

      "share",

      //"slideShow",

      "fullScreen",

      //"download",

      "thumbs",

      "close"

    ],

    thumbs: {

      autoStart: false

    }

  });

});