Bootstrap 和 Popper 的 WordPress JS 加载问题答案

【问题标题】：WordPress JS Loading Issues with Bootstrap and PopperBootstrap 和 Popper 的 WordPress JS 加载问题
【发布时间】：2020-03-30 23:35:10
【问题描述】：

脚本在加载时似乎有些古怪，会导致问题。我有这个：

function fyxt_custom_scripts() {
    wp_enqueue_script('jquery');
    //load order is important (from website jquery, popper, bootstrap)
    wp_register_script('prefix_bootstrap', '//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', array( 'jquery' ),'',true );
    wp_enqueue_script('prefix_bootstrap');
}
add_action( 'wp_enqueue_scripts', 'fyxt_custom_scripts' );

我收到以下控制台错误：

未捕获的 TypeError：Bootstrap 的工具提示需要 Popper.js (https://popper.js.org/)

所以我在 WordPress 中添加了以下内容。

    function fyxt_custom_scripts() {
        wp_enqueue_script('jquery');
        //popper for bootstrap
        wp_register_script( 'popper','https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', array( 'jquery' ),'',true );
        wp_enqueue_script( 'popper' );
        //load order is important (from website jquery, popper, bootstrap)
        wp_register_script('prefix_bootstrap', '//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', array( 'jquery' ),'',true );
        wp_enqueue_script('prefix_bootstrap');
    }
    add_action( 'wp_enqueue_scripts', 'fyxt_custom_scripts' );

一旦进入，它就会加载 popper。但现在我遇到了另一个错误。知道为什么吗？

tooltip.js:559 Uncaught TypeError: this.element.getAttribute is not a function
    at i.t._fixTitle (tooltip.js:559)
    at i.t._setListeners (tooltip.js:554)
    at new i (tooltip.js:142)
    at i.t._enter (tooltip.js:576)
    at HTMLDocument.<anonymous> (tooltip.js:528)
    at HTMLDocument.handle (jquery.js?ver=1.12.4-wp:3)
    at HTMLDocument.dispatch (jquery.js?ver=1.12.4-wp:3)
    at HTMLDocument.r.handle (jquery.js?ver=1.12.4-wp:3)

因此，似乎工具提示已被识别，但表示它需要 popper。但随后它会得到它并显示工具提示错误。这是怎么回事？

我尝试了几个解决方案，但没有任何效果。我认为这与加载顺序/依赖关系有关。这是完整的加载脚本。

function fyxt_custom_scripts() {
    wp_enqueue_style( 'jquery-custom', plugin_dir_url( __FILE__ )  . '../css/fyxt-theme-2/jquery-ui-1.10.4.custom.css' );
    wp_enqueue_style( 'jquery-custom', plugin_dir_url( __FILE__ )  . '../css/fyxt-theme-2/jquery-ui-1.10.4.custom.min.css' );   

    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jquery-ui-core' );
    wp_enqueue_script( 'jquery-ui-tabs' );
    wp_enqueue_script( 'jquery-ui-button' );
    wp_enqueue_script( 'jquery-ui-accordion' );
    wp_enqueue_script( 'jquery-ui-slider' );
    wp_enqueue_script( 'jquery-ui-core' );
    wp_enqueue_script( 'jquery-ui-widget' );
    wp_enqueue_script( 'jquery-ui-progressbar' );
    wp_enqueue_script( 'jquery-ui-sortable' );
    wp_enqueue_script( 'jquery-ui-autocomplete' ); //for tags, use later for generators (powers, effects, etc)

    wp_enqueue_script( 'tabs-script', plugin_dir_url( __FILE__ ) . '../js/tabs.js', array('jquery-ui-core', 'jquery-ui-accordion', 'jquery-ui-tabs') );

    wp_enqueue_script( 'tags-script', plugin_dir_url( __FILE__ ) . '../js/tagmanager-master/tagmanager.js', array(), '', false );
    wp_enqueue_style( 'tags-custom', plugin_dir_url( __FILE__ ) . '../js/tagmanager-master/tagmanager.css' );

    //plupload
    wp_enqueue_script( 'plupload-full', plugin_dir_url( __FILE__ ) . '../js/plupload.full.min.js', array(), '', false );
    wp_enqueue_script( 'plupload-scripts', plugin_dir_url( __FILE__ ) . '../js/jquery.ui.plupload/jquery.ui.plupload.min.js', array(), '', false );
    wp_enqueue_style( 'plupload-css', plugin_dir_url( __FILE__ ) . '../js/jquery.ui.plupload/css/jquery.ui.plupload.css' );

    //popper for bootstrap
    wp_register_script( 'popper','https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', array( 'jquery' ),'', false );
    wp_enqueue_script( 'popper' );

    //bootstrap
    wp_register_style('prefix_bootstrap', '//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css');
    wp_enqueue_style('prefix_bootstrap');

    //load order is important (from website jquery, popper, bootstrap)
    wp_register_script('prefix_bootstrap', '//stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', array( 'popper' ),'', false );
    wp_enqueue_script('prefix_bootstrap');

}

add_action( 'wp_enqueue_scripts', 'fyxt_custom_scripts' );

如果包含“选项卡脚本”，我会收到错误消息，jquery 按钮全部损坏。制表符和手风琴工作。

tooltip.js:568 Uncaught TypeError: this.element.getAttribute is not a function
    at i.t._fixTitle (tooltip.js:568)
    at i.t._setListeners (tooltip.js:563)
    at new i (tooltip.js:140)
    at HTMLDocument.<anonymous> (tooltip.js:767)
    at Function.each (jquery.js?ver=1.12.4-wp:2)
    at a.fn.init.each (jquery.js?ver=1.12.4-wp:2)
    at a.fn.init.i._jQueryInterface [as tooltip] (tooltip.js:758)
    at HTMLDocument.<anonymous> (tabs.js?ver=ec6af3c620057499034adb106af5aae1:10)
    at i (jquery.js?ver=1.12.4-wp:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4-wp:2)
    at Function.ready (jquery.js?ver=1.12.4-wp:2)
    at HTMLDocument.J (jquery.js?ver=1.12.4-wp:2)

如果我注释掉“选项卡脚本”，我可以让 jquery 按钮正常工作，但它会破坏选项卡和手风琴。

jquery.ui.plupload.min.js?ver=ec6af3c620057499034adb106af5aae1:1 Uncaught TypeError: i.widget is not a function
    at jquery.ui.plupload.min.js?ver=ec6af3c620057499034adb106af5aae1:1
    at jquery.ui.plupload.min.js?ver=ec6af3c620057499034adb106af5aae1:1

我不熟悉加载顺序和依赖关系，所以这里的建议会很棒。非常感谢您的帮助！

【问题讨论】：

尝试更改jQuery的版本，我的意思是删除wordpress提供的现有jquery并从CDN加载。 getbootstrap.com/docs/4.4/getting-started/download/…
我更新到最新了，还是没修复，还是报错。

标签： javascript jquery wordpress popper.js

【解决方案1】：

您应该将所有 JS 脚本移到页脚中。我希望它会帮助你。请看下面：

function fyxt_custom_scripts() {
}

add_action( 'wp_footer', 'fyxt_custom_scripts' );

【讨论】：

它们仍然会导致错误。我认为加载顺序或其他东西把这些搞砸了。我在我知道它们的位置添加了依赖项，但不确定是否需要添加更多。
您还应该禁用它在function.php或footer.php中调用的每个js文件然后无法一一检查并检查哪些js发生冲突。这可能会有所帮助。

【解决方案2】：

我所做的是尊重 Bootstrap 提供给我的 URL (https://getbootstrap.com/docs/4.4/getting-started/introduction/)：

然后在我的函数中，我只包含我需要的引用：

function fyxt_custom_scripts(){
    wp_register_style(('prefix_bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css', array(), '4.4.1', 'all');


    wp_register_script('popper', 'https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js', array( 'jquery' ),'1.16.0', true );


    wp_register_script('prefix_bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', array( 'jquery', 'popper' ),'4.4.1', true );
}
add_action( 'wp_enqueue_scripts', 'fyxt_custom_scripts' );

我遵循 Bootstrap 建议并将脚本调用放在页脚中。之后确保您可以调用函数 <?php get_header() ?> 和 <?php get_footer() ?> 在 <head>...</head> HTML 标记之间和 </body> HTML 标记之前分别在您的主题中。

【讨论】：

【解决方案3】：

似乎 PLUpload 是导致问题的原因。我尝试了许多不同的配置和加载命令，它似乎总是与 plupload 中断。我决定不使用它，而是使用另一个类似的插件 Dropzone。 PLupload 已经有几年没有更新了，所以不管怎样，最好还是使用最近更新/现代的风格。谢谢大家的提示和建议。

【讨论】：