Как реализовать Bootstrap 4 в WordPress

Question

Я видел какую-то тему в WordPress, которая создана с использованием фреймворка Bootstrap 4.

Для Bootstrap 4 требуется jQuery v 3.2.1.

В настоящее время версия jQuery для ядра WordPress - v 1.12.4.Они используют старую версию jQuery для поддержки старых тем и плагинов, которые закодированы в jQuery v. 1.xx для совместимости со старыми браузерами.

В моем случае я купил тему Bootstrap 4 и реализовал ее намой сайт WordPress.Однако, добавив jQuery v 3.2.1 в качестве требования Boostrap 4, у 4 из моих плагинов возник конфликт из-за этого.

Так что я не совсем понимаю, как разработчик темы делает это?

Answer 1

Если вы хотите загрузить 2 версии jQuery одновременно, вы должны убедиться, что версия, отличная от Wordpress, загружена первой .Это связано с тем, что версия, поставляемая Wordpress, работает в режиме совместимости , эффективно восстанавливая ссылку $ на другую версию.

Если вы хотите иметь определенную версию jQuery для определенных страниц илиТолько шаблоны, вы можете использовать WordPress Условные теги .

Пример: поставить в очередь 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 2

Я только что добавил bootstrap (css, js и popper.js) в мою тему, используя CDN (предпочтительный метод), правильным способом wordpress.

Мне понадобилось время, чтобы понять, как добавить целостностьи перекрестные теги для импорта стилей и сценариев, как показано в примере на 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' );

Answer 3

Вы можете удалить jQuery из WordPress по умолчанию, а затем поставить в очередь загрузочный пакет 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');
} 

Для получения дополнительной справки см. Эту ссылку: нажмите здесь