如何在WordPress中实现Bootstrap4

Question

我在WordPress中看到了一些主题，它是使用Bootstrap4框架创建的。

Bootstrap 4需要jQuery v3.2.1。

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

在我的例子中，我购买了一个Bootstrap4主题，并在我的WordPress站点上实现了它。然而，添加jQuery v3.2.1作为Boostrap4的要求，我的4个插件有冲突。

所以我搞不懂主题的开发者是怎么做到的？

Answer 1

我刚刚以正确的wordpress方式使用CDN (首选方法)将引导程序(css、js和popper.js)添加到我的主题中。

我花了一段时间才弄清楚如何向样式和脚本导入添加完整性和crossorigin标签，如'BootstrapCDN‘部分下https://getbootstrap.com/上的示例所示。

这就是问题所在。要将bootstrap添加到主题中，请将此代码添加到主题中的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' );

Answer 2

您可以将wordpress的默认jQuery出队，然后使用以下代码将您的bootstarp 4jQuery入队。

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 3

如果你想同时加载两个版本的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;
});