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

Posted 2023-05-09

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

【英文标题】：How can initialize Fancybox into WordPress with a separate .js file properly?

【发布时间】：2020-08-22 17:58:26

【问题描述】：

我做了一个搜索，发现这个方法here使用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
    
  );

【问题讨论】：

你收到了什么错误？

感谢您的回答。我更新了问题。

【参考方案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
    
  );

);

【讨论】：

我尝试在我的函数周围使用$(document).ready(function() );，但不幸的是它还不起作用。我犯了同样的错误。难道 jQuery 本身不应该为这个函数做好准备吗？奇怪的是，jQuery 的加载速度足够快，jquery.fancybox.min.js 可以正常工作，但init-fancybox.js 却不行。此外，您希望我在哪里编写链接到 jQuery 的脚本？它不应该是必需的，因为我已经入队了，对吧？

请尝试使用 jQuery(document).ready(function($));我认为在 Wordpress 中，jQuery 在全局范围内注册为“jQuery”，而不是“$”。