如何在WordPress中实现Bootstrap 4

Question

我在WordPress中看到了一些使用Bootstrap 4框架创建的主题。

Bootstrap 4需要jQuery v 3.2.1。

目前，WordPress核心jQuery版本是v 1.12.4。他们使用旧的jQuery版本来支持旧的主题和插件，这些插件在jQuery v.1.x.x中编码，以便在旧浏览器中兼容。

就我而言，我已经购买了一个Bootstrap 4主题并在我的WordPress网站上实现它。但是，添加jQuery v 3.2.1作为Boostrap 4要求，我的4个插件就有冲突。

所以我很困惑这个主题的开发者如何做到这一点？

Answer 1

你可以使wordpress的默认jQuery出列，然后使用下面的代码将你的bootstrap 4 jquery入队。

add_action("wp_enqueue_scripts", "bootstarp_jquery_enqueue", 11);
function bootstarp_jquery_enqueue() {
   wp_deregister_script('jquery');
   wp_register_script('jquery', "//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js", false, null);
   wp_enqueue_script('jquery');
} 

如需更多帮助，请访问以下链接：click here

Answer 2

如果你想同时加载2个版本的jQuery，你应该确保首先加载非Wordpress版本。这是因为Wordpress发布的版本在compatibility mode中运行，有效地恢复了对其他版本的$引用。

如果您只想为某些页面或模板使用特定的jQuery版本，则可以使用WordPress Conditional Tags。

示例：仅为前端调用排队jQuery 3+，您可以：

add_action( 'wp_enqueue_scripts', function() {
    if ( !is_admin() ) :
       wp_deregister_script( 'jquery' );
       wp_enqueue_script( 'jquery', 'path-to-your-jquery-lib' );
    endif;
});

如果您与依赖于特定页面上的旧jQuery版本的插件存在冲突，则可以排除这些页面：

add_action( 'wp_enqueue_scripts', function() {
    if ( !is_admin() && !is_page( 'my-page' ) ) :
       wp_deregister_script( 'jquery' );
       wp_enqueue_script( 'jquery', 'path-to-your-jquery-lib' );
    endif;
});

Answer 3

我刚刚以正确的wordpress方式使用CDN（首选方法）将bootstrap（css，js和popper.js）添加到我的主题中。

我花了一些时间来弄清楚如何在样式和脚本导入中添加完整性和crossorigin标记，如“BootstrapCDN”部分下https://getbootstrap.com/上的示例所示。

所以这就是它。要为主题添加引导程序，请将其添加到主题中的functions.php文件中：

/**
 * Load bootstrap from CDN
 * https://getbootstrap.com/
 *
 * Added functions to add the integrity and crossorigin attributes to the style and script tags.
 */
function enqueue_load_bootstrap() {
    // Add bootstrap CSS
    wp_register_style( 'bootstrap-css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css', false, NULL, 'all' );
    wp_enqueue_style( 'bootstrap-css' );

    // Add popper js
    wp_register_script( 'popper-js', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js', ['jquery'], NULL, true );
    wp_enqueue_script( 'popper-js' );

    // Add bootstrap js
    wp_register_script( 'bootstrap-js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', ['jquery'], NULL, true );
    wp_enqueue_script( 'bootstrap-js' );
}

// Add integrity and cross origin attributes to the bootstrap css.
function add_bootstrap_css_attributes( $html, $handle ) {
    if ( $handle === 'bootstrap-css' ) {
        return str_replace( '/>', 'integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />', $html );
    }
    return $html;
}
add_filter( 'style_loader_tag', 'add_bootstrap_css_attributes', 10, 2 );

// Add integrity and cross origin attributes to the bootstrap script.
function add_bootstrap_script_attributes( $html, $handle ) {
    if ( $handle === 'bootstrap-js' ) {
        return str_replace( '></script>', ' integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>', $html );
    }
    return $html;
}
add_filter('script_loader_tag', 'add_bootstrap_script_attributes', 10, 2);

// Add integrity and cross origin attributes to the popper script.
function add_popper_script_attributes( $html, $handle ) {
    if ( $handle === 'popper-js' ) {
        return str_replace( '></script>', ' integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>', $html );
    }
    return $html;
}
add_filter('script_loader_tag', 'add_popper_script_attributes', 10, 2);

add_action( 'wp_enqueue_scripts', 'enqueue_load_bootstrap' );