Стили и скрипты

В этой статья описываются различные аспекты подключения в сайт стилей и скриптов. Правильное включение, а также отключение не нужных стилей и скриптов.

Подключение стилей

wp_enqueue_style( 'dop-style', get_template_directory_uri() . '/dop-style.css' , array('style'), '1.0' , 'screen' );

dop-style — id подключаемого стиля
array(‘style’) — параметр задающий зависимость подключаемого стиля, т.е. данный стиль не подключится до тех пор пока не подключится стиль style, можно прописать несколько стилей.
1.0 — версия стиля
screen — параметр медиазапроса (когда подгружать данный стиль).

После активации привязываем к хуку

wp_enqueue_scripts — если нужно подгрузить вверху (для тех стилей которые нужно загружать быстрее, блоки на которые они воздействуют находятся в видимой части или принципиально влияют на верстку).

wp_footer (или любой другой хук) — если нужно подгрузить внизу (для большинства стилей)

admin_enqueue_scripts — если нужно подключить скрипт или стиль к админке.

Подключение скриптов

wp_enqueue_script( 'parallax', get_template_directory_uri() . '/js/parallax.min.js' , array('jquery'), '1.0' , true );

parallax — id подключаемого скрипта
array(‘jquery’) — параметр задающий зависимость подключаемого скрипта, т.е. данный скрипт не подключится до тех пор пока не подключится скрипт jquery, можно прописать несколько скриптов.
1.0 — версия скрипта
true — выводить скрипт в подвале, если false — скрипт будет подгружаться в header.

После активации привязываем к хуку wp_enqueue_scripts, и в зависимости от того вверху нужен скрипт или внизу прописываем последний параметр активации (true/false).

Правильное подключение библиотеки jQuery

// Правильное подключение библиотеки jquery
function my_scripts_method() {
	wp_deregister_script( 'jquery' );
	wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js');
	wp_enqueue_script( 'jquery', true );
}    
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Опытным путем выяснил, что быстрее скрипт загружается непосредственно со своего сервера, нежели удаленно с серверов google. Исправленный и дополненный скрипт подключения jquery:

// Proper connection jquery library
function my_scripts_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', get_template_directory_uri() . '/js/jquery.min.js'); 
	wp_enqueue_script( 'jquery', '1.10.2', true );
}    
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

В рамках ускорения сайта можно большинство скриптов отложить (defer). Делается это с помощью такой функции:

// Отложенная загрузка скриптов
add_filter( 'script_loader_tag', 'wsds_defer_scripts', 10, 3 );
function wsds_defer_scripts( $tag, $handle, $src ) {

	// The handles of the enqueued scripts we want to defer
	$defer_scripts = array( 
		'site-arrows',
		'choice-view-scripts',
		'sitefancybox',
		'sitefancybox-mousewheel',
		'sitefancybox-init',
		'feedback-form',
		'hovergallery',
		'lazyload',
		'site-tabs',
		'site-windows',
		'wp-embed',
		'contact-form-7',
		'wpmss_scroll_scripts',
		'wordfence',
	);

    if ( in_array( $handle, $defer_scripts ) ) {
        return '<script src="' . $src . '" defer="defer" type="text/javascript"></script>' . "\n";
    }
    
    return $tag;
}

В массив $defer_scripts прописываем зарегистрированные названия функций (contact-form-7, wp-embed и т.д.), которые необходимо отложить. Иногда непросто определить название скрипта, например в сторонних плагинах. Чтобы их вычислить наверняка, нужно воспользоваться таким кодом, который выведет все зарегистрированные названия.

add_action( 'wp_print_scripts', 'wsds_detect_enqueued_scripts' );
function wsds_detect_enqueued_scripts() {
	global $wp_scripts;
	foreach( $wp_scripts->queue as $handle ) :
		echo $handle . ' | ';
	endforeach;
}

Отложенная загрузка стилей

У стилей нет параметра defer, но можно применить такую хитрость: подгружать стили с помощью jQuery.

$(document).ready(function() {  	
    $("head").append("<link rel='stylesheet' id='animate-css' href='/wp-content/plugins/site-windows/animate.min.css' type='text/css' media='all' />");
});

Для простоты такие подгрузки лучше делать прямо в скриптах в которых нужны эти стили. Но нужно понимать, что нарушается система последовательности подключения стилей WP, т.е. есть вероятность подключить таким образом два одинаковых стиля.

Новая версия jquery и старые методы (например .live)

Старые плагины и скрипты могут не работать с новой библиотекой jquery, т.к. не поддерживают некоторые методы из предыдущих версия. Чтобы этого избежать необходимо подключать «Переходную» библиотеку jquery-migrate, чтобы получить обратную совместимость.

wp_enqueue_script( 'jquery-migrate', get_template_directory_uri() . '/js/jquery-migrate-1.2.1.min.js' , 'jquery', '1.2.1' , true );

Отключение скриптов и стилей

Чтобы отключить скрипт, например какого-либо плагина, нужно при загрузке страницы, найти в исходном коде строку с его подключением:

<link rel='stylesheet' id='contact-form-7-css'  href='https://opttour.ru/wp-content/plugins/contact-form-7/includes/css/styles.css' type='text/css' media='all'/>

Копируем id стиля и вставляем его в функцию

add_action( 'wp_print_styles', 'disable_plugins_styles', 100 );
 
function disable_plugins_styles() {
  wp_deregister_style( 'contact-form-7' ); 
}

С недавнего времени стили CF7 отключаются так:

function disable_plugins_styles() {  wp_deregister_style( 'contact-form-7' ); }
add_action( 'wpcf7_load_css', 'disable_plugins_styles' );

Отключить скрипт немного сложнее. Поняв какой плагин включает скрипт, нужно перейти в файлы плагина и найти функцию включения скрипта, скопировав id мы сможем отключить его.

add_action( 'wp_print_scripts', 'disable_plugins_scripts', 100 );

function disable_plugins_scripts() {
	wp_deregister_script( 'id_скрипта' );
}

Принцип подключения

Добавляем файлы таким образом, можно в одной функции, можно раздельно:

wp_enqueue_style( 'dop-style', get_template_directory_uri() . '/dop-style.css' , array('style'), '1.0' , 'screen' );
wp_enqueue_script( 'parallax', get_template_directory_uri() . '/js/parallax.min.js' , array('jquery'), '1.0' , true );

После подключения, в исходном коде проверяем последовательность подключения. Если необходимо вносим коррективы.
Если есть потребность сжать или объединить стили — можно воспользоватся плагином — JS & CSS Script Optimizer. Но реально ощутимого ускорения я не увидел.

Существуют разные функции для подключения скриптов и стилей:

• wp_enqueue_script
• wp_print_styles
• wp_footer

Но реально корректно работает из них wp_enqueue_script и нужно подключать с помощью него.

Не понимаю я систему приоритетов, например когда мы прописываем цифру:

add_action( 'wp_enqueue_scripts', 'addsitehovergallery', 19 );

скрипт работает и даже изменяется приоритет, но стоит написать например 20 — скрипт перестает работать. На последовательность влияют условия (is_home), нарушая ее.

Закономерности: wp_enqueue_scripts подключают стили только в header (и в functions и в плагинах). Действует приоритет между стилями подключенными wp_enqueue_scripts. То же самое справедливо для стилей при подключении с wp_print_styles Если нужно принудительно поместить стиль в подвал, то нужно использовать либо wp_footer, либо get_footer. wp_enqueue_scripts подключает скрипты в зависимости от последнего атрибута либо в header, либо в footer. Но обычно применяется дополнительная функция переноса всех скриптов в footer.

//Переместить все скрипты в footer (в т.ч. и скрипты плагинов)
add_action( 'wp_enqueue_scripts', 'remove_head_scripts' );
function remove_head_scripts() { 
	remove_action('wp_head', 'wp_print_scripts'); 
	remove_action('wp_head', 'wp_print_head_scripts', 9); 
	remove_action('wp_head', 'wp_enqueue_scripts', 1);

	add_action('wp_footer', 'wp_print_scripts', 5);
	add_action('wp_footer', 'wp_print_head_scripts', 5);
	add_action('wp_footer', 'wp_enqueue_scripts', 5);  
}

Поэтому приоритет скриптов не работает. Если нужно поместить некоторые скрипты ниже других можно прописывать им либо wp_footer, либо get_footer.

Зависимости скриптов и стилей

Нужно более подробно прописывать зависимости скриптов и стилей:

wp_register_script( 'hovergallery', plugins_url('/site-hovergallery.js', __FILE__), array('jquery', 'sitefancybox'), null, true );

И еще один инструмент — регистрация скрипта или стиля и его инициализация в момент использования. Пример с шорткодом:

function addsitehovergallery()  { 
wp_register_script( 'hovergallery', plugins_url('/site-hovergallery.js', __FILE__), array('jquery', 'sitefancybox'), null, true );		
}  
add_action( 'wp_enqueue_scripts', 'addsitehovergallery', 19 );

function sitehovergallery( $atts, $content = null ) {
	wp_enqueue_script ('hovergallery');
	return '<div class="hovergallery">'.$content.'</div>';  
}  
add_shortcode( 'hovergallery', 'sitehovergallery' );

Скрипт подключиться только при использовании шорткода hovergallery.

Подключение скриптов в админке

admin_head — хук подключения только в админке.

function webs__admin_scripts(){
	wp_enqueue_script('script-admin', get_template_directory_uri() . '/js/script_admin.js', array(), null, true);
}
add_action('admin_head', 'webs__admin_scripts');

Скрипт или стиль не подключается

Если скрипт или стиль не подключается — это может быть по нескольким причинам:

1. Медиазапросы (для стилей) или условие is_mobile (для стилей и скриптов)
2. Скрипт или стиль с таким же названием уже существует и вызывается первее
3. В случае со скриптами, конфликты с другими скриптами или версией jquery

Поделиться в соц. сетях: