时间戳

首页 > 解决方案 > 如何在 WordPress 中实现 Bootstrap 4

php - 如何在 WordPress 中实现 Bootstrap 4

问题描述

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

Bootstrap 4 需要 jQuery v 3.2.1。

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

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

所以我很困惑主题的开发者是如何做到的？

标签： phphtmlcsswordpresscontent-management-system

解决方案

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

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

就这样吧。要将引导程序添加到您的主题，请将其添加到主题内的 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' );

推荐阅读