Керівництво по правильному використанню JavaScript у WordPress

От

22.04.2020

807

Я пам’ятаю, як всі говорили: «Навіщо нам потрібен JavaScript, коли у нас є Flash?», коли мені було чотирнадцять. Хоча я все ще пам’ятаю, як тоді насолоджувався програмуванням на ActionScript 2.0, я бачив, що за допомогою JavaScript можна було досягти дуже багато чого, і я любив його. Я не експерт в JavaScript (поки що), але можу сказати, що дуже багато часу мав справу зі спорідненою JavaScript технологією — Flash.

Коли з’явився WordPress — це потужна платформа для створення блогів та управління контентом — JavaScript виявився корисним для безлічі речей, таких як: слайдери контенту, графічні галереї, барвисті кошика товарів, елементи інтерфейсу, наприклад, закладки, «акордеони» та інші. Але як правильно використовувати JavaScript у поєднанні з WordPress?

Підключення скриптів в HTML-текст це один із способів – і він неправильний. У цій статті ми розберемося, як правильно підключати файли JavaScript до наших сторінках і як поводитися з інтернаціональними даними в коді JavaScript.

Дві проблеми при використанні JavaScript у проектах WordPress

Є дві важливі проблеми, які виникають при включенні JavaScript-сценаріїв безпосередньо HTML-код WordPress:

Дупликация коду: Уявімо, що ви створили WordPress плагін і вам потрібно підключити jQuery. Ви вставляєте тег з відповідними параметрами до розділу і все працює відмінно! Але, що якщо інший плагін також вимагає для своєї роботи jQuery? Як він дізнається про те, що ця бібліотека вже підключена в розділі ? Він не буде про те знати, навіть якщо інший плагін вже підключив jQuery. У підсумку, на сторінці буде підключено дві копії jQuery, тому що ви про це не подбали;
Проблеми з інтернаціоналізацією: Скажімо, що ви створюєте плагін галереї і вам потрібно створювати рядки, що містять написи типу: «Наступний», «Попередній» та «Зображення X з Y». Як ви це реалізуєте без виводу рядків усередині коду JavaScript у розділі?

Правильний спосіб використання JavaScript у WordPress

Ключем до вирішення першої проблеми є «реєстрація» і «постановка в чергу» JS файлів за допомогою двох функцій ядра WordPress: wp_register_script() і wp_enqueue_script(). Рішення другої проблеми ще простіше: треба використовувати функцію ядра wp_localize_script(), що дозволяє вам правильно визначити мовні рядки у вашому JS-коді.

Реєстрація скриптів

Перед тим, як ви зможете поставити в чергу ваші JavaScript-файли, необхідно їх спочатку зареєструвати. Робиться це простим викликом функції wp_register_script():

Деякі зауваження по параметрам:

Name (обов’язковий, тип string): ім’я скрипта. Можна вибрати будь-яке ім’я за власним бажанням, за умови, що воно не використовується іншими скриптом;
URL (обов’язковий, тип string): URL-адреса скрипта;
Dependencies (опціональний, тип array): ім’я (імена) іншого скрипту, від якого залежить цей. Наприклад, якщо ваш скрипт залежить від jQuery, то він повинен бути завантажений ПІСЛЯ jQuery. В даному випадку вам слід вказати масив jquery для даного параметра;
Version (опціональний, тип string): номер версії вашого скрипта. Ви можете вибрати між кількома варіантами: рядок (string), установка значення null або залишити порожнім. Якщо вибрати рядок, то треба додати код виду my-script.js?ver=1.2. Якщо залишити поле порожнім, то значенням версії присвоїти номер версії WordPress. Якщо ви встановити параметр null, то, відповідно, нічого не додасться;
Load in Footer (опціональний, тип boolean): коли ви ставите в чергу зареєстровані скрипт, то він завантажується в розділі . Але якщо цей параметр встановити в true, то скрипт буде завантажуватися прямо перед закриваючим тегом .

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

Є багато скриптів на WordPress Codex, які вже зареєстровані в ядрі. Хоча, вам слід перевірити список, тому що із-за відмінності версій WordPress, він може бути іншим.

Постановка скриптів в чергу

Ви можете зареєструвати скрипт, але це не означає, що він буде завантажуватися автоматично. Після реєстрації ваших скриптів їх слід поставити в чергу за допомогою функції wp_enqueue_script():

Деякі пояснення до параметрами:

Name (обов’язковий, тип string): ім’я скрипта.;
URL (опціональний, тип string): URL-адреса скрипта. Як ви можете бачити, в даному випадку цей параметр не є обов’язковим, тому що якщо ви вже зареєстрували скрипт, то ви просто вказуєте ім’я. Але якщо скрипт ви не реєстрували, то URL вставити необхідно;
Dependencies (опціональний, тип array): ім’я (імена) інших скриптів від яких залежить даний;
Version (опціональний, тип string): Номер версії вашого скрипта;
Load in footer (опціональний, тип boolean): Якщо вказано значення true, то скрипт буде завантажуватися прямо перед закриваючим тегом .

Ви також можете прибрати скрипт з черги з допомогою функції wp_dequeue_script(). Аналогічно wp_deregister_script(), ця функція вимагає передати в неї тільки параметр name.

Ви можете перевірити стан скрипта функцією wp_script_is(). Наприклад, якщо ви хочете перевірити, поставлений в чергу скрипт з назвою my-script, просто використовуйте функцію wp_script_is( ‘my-script’, ‘queue’ ) в конструкції if.

Використання хуків (hooks) для постановки ваших скриптів в чергу

Правильний спосіб постановки ваших скриптів (і стилів) у чергу, це використання наступних хуків:

wp_enqueue_scripts – встановлює скрипт в лицьову частину вашого сайту;
admin_enqueue_scripts – встановлює скрипт в адміністративну частину сайту;
login_enqueue_scripts – встановлює скрипт на панель входу.

В цілях забезпечення сумісності, не використовуйте хуки admin_print_scripts або admin_print_styles.

Правильне поводження з інтернаціональними даними в JavaScript

Коли справа доходить до локалізації, завжди виникають проблеми при використанні JavaScript в WordPress, тому що багато людей не знають про існування маленької витонченої функції під назвою wp_localize_script():

__( ‘Next’, ‘my-script’ ),
‘prevItem’ => __( ‘Previous’, ‘my-script’ ),
‘imageTitle’ => __( ‘Image %d of %d’, ‘my-script’ )
);
wp_localize_script(
‘name-of-the-script’, // (обов’язковий параметр) ім’я скрипта, наприклад ‘my-script’
‘nameOfTheObject’, // (обов’язковий параметр) ім’я об’єкта, наприклад ‘my-object’
$l10n_data // (обов’язковий параметр) дані, які необхідно перевести на різні мови
);
?>

Після реєстрації, постановки в чергу і локалізації скрипта, ви можете ви можете викликати змінні, використовуючи ім’я об’єкта і імена даних, наприклад: alert( nameOfTheObject.prevItem );