Как подключить Bootstrap 4 к теме?

Question

Как подключить Bootstrap 4 к теме?

16 июн. 2018 г., 20:07:36

Просмотры: 29.9K

Голосов: 3

Я пытался подключить Bootstrap через functions.php

wp_enqueue_style('bootstrap4', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css');
wp_enqueue_script( 'boot1','https://code.jquery.com/jquery-3.3.1.slim.min.js');
wp_enqueue_script( 'boot2','https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js');
wp_enqueue_script( 'boot2','https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js');

CSS похоже работает, но ни один из JS файлов не работает... не уверен, что я делаю неправильно..

пожалуйста, помогите спасибо

User

100

wp enqueue script twitter bootstrap

Комментарии

Использует ли ваша тема wp_head()?

Nathan Johnson

16 июн. 2018 г. 20:25:10

да, я использую и подтверждаю, что она есть.. проблема кажется в следующем: wp_enqueue_script( 'boot2','https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js', array( 'jquery' ),'',true ); не загружается.. остальные загружаются в заголовке

User

16 июн. 2018 г. 20:45:40

Все ответы на вопрос

Комментарии

Привет... все еще не работает.. wp_enqueue_script( 'boot2','https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js', array( 'jquery' ),'',true ); этот скрипт по каким-то причинам не загружается.. другие подгружаются

User

16 июн. 2018 г. 20:46:45

Исправил... проблема была в $handle ..boot2, boot2 :).. спасибо за помощь

User

16 июн. 2018 г. 20:49:49

Можно использовать правильные имена, такие как 'popper', 'bootstrap' и указать 'popper' как зависимость для скрипта 'bootstrap'. Вам не нужно подключать jQuery slim :)

Elex

16 июн. 2018 г. 20:55:05

И как я могу добавить CSS и скрипты, включая теги 'origin' и 'integrity', которые требуются согласно Bootstrap?

GyRo

5 нояб. 2018 г. 15:11:43

Если вы хотите, чтобы стили библиотеки загружались перед всеми остальными стилями, а стили темы загружались после всех остальных (со стилями плагинов посередине), вам нужно использовать две функции. Первая, с приоритетом "9", будет использоваться для загрузки стилей библиотеки, а вторая, с приоритетом "10", будет использоваться для загрузки файлов темы. Использование только одной функции для загрузки всего в теме приводит к ситуации, когда стили плагинов загружаются первыми.

aldemarcalazans

2 июл. 2021 г. 20:30:24

Показать остальные 4 комментариев

Попробуйте это:

function abc_load_my_scripts() {
  wp_enqueue_script( 'boot1','https://code.jquery.com/jquery-3.3.1.slim.min.js', array('jquery'));
  wp_enqueue_script( 'boot2','https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', array('jquery'));
  wp_enqueue_script( 'boot3','https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js', array('jquery'));
}
add_action( 'wp_enqueue_scripts', 'abc_load_my_scripts', 999);

С последним аргументом array('jquery') вы указываете WordPress загрузить скрипт ПОСЛЕ jQuery. Обратите внимание, что каждый скрипт должен использовать уникальный хэндл (первый параметр).

Больше информации здесь.

Когда вы проверяете <head>, вы уверены, что скрипты не загружаются?

С уважением, Бьёрн

Bjorn

535

16 июн. 2018 г. 20:11:07

Комментарии

Я попробовал вышеуказанное, но JavaScript файлы по-прежнему не загружаются... Из-за этого субменю и переключатель адаптивного меню не работают... Я использую Chrome, и в консоли нет ошибок.

User

16 июн. 2018 г. 20:19:41

Я обновил свой ответ.

Bjorn

16 июн. 2018 г. 20:23:43

Исправил... проблема была с $handle ..boot2, boot2 :).. спасибо за помощь

User

16 июн. 2018 г. 20:50:03

Как обычно на Stackoverflow неправильные ответы получают голоса и выбираются как правильные, а единственно верные ответы даже не получают ни одного голоса. Вы получили мой голос сейчас, потому что использовали правильный способ добавления чего-либо в очередь в WP.

User

11 авг. 2021 г. 13:53:06

Akshat 1.2K · Accepted Answer · 2018-06-16T20:25:10Z

Вы можете использовать хуки действий (action hooks) для подключения скриптов и стилей на сайт.

function my_scripts() {
    wp_enqueue_style('bootstrap4', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css');
    wp_enqueue_script( 'boot1','https://code.jquery.com/jquery-3.3.1.slim.min.js', array( 'jquery' ),'',true );
    wp_enqueue_script( 'boot2','https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', array( 'jquery' ),'',true );
    wp_enqueue_script( 'boot3','https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js', array( 'jquery' ),'',true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

Если вы хотите добавить скрипты после jQuery, вы можете использовать массив зависимостей jQuery. Последний аргумент true указывает на подключение JS в подвале (footer) страницы. Если вам нужно подключить JS в заголовке (header), вы можете удалить этот параметр.