Що таке wp_enqueue (черга скриптів) в WordPress

Для додавання інтерактивності на сайт в основному використовуються скрипти JavaScript. Вони ж використовуються і на сайтах WordPress. Якщо у вас невеликий сайт, таких скриптів може бути дуже мало, але в міру зростання сайту їх може бути дуже велика кількість. Коли ви починаєте додавати все більше і більше JavaScript, ваш сайт стає все повільнішим і повільнішим. Плюс їх оновлення займає все більше часу. Цей «клубок» стає складно розплутати.

На щастя, в WordPress ви можете використовувати функцію постановки в чергу скриптів (wp_enqueue), щоб правильно додавати CSS-стилі і JavaScript скрипти. Після цього CMS WordPress наведе порядок в цьому хаосі. У сьогоднішній статті ми розглянемо даний функціонал і подивимося на практичне застосування функції wp_enqueue_script.

 

 

Основні моменти функції wp_enqueue_script

Основною причиною, по якій важливо використовувати функціонал черги скриптів (wp_enqueue) в WordPress – це забезпечення безперебійної та швидкої роботи вашого сайту, а також правильне підключення скрипта (JavaScript файлу) на сторінці. Все що потрібно, це написати невеликий фрагмент коду, а потім використовувати wp_enqueue для виклику потрібного скрипта.

Використання методу черги змушує WordPress автоматично вставляти теги <script> в потрібному місці. Це також дозволяє правильно об’єднувати JavaScript файли в один файл скриптів, а також допомагає позбавлятися конфлікту скриптів (коли порушується їх порядок підключення).

 

 

Синтаксис і параметри методу wp_enqueue_script

Для статичних сайтів використовується пряме підключення коду скриптів в тілі сторінки або за допомогою зовнішнього .js файлу. Система WordPress використовує схожий метод, але більш ефективним способом.

Для цього вам достатньо використовувати функцію wp_enqueue_script, знати її синтаксис, а також правильно використовувати основні її параметри.

Синтаксис функції черги скриптів виглядає так:

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

 

Тут використовуються такі параметри:

• wp_enqueue_script() – це функція, яка поміщає скрипт на потрібну сторінку.
• $handle – це унікальне ім’я (системна назва) для самого JavaScript скрипта.
• $src – це посилання на файл .js, який ви ставите в чергу.
• $deps – це масив системних імен скриптів, від яких залежить підключаємий скрипт. Тобто, тут вказуються скрипти, які повинні бути завантажені до підключаємого скрипта.
• $ver – це номер версії скрипта. Якщо ви нічого не вкажете для цього параметра, буде автоматично використана поточна версія WordPress.
• $in_footer – цей параметр повідомляє WordPress, куди помістити ваш скрипт: якщо вказати true, тоді скрипт підключиться у футері (підвалі) сайту, якщо false, тоді скрипт підключиться в шапці (хедері) сайту.

 

 

На додаток до wp_enqueue, в WordPress використовується метод, який називається wp_register. Обидва методи використовують одні і ті ж параметри та синтаксис. За допомогою другої функції ви реєструєте скрипт в системі, а за допомогою wp_enqueue ставите цей скрипт в чергу підключення. Правильне підключення скриптів має на увазі спочатку реєстрацію їх в системі, а потім виклик. Як тільки скрипт зареєстрований за допомогою wp_register_script, ви можете поставити його в чергу за допомогою функції wp_enqueue_script по його параметру $handle, як ви побачите в прикладі нижче.

 

Етап №1: реєстрація скрипта в системі:

wp_register_script( 'jquery', 'https://code.jquery.com/jquery-3.0.0.min.js', false, null, true);

 

Етап №2: виклик скрипта по його системному імені з використанням функції черги скриптів:

wp_enqueue_script( 'jquery' );

 

 

Практичний приклад підключення jQuery в WordPress

Реалізація коду проста. Просто вставте фрагмент коду, який представлений нижче, в файл functions.php активної теми, і WordPress обробить все інше.

Правильне підключення jQuery через CDN репозиторій виглядає так:

add_action('wp_enqueue_scripts', 'add_jquery_script');
function add_jquery_script(){
 // реєструємо скрипт в системі
 wp_register_script( 'jquery', 'https://code.jquery.com/jquery-3.0.0.min.js', false, null, true);
 // ставимо скрипт в чергу на підключення
 wp_enqueue_script( 'jquery' );
}

 

Подібним чином підключаються і CSS стилі, тільки тут використовуються методи wp_register_style() та wp_enqueue_style().