Для дизайнерів і розробників, які працюють з 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'/>
Потрібно більше інформації?
