/ Сайтостроение / Wordpress / Стили и скрипты

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

22.12.2016

704

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

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

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 (или любой другой хук) — если нужно подгрузить внизу (для большинства стилей)

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

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 откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью.
— При наличии атрибута async браузер при возможности запускает скрипт асинхронно. Это означает, что указанный в атрибуте src файл будет выполняться без ожидания загрузки и отображения веб-страницы. В то же время и страница не ожидает результата выполнения скрипта, а продолжает загружаться как обычно.
Если данные атрибуты не указаны, то скрипты будут грузится последовательно.

В рамках ускорения сайта можно большинство скриптов отложить (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, т.е. есть вероятность подключить таким образом два одинаковых стиля.

Почему то в мобильной версии, при подсчете скорости в PageSpeed Insights, стили все равно учитываются

Новая версия 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' ); 
}

Отключить скрипт немного сложнее. Поняв какой плагин включает скрипт, нужно перейти в файлы плагина и найти функцию включения скрипта, скопировав 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. Но реально ощутимого ускорения я не увидел.

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

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

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

Поделится информацией с друзьями

  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Стили и скрипты
Создаем анимацию Scroll Down
Рекомендации для васСоздаем анимацию Scroll DownOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.