Особливості підключення JS скриптів в WordPress

  1. Основні проблеми та причини їх появи
  2. Проблема 1. Багаторазова завантаження JS файлів.
  3. Проблема 2. «Непрацюючі» плагіни.
  4. Як уникнути цих проблем?
  5. Для довідки
  6. висновок

На жаль, іноді буває так, що є хороші і зручні інструменти, але з якихось причин ними користуються далеко не всі і не завжди. В результаті виникають проблеми, здавалося б, на рівному місці.

Один з таких прикладів - підключення JavaScript коду в WordPress.

Цей движок надає зручну функцію wp_enqueue_script. З її допомогою можна забезпечити необхідний порядок підключення скриптів і, при цьому, гарантується, що один і той же скрипт буде підключений тільки один раз.

До речі, аналогічні можливості є і в різних фреймворків, наприклад, Yii .

Але різниця між фреймворком і WordPress в тому, що за допомогою останнього можна створити сайт, не читаючи документацію, у всякому разі, ту частину, яка стосується API. В цьому немає нічого поганого, але можна зіткнутися з деякими нюансами. Про них мова піде нижче.

Основні проблеми та причини їх появи


Візьмемо найпоширенішу ситуацію. Є сайт на WP, і є готовий JS скрипт, який потрібно до цього сайту підключити.

Що написано в інструкції по установці скрипта?

«Вставте тег <script ...> в заголовок сторінки (між <head> і </ head>)».

Тут все правильно. Розробник пише інструкцію загальний випадок, а не конкретно під WP.

Наступне питання. Де знаходяться теги <head> і </ head> в WP?

Зазвичай в файлі header.php поточної теми.

Тобто якщо робити строго по інструкції, то потрібно додати теги <script ...> в header.php.

Саме тут і виникають проблеми.

Точніше, якщо ваш JS скрипт не залежить ні від яких бібліотек, і не використовується ніякими плагінами, то все буде в порядку, але в іншому випадку ситуація складніша.

Проблема 1. Багаторазова завантаження JS файлів.

Виникає якщо підключити JS скрипт у файлі теми, а потім використовувати плагін, яким потрібен цей же скрипт. Найчастіше таке відбувається з JavaScript бібліотеками.

Розробники плагінів доступу до файлів вашої теми не мають, але повинні гарантувати підключення необхідних скриптів. Тому для них єдиним варіантом буде використання wp_enqueue_script.

В результаті один раз JavaScript файл підключається вашим тегом, другий - тегом, який додасть плагін. Це призводить до збільшення ваги сторінки, часу її завантаження, зростання трафіку сервера.

Проблема 2. «Непрацюючі» плагіни.

Випливає з першої.

Розглянемо невеликий приклад. Припустимо скрипти підключені в header.php наступним чином.

<Head> ... <script src = "... jquery.js" ...> </ script> <script src = "... jquery.my-plugin.js" ...&gt; </ script> &lt;? php wp_head (); ?> </ Head>

Що станеться якщо якийсь з плагінів WP підключить jQuery?

Функція wp_enqueue_script додасть теги script там, де знаходиться виклик wp_head (). А це, крім повторного завантаження jquery, означає, що і об'єкт jQuery буде створений заново. І він буде використовуватися замість першого об'єкта, до якого підключили плагін.

В принципі, проблему можна вирішити так.

<Head> ... &lt;? Php wp_head (); ?> <Script src = "... jquery.my-plugin.js" ...> </ script> </ head>

Але якщо ви в адмінці WP вимкніть плагін, який використовує jQuery, то my-plugin.js також перестане працювати. Оскільки jQuery буде не підключена.

Як уникнути цих проблем?

Просто не чіпайте header.php. В папці з темою є файл functions. php в який потрібно додати наступний код.

&lt;? Php if (! Is_admin ()) {function register_my_js () {wp_enqueue_script ( 'my-script', get_bloginfo ( 'template_directory'). '/ My-script.js', array ( 'jquery'), '1.0' , true); } Add_action ( 'init', 'register_my_js'); }?>

Цей код підключить скрипт на всіх сторінках сайту, крім адмінки. Якщо потрібно підключати скрипт тільки на частині сторінок, можна в умова перевірки додати is_single (), is_home () і т.д.

Крім того, бібліотеку jQuery явно підключати не потрібно, тому що вона вказана в масиві залежностей (третій параметр wp_enqueue_script). WordPress підключить її сам до вашого плагіна.

Для довідки

Функція wp_enqueue_script підключає JS файл якщо він не був підключений раніше. Тобто можна викликати її кілька разів для одного і того ж скрипта і, при цьому, скрипт буде вставлений тільки один раз.

Параметри.

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

$ Handle - назва скрипта, має бути унікальним.

$ Src - URL скрипта. Якщо скрипт був попередньо зареєстрований за допомогою wp_register_script, то його вказувати не обов'язково.

$ Deps - масив залежностей (потрібно перерахувати назви JS скриптів, які повинні бути завантажені перед даними).

$ Ver - версія скрипта (необов'язковий).

$ In_footer - якщо дорівнює true, скрипт буде підключений в кінці сторінки, там де знаходиться wp_footer (). Зазвичай в файлі footer.php перед </ body>.

висновок

Дуже раджу почитати статтю Function Reference / wp enqueue script . Вона невелика, але в ній ви знайдете кілька цікавих прикладів. Наприклад, пояснюють як замінити версію бібліотеки jQuery, яка йде в дистрибутиві WP.

Цікаве в мережі.

Можливо, найоригінальніший подарунок: фруктові кошики з доставкою по Москві.

Технологія кейс-стаді : Відмінно працює при продажу послуг.

Як уникнути цих проблем?
Що написано в інструкції по установці скрипта?
Де знаходяться теги <head> і </ head> в WP?
Gt; </ script> <?
Php wp_head (); ?
Lt;?
Php wp_head (); ?
Як уникнути цих проблем?
Lt;?
True); } Add_action ( 'init', 'register_my_js'); }?