WordPress Bootstrap CDN

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

При подключении Фреймворка Twitter Bootstrap к движку 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.1.3/css/bootstrap.min.css', array(), '4.1.3' );

	// Scripts
	wp_enqueue_script( 'popper-js', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', array( 'jquery' ), '1.14.3', true );
	wp_enqueue_script( 'bootstrap-js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js', array( 'jquery' ), '4.1.3', true );
}
add_action( 'wp_enqueue_scripts', 'new_scripts' );

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

/**
 * Add integrity/crossorigin for CDN styles.
 */
function new_style_loader_tag( $html, $handle ) {
	$scripts_to_load = array(
		array(
			( 'name' )      => 'bootstrap-style',
			( 'integrity' ) => 'sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO',
		)
	);

	$key = array_search( $handle, array_column( $scripts_to_load, 'name' ) );

	if ( $key !== false ) {
		$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.
 */
function new_script_loader_tag( $tag, $handle ) {
	$scripts_to_load = array(
		array(
			( 'name' )      => 'popper-js',
			( 'integrity' ) => 'sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49',
		),
		array(
			( 'name' )      => 'bootstrap-js',
			( 'integrity' ) => 'sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy',
		)
	);

	$key = array_search( $handle, array_column( $scripts_to_load, 'name' ) );

	if ( $key !== false ) {
		$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
Метки: , ,