Що таке 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().

 

Recent Posts

Що таке вита (кручена) пара та де використовується

Сьогодні, в вік високих технологій, дуже важлива швидка та ефективна передача даних. Завдяки швидкому обміну… Read More

21/01/2021

Брюс Лі

Не важливо, як повільно ти рухаєшся, головне, що ти не зупиняєшся - Брюс Лі   Read More

20/01/2021

Google Search Console – Проблема з LCP та як її вирішити

Нещодавно ми писали про нововведення в інструменті для вебмайстрів Google Search Console – Основних веб-показниках.… Read More

18/01/2021

Як змінити HTML код вбудованих елементів WP oEmbed в WordPress?

Починаючи з WordPress версії 2.9 в двигун була додана підтримка oEmbed – формат простого API,… Read More

16/01/2021

Багатофункціональний пристрій коверлок: ключові особливості

Існує багато різновидів швейного обладнання, які відкривають великі можливості для вдосконалення навичок. Один з найскладніших… Read More

15/01/2021

Як зробити відкладене завантаження для HTML, iframe і вбудованого відео

Ліниве (або відкладене) завантаження (Lazy loading) – це популярний метод асинхронного звернення до адреси ресурсу,… Read More

13/01/2021