WordPress: як підключити свій скрипт до сторінки за допомогою простих кроків

WordPress є однією з найпопулярніших платформ для створення та управління веб-сайтами. Вона надає широкі можливості для налаштування та доопрацювання функціоналу сайту. Одним із важливих завдань, з яким може зіткнутися веб-розробник, є під’єднання власного скрипта до сторінки сайту.

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

Для того щоб підключити свій скрипт до сторінки WordPress, необхідно створити новий файл із розширенням .js і зберегти його в папці теми сайту або в папці плагіна. Потім необхідно відкрити файл functions.php, який міститься в папці теми сайту, і додати такий код:

wp_enqueue_script( ‘script-name’, get_template_directory_uri() . ‘/js/script.js’, array(), ‘1.0.0’, true );

У цьому прикладі ми підключаємо скрипт з ім’ям script-name, вказуючи шлях до нього від кореневої директорії теми сайту. Також ми вказуємо, що скрипт не має залежностей, його версія – 1.0.0.0, а скрипт має бути під’єднаний у футері сторінки (після закривального тега body).

КрокОпис
1Створіть файл зі скриптом
2Відкрийте файл functions.php вашої теми
3Додайте наступний код у файл functions.php:
function custom_script() {
wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'custom_script' );
4Збережіть зміни у functions.php
5Створіть директорію “js” у директорії вашої теми
6Створіть файл “custom.js” у директорії “js” і додайте свій JavaScript код
7Відкрийте вашу WordPress сторінку в браузері та переконайтеся, що ваш скрипт успішно підключено

Як додати скрипт на певну сторінку в WordPress?

Після активації плагіна перейдіть у “Налаштування” → “Вставити верхні та нижні колонтитули” на панелі управління WordPress . Ви побачите два поля з написом “Сценарії” у верхньому колонтитулі та “Сценарії в нижньому колонтитулі”. Будь-який код, який ви додасте в ці поля, буде вставлений у верхній або нижній колонтитул вашого сайту. Тут ви додасте свій JavaScript.

Як додати скрипт у сторінку?

Найпростіший спосіб вставити JS-код у HTML-сторінку – використовувати парний тег <script> . Він повідомляє браузеру, що весь його вміст потрібно інтерпретувати як виконуваний скрипт, а не як текст або HTML-код. Як приклад додамо на сторінку скрипт, який виводить поточні дату і час.

Як підключити до WordPress свої файли JS?

Якщо ви хочете додати JS у WordPress, виберіть один із трьох способів: за допомогою плагіна Shortcoder, за допомогою плагіна Insert Headers and Footers, за допомогою зміни файлу functions .