Как подключить Bootstrap к WordPress через CDN

Правильное подключение Twitter Bootstrap 4 к WordPress (CDN integrity)

Стили и скрипты Bootstrap могут повлиять на общее оформление вашего сайта. Применяйте их только убедившись, что установленная тема WordPress полностью совместима с данным набором инструментов.

При подключении Фреймворка Twitter Bootstrap 4 к движку WordPress можно использовать CDN. Это удобно тем, что кроме высокой скорости загрузки Bootstrap будет проще обновить, не заливая каждый раз файлы физически на свой хостинг.

Используйте атрибут целостности «integrity», это позволит не беспокоиться о совместимости версий. Все изменения будут под контролем веб-мастера.

Обсудить на форуме

Пример подключения Bootstrap 4:

/**
 * Enqueue scripts and styles.
 */
function bootstrap_scripts() {
	wp_enqueue_style( 'bootstrap-style', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css', array(), '4.6.0' );
	wp_enqueue_script( 'bootstrap-script', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js', array( 'jquery' ), '4.6.0', true );
}
add_action( 'wp_enqueue_scripts', 'bootstrap_scripts' );

Подключать скрипты по правилам CMS следует через хук wp_enqueue_scripts.

Интеграцию целостности можно добавить к уже зарегистрированным выше скриптам при помощи фильтров style_loader_tag для CSS-стилей и script_loader_tag для JS-скриптов.

Этот код не является обязательным для работы Bootstrap, но добавит надёжности вашему сайту. Браузер пользователя проверит загружаемые файлы на предмет их повреждения или подмены:

/**
 * Add integrity/crossorigin for CDN styles.
 * 
 * @param  string $html   The <style> tag for the enqueued style.
 * @param  string $handle The style's registered handle.
 * @return string         The 'async' attribute.
 */
function bootstrap_style_loader_tag( $html, $handle ) {
	$hash = 'sha512-P5MgMn1jBN01asBgU0z60Qk4QxiXo86+wlFahKrsQf37c9cro517WzVSPPV1tDKzhku2iJ2FVgL67wG03SGnNA==';

	if ( 'bootstrap-style' === $handle ) {
		$html = str_replace( ' />', ' integrity=\'' . $hash . '\' crossorigin=\'anonymous\' />', $html );
	}

	return $html;
}
add_filter( 'style_loader_tag', 'bootstrap_style_loader_tag', 10, 2 );

/**
 * Add integrity/crossorigin for CDN scripts.
 * 
 * @param  string $tag    The <script> tag for the enqueued script.
 * @param  string $handle The script's registered handle.
 * @return string         The 'async' attribute.
 */
function bootstrap_script_loader_tag( $tag, $handle ) {
	$hash = 'sha512-wV7Yj1alIZDqZFCUQJy85VN+qvEIly93fIQAN7iqDFCPEucLCeNFz4r35FCo9s6WrpdDQPi80xbljXB8Bjtvcg==';

	if ( 'bootstrap-script' === $handle ) {
		$tag = str_replace( '></script>', ' integrity=\'' . $hash . '\' crossorigin=\'anonymous\'></script>', $tag );
	}

	return $tag;
}
add_filter( 'script_loader_tag', 'bootstrap_script_loader_tag', 10, 2 );

В примере указаны следующие идентификаторы: bootstrap-style, bootstrap-script. Теперь вы можете удобно редактировать как стили, так и JS скрипты, добавленные при помощи CDN.

Добавьте эти функции в файл functions.php текущей темы.

Вычисление хэш-суммы файлов

Это небольшое дополнение, в котором я расскажу откуда взялся код в переменной $hash. Для упрощения задачи можно воспользоваться сервисом https://cdnjs.com/libraries/twitter-bootstrap/4.6.0 и просто скопировать требуемые коды. Чтобы подробнее объяснить структуру, добавлю ручной вариант их создания.

Для вычисления кода sha512 потребуется доступ к консоли Bash в операционной системе Linux. Можно получить доступ по SSH у своего хостинг-провайдера и подключиться при помощи программы Putty. На хостинге может присутствовать и собственная консоль, поинтересуйтесь у тех. поддержки.

Посмотрим на примере файла стилей «bootstrap.min.css». Команда получения Hash удалённого файла выглядит следующим образом:

printf 'sha512-'; curl -s https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css | openssl dgst -sha512 -binary | openssl base64 -A; echo

Полученный результат помещаем в перемеренную $hash:

$hash = 'sha512-P5MgMn1jBN01asBgU0z60Qk4QxiXo86+wlFahKrsQf37c9cro517WzVSPPV1tDKzhku2iJ2FVgL67wG03SGnNA==';