将 Bootstrap 模板转换为 Wordpress 时未加载 jQuery

Posted 2023-05-09

【中文标题】将 Bootstrap 模板转换为 Wordpress 时未加载 jQuery

【英文标题】：jQuery not loading when converting Bootstrap template to Wordpress

【发布时间】：2020-01-27 14:17:30

【问题描述】：

jQuery 文件不会从 Bootstrap 模板加载。我正在将其转换为 Wordpress 主题。我在我的functions.php 文件中尝试了许多不同的脚本排队方式。我曾尝试取消注册 jQuery，但无济于事。

Chrome 开发工具报 404 错误并提交加载 js 文件..

<?php 
  function willow_rivers_files() 
    wp_enqueue_style('font-awesome', get_theme_file_uri('vendor/fontawesome-free/css/all.min.css'));
    wp_enqueue_style('bootstrap-files', get_theme_file_uri('vendor/bootstrap/css/bootstrap.min.css'));
    wp_enqueue_style('custom-style-from-template', get_theme_file_uri('css/grayscale.min.css'));
    wp_enqueue_style('custom-style', get_theme_file_uri('style.css'));
    wp_enqueue_style('google-font-round', '//fonts.googleapis.com/css?family=Varela+Round');
    wp_enqueue_style('google-fonts-nunito', '//fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i');  

    wp_enqueue_script('jquery', get_template_directory_uri('vendor/jquery/jquery.min.js'), NULL, '1.0', true);
    wp_enqueue_script('jquery-easing', get_template_directory_uri('vendor/jquery-easing/jquery.easing.min.js'), NULL, '1.0', true);
    wp_enqueue_script('jquery-easing', get_template_directory_uri('js/grayscale.min.js'), NULL, '1.0', true);
  

  add_action('wp_enqueue_scripts', 'willow_rivers_files');
?>

【问题讨论】：

据我所知，get_template_directory_uri() 不接受任何参数 - 所以应该像 wp_enqueue_script('jquery', get_template_directory_uri().'/vendor/jquery/jquery.min.js', NULL, '1.0', true); 那样完成

【参考方案1】：

WordPress 有自己的 jquery 库，您无需单独包含它。

要从 WP 加载 jquery，您只需在 JS enqueue 的第三个参数中添加 jquery 库的依赖项。

请尝试如下：

删除：

wp_enqueue_script('jquery', get_template_directory_uri('vendor/jquery/jquery.min.js'), NULL, '1.0', true);

以下两行将其更改为

wp_enqueue_script('jquery-easing', get_template_directory_uri('vendor/jquery-easing/jquery.easing.min.js'), NULL, '1.0', true); wp_enqueue_script('jquery-easing', get_template_directory_uri('js/grayscale.min.js'), NULL, '1.0', true);

到

wp_enqueue_script('jquery-easing', get_template_directory_uri(). '/vendor/jquery-easing/jquery.easing.min.js', array( 'jquery' ), '1.0', true); wp_enqueue_script('jquery-easing', get_template_directory_uri(). '/js/grayscale.min.js', array( 'jquery' ), '1.0', true);

请确保路径 get_template directory_uri() 将返回您 http://www.example.com/wp-content/themes/yourtheme你需要添加路径的其余部分以“/”开头。

希望对您有所帮助！

【讨论】：

还是不高兴，我在本地 MAMP 服务器上工作，这有什么不同吗？

不，它没有。你能告诉我你现在遇到什么错误吗？您还可以提供来自检查或查看源的入队 JS URL 的屏幕截图吗？

加载资源失败：服务器在控制台响应状态为 404（未找到）。虽然脚本在页脚中看起来不错.. 恐怕我看不到如何添加屏幕截图

安装lightshot获取截图并上传到lightshow云。它生成网址。把它贴在这里。或截屏并在此处上传。 (prnt.sc) 并将 URL 发送给我。 404 获取什么资源。

我猜你已经从页脚和你调用 get_footer() 函数的主题的 footer.php 文件中删除了脚本标签。您添加的代码将通过 get_footer() 函数调用。我希望您仔细检查是否包含 jquery.js 的页面的视图源，您在 functions.php 文件中排队的 JS 文件是否显示。