如何正确链接 wordpress 主题下的引导脚本？

Posted 2023-03-05

【中文标题】如何正确链接 wordpress 主题下的引导脚本？

【英文标题】：How to properly link bootstrap scripts under wordpress theme?

【发布时间】：2021-05-03 13:05:33

【问题描述】：

我正在使用 Bootstrap 5 创建一个 WP 主题，但遇到了一个我无法解决的问题。我想将引导文件直接放入主题文件中。我已经用.css 文件成功地做到了这一点，但是.js 文件有问题。你们有没有人知道我做错了什么，像navbar-toggler 这样的元素不起作用？通过使用 CDN 在主题中包含 js 文件 <script src="_TEMP0_@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>，一切正常。当我手动执行时，它不再起作用。

这是我的functions.php 文件的摘录：

function imago_theme_scripts() 
    wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;900&display=swap" rel="stylesheet', array(), null );

    wp_enqueue_style( 'imago-theme-style', get_stylesheet_uri(), array('imago-bootstrap-css'), '1.0.0' );

    wp_style_add_data( 'imago-theme-style', 'rtl', 'replace' );

    wp_enqueue_script( 'imago-bootstrap-popper', 'https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js', array(), null, true );

    wp_enqueue_script( 'imago-bootstrap-js', get_template_directory_uri() . '/assets/bootstrap/js/bootstrap.min.js', array(), null, true );

    //wp_enqueue_script( 'imago-bootstrap-js', 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha3/dist/js/bootstrap.bundle.min.js', array(), null, true );


add_action( 'wp_enqueue_scripts', 'imago_theme_scripts' );

我仍然尝试这种方式，将 popper.min.js 和 bootstrap.min.js 脚本替换为： wp_enqueue_script( 'imago-bootstrap-js', get_template_directory_uri() . '/assets/bootstrap/js/bootstrap.bundle.min.js', array(), null, true );，但不幸的是，这也没有改变任何东西。移动版导航仍然无法使用。

目录结构保存正确。 在第一个配置中，您可以看到根据文档将 `popper.min.js' 文件插入到 'bootstrap.min.js' 文件之前。

【参考方案1】：

它们可能无法正常工作，因为您没有将 jQuery 包含到依赖项中。

wp_enqueue_script( 'imago-bootstrap-js', get_template_directory_uri() . '/assets/bootstrap/js/bootstrap.min.js', array('jquery'), null, true );

除此之外，它们正在加载，您的导航控制台显示... ...控制台中是否有任何错误？