Я пам’ятаю, як всі говорили: «Навіщо нам потрібен 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 );
Висновок
Причина, по якій WordPress є однією з найпопулярніших CMS в світі, полягає в її гнучкості. І я сподіваюся, що ця стаття допомогла вам це усвідомити.
Переклад статті «The Complete Guide to Proper JavaScript Usage With WordPress» був підготовлений дружною командою проекту Сайтостроение від А до Я.