WordPress Bootstrap CDN

Правильное подключение 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 текущей темы.

onstartup.ru
Метки: , ,