
Правильное подключение Twitter Bootstrap 4 к WordPress (CDN integrity)
При подключении Фреймворка Twitter Bootstrap 4 к движку WordPress можно использовать CDN. Это удобно тем, что кроме высокой скорости загрузки Bootstrap будет проще обновить, не заливая каждый раз файлы физически на свой хостинг. Используйте атрибут целостности «integrity», это позволит не беспокоиться о совместимости версий. Все изменения будут под контролем веб-мастера.
Пример подключения Bootstrap 4:
/** * Enqueue scripts and styles. */ function new_scripts() { // Styles wp_enqueue_style( 'bootstrap-style', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css', array(), '4.3.1' ); // Scripts wp_enqueue_script( 'popper-js', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js', array( 'jquery' ), '1.14.7', true ); wp_enqueue_script( 'bootstrap-js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', array( 'jquery' ), '4.3.1', true ); } add_action( 'wp_enqueue_scripts', 'new_scripts' );
Интеграцию целостности можно добавить к уже зарегистрированным выше скриптам при помощи фильтров style_loader_tag
для CSS стилей и script_loader_tag
для JS для скриптов:
/** * 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 new_style_loader_tag( $html, $handle ) { $scripts_to_load = array( array( ( 'name' ) => 'bootstrap-style', ( 'integrity' ) => 'sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T', ), ); $key = array_search( $handle, array_column( $scripts_to_load, 'name' ) ); if ( false !== $key ) { $html = str_replace( '/>', ' integrity=\'' . $scripts_to_load[ $key ]['integrity'] . '\' crossorigin=\'anonymous\' />', $html ); } return $html; } add_filter( 'style_loader_tag', 'new_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 new_script_loader_tag( $tag, $handle ) { $scripts_to_load = array( array( ( 'name' ) => 'popper-js', ( 'integrity' ) => 'sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1', ), array( ( 'name' ) => 'bootstrap-js', ( 'integrity' ) => 'sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM', ), ); $key = array_search( $handle, array_column( $scripts_to_load, 'name' ) ); if ( false !== $key ) { $tag = str_replace( '></script>', ' integrity=\'' . $scripts_to_load[ $key ]['integrity'] . '\' crossorigin=\'anonymous\'></script>', $tag ); } return $tag; } add_filter( 'script_loader_tag', 'new_script_loader_tag', 10, 2 );
В примере указаны следующие стили: bootstrap-style
, popper-js
, bootstrap-js
.
Подключать скрипты по правилам CMS следует через хук wp_enqueue_scripts
.
Теперь вы можете удобно редактировать как стили, так и JS скрипты, добавленные при помощи CDN.
Добавьте эти функции в файл functions.php текущей темы.
50+ строчек кода и ни одного упоминания где и куда это всё пишется... ?
Прочитайте, пожалуйста, заключительную цитату: Добавьте эти функции в файл functions.php текущей темы.
Всё отлично работает. Благодарю! По интеграции целостности подскажи - зачем она нужна?
Bootstrap постоянно совершенствуется добавляя новые версии. В нововведениях может измениться ряд классов и тогда придётся переделывать вёрстку сайта. Чтобы загружать только определённую версию и не столкнуться с ошибками совместимости применяется атрибут целостности. Кроме того, CDN integrity предотвращает загрузку несоответствующего содержимого повышая безопасность передачи данных.