Підступна війна росії проти України. Орієнтовні втрати ворога
(станом на 01.11.2024)
696410
осіб
369
літаків
329
гелікоптерів
9162
танків
18470
ББМ
20039
артилерія
994
ППО
1244
РСЗВ
28038
машин
28
кораблі і катери
Як підключити JavaScript і CSS в тему або плагін WordPress
Опубліковано

Як підключити 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'/>

 

 

Напишіть тут свою думку/питання

Ваша пошта не публікуватиметься. Обов’язкові поля позначені *


Швидкий доступ по сайту SebWeo
Пригости мене кавою