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

Чи можлива анонімність, конфіденційність чи приватність в Інтернеті?

Сьогоднішній огляд присвячений людям, для яких важливе питання конфіденційності в Інтернеті, та хто цінує свої…

18 години ago

Як з’явився Pro Plan: шлях від ідеї до світового успіху

Вперше про бренд Pro Plan почули у 1986 році, коли він став частиною американської компанії…

4 дні ago

Стефан Цвейг

Страх покарання гірше самого покарання (Покарання — завжди щось конкретне, і воно все ж краще,…

5 днів ago

Чи можна знайти доступний хостинг у 2024 році?

Якщо ви плануєте розмістити веб-сайт в мережі Інтернет, дуже важливо знайти для нього швидкий і…

2 тижні ago

Чому обрати освіту за кордоном: переваги для майбутнього вашої дитини

Навчання за кордоном вже давно асоціюється з якісною освітою, новими можливостями та безліччю перспектив. Але…

2 тижні ago

Як вибрати майстра для перетяжки меблів?

Вибір майстра для ремонту та перетяжки меблів – завдання, яке потребує вдумливого підходу. Адже від…

2 тижні ago