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

Для дизайнерів і розробників, які працюють з WordPress, дуже важливо знати, як правильно підключаються файли JavaScript і CSS в тему і/або плагін. Адже неправильне включення таких файлів може призвести до конфліктів з іншими темами і плагінами, і створити потенційні вразливості.
Є один варіант правильного підключення JS/CSS файлів в ВордПрес, і один неправильний, і ми їх сьогодні детально розглянемо.

1-й варіант:

Завантаження і підключення скриптів через функцію wp_register_script у файлі functions.php

wp_register_script ($handle, $src, $deps, $ver, $in_footer);

де:

$handle – робоча назва скрипта в системі (унікальний ID)
$src – шлях до потрібного файлу у вашому плагіні або темі
$deps – масив, що містить $handle для будь-яких інших скриптів, від яких залежить ваш скрипт
$ver – номер версії скрипта. За замовчуванням WordPress буде використовувати свій власний номер версії (версія движку)
$in_footer – ви хочете, щоб ваш скрипт завантажувався у футері (підвалі сайту)? Тоді використовуйте значення true. Значення false – це значення за замовчуванням, при якому скрипт завантажується в секцію head.

Розглянемо приклад підключення скрипта у файлі functions.php теми:

function pidklyuchennya_scriptiv () {
// Реєструємо скрипт в системі (для плагіна):
wp_register_script ('pevniy-script', plugins_url ('/js/pevniy-script.js', __FILE__));
// або
// Реєструємо скрипт в системі (для теми):
wp_register_script ('pevniy-script', get_template_directory_uri () . '/js/pevniy-script.js');
// Після реєстрації ми можемо ставити в чергу виклик скрипта для будь-якого плагіна або теми:
wp_enqueue_script ('pevniy-script');
}
// Викликаємо хук-подію
add_action ('wp_enqueue_scripts', 'pidklyuchennya_scriptiv');

 

Тепер більш детально про код.

Для початку ми реєструємо скрипт, щоб WordPress «дізнався» про нього, присвоюємо йому системне ім’я та вказуємо його розташування.

Потім, якщо ваш скрипт потребує однієї з бібліотек, які включені в WordPress, такі як jQuery, ви можете використовувати третій параметр функції $deps, який «поміщає» ваш скрипт після підключення скриптів, зазначених в цьому параметрі:
 

wp_register_script ('pevniy-script', plugins_url ('/js/pevniy-script.js', __FILE__), array ('jquery'));
 
Цей параметр є масивом, тому ви можете підключати кілька скриптів, наприклад,
 
array ('jquery', 'jquery-ui-core') .
 

Якщо вам потрібно, щоб до назви файлу скрипта додавалася версія, використовуйте 4-й параметр функції $ver. Для прикладу скористаємося сьогоднішньої датою і подивимося, як тепер виглядає код:

wp_register_script ('pevniy-script', plugins_url ('/js/pevniy-script.js', __FILE__), array ('jquery'), '29072015');

а на сайті, в розділі head цілий рядок підключення JS-скрипта буде виглядати так:

<script type='text/javascript' src='http://vashsait.com/wp-content/plugins/vashplugin/js/pevniy-script.js?ver=29072015'></script>

 

Ви можете використовувати будь-яку версію нумерації на свій розсуд.

І, на завершення, розглянемо 5-й параметр: підключення скрипта у футері сайту – $in_footer для цього у функцію реєстрації скрипта додаємо 5-м параметром true.

wp_register_script ('pevniy-script', plugins_url ('/js/pevniy-script.js', __FILE__), array ('jquery'), '29072015', true);

 

З усіма параметрами наша функція набуває наступного вигляду:

function pidklyuchennya_scriptiv () {
    // Реєструємо скрипт в системі (для плагіна):
    wp_register_script ('pevniy-script', plugins_url ('/js/pevniy-script.js', __FILE__), array ('jquery'), '29072015', true);
    // Або
    // Реєструємо скрипт в системі (для теми):
    wp_register_script ('pevniy-script', get_template_directory_uri () . '/js/pevniy-script.js', array ('jquery'), '29072015', true);
 
    // Після реєстрації ми можемо ставити в чергу виклик скрипта для будь-якого плагіна або теми:
    wp_enqueue_script ('pevniy-script');
}
add_action ('wp_enqueue_scripts', 'pidklyuchennya_scriptiv');

 

Процес підключення стилів майже ідентичний процесу підключення скриптів. Це робиться за допомогою функції WordPress під назвою wp_register_style, а ось його використання відповідно до WordPress Codex:

wp_register_style ($handle, $src, $deps, $ver, $media);

 

Зверніть увагу, що єдина різниця між wp_register_script і wp_register_style в тому, що замість параметра $in_footer, використовується параметр $media. Цей параметр може приймати наступні значення: ‘all’, ‘screen’, ‘handheld’, і ‘print’, або будь-який інший тип носія, визначений W3C.

Розглянемо приклад підключення файлу стилів у файлі functions.php:

function pidklyuchennya_stiliv () {
    // Реєструємо файл стилів в системі (для плагіна):
    wp_register_style ('pevniy-style', plugins_url ('/css/pevniy-style.css', __FILE__), array (), '29072015', 'all');
    // Або
    // Реєструємо стиль в системі (для теми):
    wp_register_style ('pevniy-style', get_template_directory_uri () . '/css/pevniy-style.css', array (), '29072015', 'all');
     // Після реєстрації ми можемо ставити в чергу виклик файлу стилів для будь-якого плагіна або теми:
    wp_enqueue_style ('pevniy-style');
}
// Викликаємо хук-подію.
add_action ('wp_enqueue_scripts', 'pidklyuchennya_stiliv');

 

Це досить повний приклад, в якому використовується більшість параметрів, а на виході він виглядає наступним чином:

<link rel='stylesheet' id='pevniy-style-css' href='http://vashsait.com/wp-content/plugins/vashplugin/css/pevniy-style.css?ver=29072015' type='text/css' media='all'/>

 

2-й варіант (помилковий):

Завантаження і підключення скриптів через файли шаблону header.php і footer.php

Це найпростіший варіант, але далеко не ідеальний. Використовувати його рекомендується в самих крайніх випадках, оскільки це загрожує ймовірністю появи проблем з функціонуванням шаблону або плагінів.

Щоб підключити скрипти і файли стилів в хедері та футері, потрібно лише додати рядок коду у файли header.php (для завантаження в секцію head) і footer.php (для завантаження в підвал сайту):

приклад для підключення скриптів

<script type='text/javascript' src='http://vashsait.com/wp-content/plugins/vashplugin/js/pevniy-script.js?ver=29072015'></script>

 

приклад для підключення стилів

<link rel='stylesheet' id='pevniy-style-css' href='http://vashsait.com/wp-content/plugins/vashplugin/css/pevniy-style.css?ver=29072015' type='text/css' media='all'/>