Додавання Javascript до тем WordPress Тема Правильний шлях

Існує специфічний спосіб додавання Javascript до вашої теми WordPress, щоб запобігти будь-яким конфліктам із плагінами або батьківськими темами WordPress. Проблема полягає в тому, що багато “розробників” називають свої файли JavaScript безпосередньо у файлі header.php або footer.php, що є невірним способом зробити це.


У цьому посібнику я покажу вам, як правильно викликати файли javascript за допомогою файлу function.php, щоб вони завантажувалися прямо в тег голови чи нижнього колонтитулу вашого сайту. Таким чином, якщо ви розробляєте тему для розповсюдження, а ваш кінцевий користувач хоче змінити сценарії через дочірню тему, яку він може, або якщо вони використовують мінімізацію / кешування або інші плагіни оптимізації, вони працюватимуть правильно. І якщо ви працюєте з дочірньою темою, ваші сценарії додаються належним чином, не копіюючи файли header.php або footer.php у свою дочірню тему, які ніколи не повинні бути необхідними (при роботі з добре закодованою темою)

Неправильний спосіб додати Javascript до тем WordPress

Виклик javascript у вашому файлі header.php або footer.php, як показано нижче, НЕ є правильним способом, і я настійно рекомендую проти нього, часто це викликає конфлікти з іншими плагінами і робити речі вручну при роботі з CMS ніколи не буває гарна ідея.

Правильний спосіб додавання Javascript у теми WordPress

Краще для додавання javascript до вашої теми WordPress – це зробити через файл function.php, використовуючи wp_enqueue_script. Використання wp_enqueue_scripts дії для завантаження javascript допоможе уникнути вашої теми без проблем.

Приклад

wp_enqueue_script ('мій-скрипт', get_template_directory_uri (). '/js/my-script.js', array (), true);

Наведений вище код завантажить файл my-script.js на ваш сайт. Як ви бачите, я включив лише ручку $, але ви також можете додати залежності від вашого сценарію, номера версії та того, чи потрібно завантажувати його в колонтитул або колонтитул (за замовчуванням – заголовок).

Функція wp_enqueue_script () технічно може бути використана в будь-якій темі або файлі шаблона плагіну, але якщо ви завантажуєте глобальні сценарії, ви хочете розмістити їх у файлі function.php вашої теми або в окремому файлі, спеціально призначеному для завантаження скриптів на сайт. Але якщо ви хочете завантажити сценарій лише у певний файл шаблону (наприклад, у публікаціях галереї), ви можете розмістити цю функцію прямо у файлі шаблону, однак особисто я рекомендую зберігати всі сценарії в одному місці та використовувати умовні умови для завантаження сценарії за потребою.

WordPress розміщені сценарії

Одним із цікавих моментів у WordPress є те, що вже існує маса сценаріїв, розміщених та зареєстрованих, які ви можете використовувати у розробці тем. Наприклад, jQuery, який використовується майже в кожному проекті, ЗАВЖДИ завантажується з WordPress і ніколи не розміщується на сторонніх сайтах, таких як Google. Тому перед тим, як додати в проект власний сценарій, перевірте його список зареєстровані сценарії щоб переконатися, що він ще не включений у WordPress, і якщо він є, ви повинні завантажити його на відміну від реєстрації власного.

Використання WordPress Enqueue Hook

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

WordPress має два різних гачки дії, які можна використовувати для виклику сценаріїв.

  1. wp_enqueue_scripts – дія, що використовується для завантаження сценаріїв на передній частині
  2. admin_enqueue_scripts – дія, що використовується для завантаження скриптів у адміністратор WP

Ось приклад (який буде доданий у файл function.php) як створити функцію, а потім використовувати гачок WordPress для виклику сценаріїв.

/ **
* Запропонувати сценарій
* /
функція myprefix_enqueue_scripts () {
wp_enqueue_script ('мій-скрипт', get_template_directory_uri (). '/js/my-script.js', array (), true);
}
добавлення ('wp_enqueue_scripts', 'myprefix_enqueue_scripts');

Примітка: Подивіться, як ми використовуємо функцію “get_template_directory_uri” під час визначення місця розташування вашого сценарію? Ця функція створює URL-адресу до вашої тематичної папки. Якщо ви працюєте з дочірньою темою, ви хочете скористатись “get_stylesheet_directory_uri”, щоб вона вказувала на дочірню тему, а не на батьківську тему..

Додавання вбудованого коду Javascript

Хоча ви можете легко вставити вбудований javascript у будь-який файл шаблону за допомогою тегу скрипту, може бути хорошою ідеєю також використовувати гачки WordPress для додавання вбудованого коду, особливо якщо це основний плагін або код теми. Нижче наведено приклад додавання вбудованих скриптів на ваш сайт:

функція myprefix_add_inline_script () {
wp_add_inline_script ('мій-скрипт', 'попередження ("привіт світ");', 'після');
}
добавлення ('wp_enqueue_scripts', 'myprefix_add_inline_script');

Для цього потрібно додати ваш вбудований JavaScript після попередньо зареєстрованого сценарію “мій скрипт”. Під час використання wp_add_inline_script можна додавати лише вбудований код перед або після вже зареєстрованого сценарію, тому якщо ви намагаєтесь змінити код певного сценарію, переконайтеся, що він завантажений після нього, або якщо вам просто потрібно додати якийсь спеціальний код, ви можете підключити його до сценарію jquery, який, як правило, завантажується більшістю тем WordPress, і якщо ні, ви можете використовувати wp_enqueue_script для завантаження розміщеної в WordPress версії jQuery.

За допомогою цього методу люди можуть легко видалити ваші вбудовані сценарії за допомогою дочірньої теми або додатка, він зберігає всі ваші власні JavaScript чітко організованими та аналізує WordPress, що може бути безпечнішим. І якщо ви використовуєте дочірню тему, ви можете завантажити свої сценарії через файл function.php, а не копіювати файли header.php або footer.php на свою дочірню тему..

Однак, якщо ви працюєте над дочірньою темою, вам не потрібно цього робити, ви можете просто скинути свій код у свій заголовок або за допомогою гачок wp_head або wp_footer, як, наприклад, нижче:

addgery ('wp_footer', function () {?>  
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map