Popper 已加载但无法在 Wordpress 上使用 bootstrap 4答案

【问题标题】：Popper loaded but not working with bootstrap 4 on WordpressPopper 已加载但无法在 Wordpress 上使用 bootstrap 4
【发布时间】：2020-01-20 16:17:18
【问题描述】：

我在 Wordpress 上使用带有 Bootstrap 4 的 Popper，并拥有 DataTables 和 Navwalker。我的下拉菜单和汉堡包不起作用。 Popper 正在加载，但我怀疑 css 和 js 文件的顺序可能是问题所在。请有任何想法。这是我正在加载的内容。

<?php

function load_stylesheets()
{
    wp_enqueue_style( 'bootstrap', get_template_directory_uri().'/css/bootstrap.min.css', array(), false,'all');
    wp_enqueue_style( 'datatables-bootstrap4-css', '/DataTables/DataTables-1.10.20/css/dataTables.bootstrap4.min.css');
    wp_enqueue_style( 'datatables-responsive-css', '/DataTables/Responsive-2.2.3/css/responsive.bootstrap4.min.css');   
    wp_enqueue_style( 'datatables-buttons', '/DataTables/Buttons-1.6.1/css/buttons.dataTables.min.css');    
    wp_enqueue_style( 'style', get_template_directory_uri().'/style.css', array(), false,'all');    


}
add_action('wp_enqueue_scripts', 'load_stylesheets');

function include_scripts() 
{
    wp_deregister_script('jquery');
    wp_enqueue_script( 'jquery', get_template_directory_uri().'/js/jquery-3.4.1.min.js', '', 1, false);
    wp_enqueue_script('popper', get_template_directory_uri().'/js/popper.min.js', '', 1, false);
    wp_enqueue_script( 'datatables-jquery', '/DataTables/DataTables-1.10.20/js/jquery.dataTables.min.js','', 1, false);
    wp_enqueue_script( 'datatables-bootstrap4', '/DataTables/DataTables-1.10.20/js/dataTables.bootstrap4.min.js','', 1, false);
    wp_enqueue_script( 'datatables-responsive-js', '/DataTables/Responsive-2.2.3/js/dataTables.responsive.min.js','', 1, false);
    wp_enqueue_script( 'datatables-responsive-bootstrap4-js', '/DataTables/Responsive-2.2.3/js/responsive.bootstrap4.min.js','', 1, false);
    wp_enqueue_script( 'datatables-buttons-js', '/DataTables/Buttons-1.6.1/js/dataTables.buttons.min.js','', 1, false);

}
add_action( 'wp_enqueue_scripts', 'include_scripts' );

add_theme_support('menus');


/**
 * Register Custom Navigation Walker
 */
function register_navwalker(){
    require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}
add_action( 'after_setup_theme', 'register_navwalker' );

register_nav_menus(
    array(
        'top-menu' => __('Top Menu', 'theme'),
        'footer-menu' => __('Footer Menu', 'theme'),
    )

);


?>

【问题讨论】：

标签： wordpress datatables popper.js wp-nav-walker

【解决方案1】：

解决了。弹出后 bootstrap.min.js 丢失。

    wp_deregister_script('jquery');
    wp_enqueue_script( 'jquery', get_template_directory_uri().'/js/jquery-3.4.1.min.js');
    wp_enqueue_script('popper', get_template_directory_uri().'/js/popper.min.js');    
    wp_enqueue_script( 'bootstrap', get_template_directory_uri().'/js/bootstrap.min.js');

    wp_enqueue_script( 'datatables-jquery', '/DataTables/DataTables-1.10.20/js/jquery.dataTables.min.js');
    wp_enqueue_script( 'datatables-bootstrap4', '/DataTables/DataTables-1.10.20/js/dataTables.bootstrap4.min.js');
    wp_enqueue_script( 'datatables-responsive-js', '/DataTables/Responsive-2.2.3/js/dataTables.responsive.min.js');
    wp_enqueue_script( 'datatables-responsive-bootstrap4-js', '/DataTables/Responsive-2.2.3/js/responsive.bootstrap4.min.js');
    wp_enqueue_script( 'datatables-buttons-js', '/DataTables/Buttons-1.6.1/js/dataTables.buttons.min.js');

【讨论】：