Подключение и отключение скриптов и стилей на отдельной странице, записи WordPress


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

Бывают такие ситуации, что подключение всех скриптов к отдельной странице совсем не к чему. Ладно если это статический HTML сайт. Тут все предельно ясно, размещаешь скрипты только на нужных страницах. А как же тогда подключить или наоборот, отключить скрипт или файлы стилей на определенной странице или в записи WordPress?

Факт

Подгрузка скриптов и стилей влияет на скорость загрузки сайта в целом. Об этом подробнее в статье Скорость загрузки сайта

Итак, давайте по порядку.


Подключение скриптов и стилей к отдельной странице или записи WordPress


Обратите внимание !

Отключать и подключать скрипты и стили WordPress нужно в файле functions.php, чтобы не повторяться в дальнейшем.

Здесь все предельно просто, только нужно узнать ID страницы или записи, в которой нужно отключить, подключить файл скрипта или файл стилей. Для этого зайдите в админку во вкладку все записи или страницы и наведите курсор на ссылку записи, страницы. На мониторе слева вылезет что-то типа

подключение скриптов WordPress
2780 — это и есть ID записи.

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

function portfolio_scripts() {
if ( is_single('6') )
wp_enqueue_script( 'izotope', get_template_directory_uri() . '/js/izotope.js', array( 'jquery' ), '2.9', true );
}
add_action( 'wp_enqueue_scripts', 'portfolio_scripts' );

Комментирую :
if ( is_single('6') ) — условие для скрипта. Если запись с ID 6, то подключать скрипт. Если это будет страница, а не запись пишите is_page('6')

'/js/izotope.js' — папка, в которую помещен скрипт и сам скрипт. Обязательно в директории темы.

'izotope' — уникальное название скрипта. Оно нам пригодится ниже, для отключения скрипта.

true — подгружаем скрипт после загрузки страницы. Если при этом параметре скрипт не работает, меняем на false.

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

 function portfolio_styles() {
if ( is_single('6') )
wp_enqueue_style('portfolio', get_template_directory_uri() . '/css/portfolio.css', array(), '1.0' );
}
add_action( 'wp_enqueue_styles', 'portfolio_styles' );

Здесь комментировать нечего, кроме хука, в первом случае
wp_enqueue_script
wp_enqueue_styles — не заморачивайтесь, просто отметьте для себя, если грузите скрипт, то первый вариант, если стили, то второй.


Комбинируем подключение скриптов и стилей


Иногда нужно подключить несколько скриптов и стилей к одной странице, тогда можно совместить подключение скриптов и стилей, собрать их в одну функцию, чтобы код в файле functions.php был покороче.

 function portfolio_scripts_styles() {
if ( is_single('6') )
wp_enqueue_style('portfolio', get_template_directory_uri() . '/css/portfolio.css', array(), '1.0' );
wp_enqueue_script( 'izotope', get_template_directory_uri() . '/js/izotope.js', array( 'jquery' ), '2.9', true );
}
add_action( 'wp_enqueue_scripts', 'portfolio_scripts_styles' );

Отключение скриптов и стилей в определенной странице или записи WordPress


Все почти что аналогично.

Отключение скрипта

 function my_deregister_java () {
if ( is_single ('6') ) {
wp_deregister_script ( 'social' );
}
}
add_action ( 'wp_print_scripts', 'my_deregister_java', 100 );

Пояснения :
Все аналогично подключению.
'social' — уникальное имя. Чтобы отключить скрипт или стили, нужно знать уникальное имя скрипта, стилей. Смотрите где они подключаются. Это могут быть файлы плагинов — смотрите в плагинах, или скрипты и стили темы, в файле functions.php

Отключение стилей

function my_deregister_style () {
if ( is_single ('6') ) {
wp_deregister_style ( 'social-likes' );
}
}
add_action ( 'wp_print_styles', 'my_deregister_style', 100 );

Может пригодится статья Увеличение скорости загрузки сайта, перенос jQuery в footer WordPress за счет замены вшитой в WordPress версии библиотеки jQuery на аналогичную взятую с официального сайта jQuery

Офигительный сайт cxid.info - заходите, не пожалеете!


Похожие по Тегам статьи