Найкращі способи для завантаження скриптів у WordPress

Існує кілька способів завантажити скрипти для WordPress. Вибір на користь одного з них треба робити, орієнтуючись на свої завдання: чи вам потрібно, щоб скрипт виконувався для всієї теми, тільки для окремих постів або тільки для конкретних сторінок. У цій статті йдеться про те, як використовувати та завантажувати скрипти. JavaScript або jQuery у темах WordPress шляхом простої вставки в налаштовуються мета-бокси.

Дивіться також:

• Як додати JavaScript і CSS у WordPress тему або плагін

Загалом можна використовувати 2 сценарії завантаження скриптів:

• Завантажувати скрипти для всього сайту чи теми
• Завантажувати скрипти з певною умовою для конкретних постів чи сторінок

Завантаження скриптів для використання на всьому сайті

Є щонайменше 2 способи додавання файлів JavaScript або інших скриптів, щоб згодом використовувати їх на сайті. Ось як додаються скрипти для "шапки" або "підвалу" сайту в панелі адміністратора практично у будь-якій сучасній темі:

Ці бокси в основному використовуються для додавання скриптів. Google Analytics або скриптів онлайн-чата. Якщо у вашій темі таких боксів немає, можна внести редагування в код файлу functions.php:

add_action( 'wp_enqueue_scripts', 'wpsites_register_load_script' );
/**
* @author Brad Dalton - WP Sites
* @example http://wp.me/p1lTu0-a40
*/
function wpsites_register_load_script() {
	wp_register_script( 'your-script', get_stylesheet_directory_uri() . '/js/your-script.js' );
 
	wp_enqueue_script( 'your-script' );
 
}

Примітка: Після одноразової реєстрації скрипта не потрібно реєструвати його повторно; його можна викликати залежно від зазначених умов функції wp_register_script:

add_action( 'wp_enqueue_scripts', 'wpsites_load_javascript_conditionally' );
 
function wpsites_load_javascript_conditionally() {
	if ( is_page('page-slug') ) {
	
	wp_enqueue_script( 'your-script' );
 
	}
 
}

Завантаження скриптів тільки для певних сторінок чи постів

Якісні платні фреймворки та теми на кшталт Genesis полегшують завдання налаштування WordPress шляхом виклику необхідних скриптів для кожної окремої сторінки або певного типу постів. Під кожною сторінкою чи постом ви знайдете окремий бокс для додавання скриптів.

Якщо у вашій темі таких боксів немає, клацніть по вкладці "Налаштування екрана" праворуч вгорі та активуйте відображення боксів для скриптів на екрані в режимі редагування:

Якщо у вашій темі взагалі не передбачені окремі бокси для додавання скриптів, додайте наступний код наприкінці файлу functions.php. При цьому не забудьте замінити значення '007' на потрібний вам page_id та вказати правильний шлях розташування .js-файлу для приведення скрипту в робочий стан:

add_action( 'wp_enqueue_scripts', 'wpsites_load_javascript_conditionally' );
/**
* @author Brad Dalton - WP Sites
* @example http://wp.me/p1lTu0-a40
*/
function wpsites_load_javascript_conditionally() {
	if ( is_page('007') ) {
	wp_register_script( 'your-script', get_stylesheet_directory_uri() . '/js/your-script.js' );
 
	wp_enqueue_script( 'your-script' );
 
	}
 
}

Завантаження скриптів для дочірньої теми

Єдина різниця між завантаженням скриптів для батьківської та дочірньої теми полягає в наступному:

• get_template_directory_uri() - Використовуйте цю функцію для батьківської теми.
• get_stylesheet_directory_uri() - Використовуйте цю функцію для дочірньої теми.

Наведений нижче код слід застосовувати для завантаження скриптів залежно від зазначених умов батьківської темі:

add_action( 'wp_enqueue_scripts', 'wpsites_load_javascript_conditionally' );
/**
* @author Brad Dalton - WP Sites
* @example http://wp.me/p1lTu0-a40
*/
function wpsites_load_javascript_conditionally() {
	if ( is_page('007') ) {
	wp_register_script( 'your-script', get_template_directory_uri() . '/js/your-script.js' );
 
	wp_enqueue_script( 'your-script' );
 
	}
 
}

Завантаження скриптів за допомогою коду

Просто створюємо нову папку "js"в дочірній темі у кореневій папці і туди розміщуємо наші файли з розширенням .js. За наведеним кодом мається на увазі, що ваш файл скрипта має назву your-script. Якщо ви назвали файл інакше, то шляхи до файлу, а також імена файлів у коді теж треба змінити.

Завантаження скриптів для фону, що настроюється.

А ось код для популярної теми метро, Створена StudioPress. Цей код також можна використовувати для дочірніх тем на основі Genesis, щоб додати адаптивне фонове зображення на сайті:

add_action( 'wp_enqueue_scripts', 'metro_enqueue_scripts' );
/**
* @example http://wp.me/p1lTu0-a40
*/
function metro_enqueue_scripts() {
 
	// Load scripts only if custom background is being used
	if ( ! get_background_image() )
		return;
 
	wp_enqueue_script( 'metro-backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0' );
	wp_enqueue_script( 'metro-backstretch-set', get_bloginfo('stylesheet_directory').'/js/backstretch-set.js' , array( 'jquery', 'metro-backstretch' ), '1.0.0' );
 
	wp_localize_script( 'metro-backstretch-set', 'BackStretchImg', array( 'src' => get_background_image() ) );
 
}

Завантаження скриптів для плагінів вручну

Більшість плагінів, що включають скрипти, також містять і код для завантаження скриптів, так що від вас ніяких додаткових дій не потрібно. Але якщо вам попався плагін, який містить тільки сам код або тільки PHP-скрипт, то вам знадобиться цей метод для завантаження jQuery-скриптів у плагінах:

add_action( 'wp_enqueue_scripts', 'wpsites_load_jquery_script' );
/**
* @author Brad Dalton - WP Sites
* @example http://wp.me/p1lTu0-a40
*/
function wpsites_load_jquery_script() {
	
	wp_register_script( 'your-script', plugins_url( '/js/your-script.js', __FILE__ ), array( 'jquery' ) );
	
	wp_enqueue_script( 'your-script' );
}

Для завантаження скриптів застосовується метод, аналогічний до завантаження таблиць стилів CSS, включаючи функції wp_register и wp_enqueue для коректної обробки та взаємодії з файлом style.css.

плагін Прості сценарії

Якщо у вашій темі немає окремих полів для додавання скриптів, можна просто встановити цей плагін під назвою Simple Scripts.

Джерело: WPSites.net

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/