Як правильно додавати JavaScripts та стилі в WordPress

Ви хочете дізнатися, як правильно додавати таблиці стилів JavaScripts та CSS у WordPress? Багато користувачів DIY часто роблять помилку безпосередньо називаючи свої сценарії та таблиці стилів у плагінах та темах. У цій статті ми покажемо вам, як правильно додавати JavaScripts та таблицю стилів у WordPress. Це буде особливо корисно для тих, хто тільки починає вивчати тему WordPress та розробку плагінів.


Правильне додавання JavaScripts та стилів у WordPress

Поширена помилка при додаванні скриптів та таблиць стилів у WordPress

Багато нових плагінів і розробників тем WordPress роблять помилку безпосередньо додаючи свої сценарії або вбудовуючи CSS у свої додатки та теми.

Деякі помилково використовують функцію wp_head для завантаження своїх скриптів та таблиць стилів.

<?php
добавлення (‘wp_head’, ‘wpb_bad_script’);
функція wpb_bad_script () {
відлуння ‘jQuery йде сюди’;
}
?>

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

Наприклад, якщо ви завантажуєте jQuery вручну, а інший плагін завантажує jQuery за допомогою відповідного методу, тоді jQuery завантажується двічі. Якщо він завантажується на кожній сторінці, це негативно позначиться на швидкості та продуктивності WordPress.

Можливо також, що ці дві різні версії можуть також спричинити конфлікти.

Зазначаючи, давайте подивимось на правильний спосіб додавання скриптів та таблиць стилів.

Чому запускати сценарії та стилі в WordPress?

WordPress має сильну спільноту розробників. Тисячі людей з усього світу розробляють теми та плагіни для WordPress.

Щоб переконатися, що все працює належним чином, і ніхто не наступає на чужі пальці, у WordPress є система зав’язування. Ця система забезпечує програмований спосіб завантаження таблиць стилів JavaScripts та CSS.

Використовуючи функції wp_enqueue_script та wp_enqueue_style, ви повідомляєте WordPress, коли потрібно завантажити файл, куди його завантажити та які його залежності.

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

Як правильно записувати сценарії в WordPress?

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

?php
функція wpb_adding_scripts () {

wp_register_script (‘my_amazing_script’, plugins_url (‘amazing_script.js’, __FILE__), array (‘jquery’), ‘1.1’, правда);

wp_enqueue_script (‘my_amazing_script’);
}

добавлення (‘wp_enqueue_scripts’, ‘wpb_adding_scripts’);
?>

Пояснення:

Ми почали з реєстрації нашого сценарію через функцію wp_register_script (). Ця функція приймає 5 параметрів:

  • $ ручка – Handle – це унікальна назва вашого сценарію. Наш називається “my_amazing_script”
  • $ src – src – це місце вашого сценарію. Ми використовуємо функцію plugins_url, щоб отримати належну URL-адресу папки плагінів. Як тільки WordPress виявить це, тоді він буде шукати наше ім’я amazing_script.js у цій папці.
  • $ депс – депс – для залежності. Оскільки наш сценарій використовує jQuery, ми додали jQuery в область залежності. WordPress автоматично завантажить jQuery, якщо він ще не завантажується на сайті.
  • $ ver – Це номер версії нашого сценарію. Цей параметр не обов’язковий.
  • $ in_footer – Ми хочемо завантажити наш скрипт у нижній колонтитул, тому ми встановили, що значення є істинним. Якщо ви хочете завантажити скрипт у заголовку, ви зробите його помилковим.

Після надання всіх параметрів у wp_register_script, ми можемо просто викликати скрипт у wp_enqueue_script (), завдяки чому все відбувається.

Останній крок – використовувати гак дій wp_enqueue_scripts, щоб фактично завантажити сценарій. Оскільки це приклад коду, ми додали це прямо нижче всього іншого.

Якщо ви додавали це до своєї теми чи плагіна, тоді ви можете розмістити цю гачку дій там, де насправді потрібен сценарій. Це дозволяє зменшити слід пам’яті вашого плагіна.

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

Належно набудьте стилів у WordPress

Так само, як і сценарії, ви також можете додавати свої таблиці стилів. Подивіться на приклад нижче:

<?php
функція wpb_adding_styles () {
wp_register_style (‘my_stylesheet’, plugins_url (‘my-stylesheet.css’, __FILE__));
wp_enqueue_style (‘my_stylesheet’);
}
добавлення (‘wp_enqueue_scripts’, ‘wpb_adding_styles’);
?>

Замість використання wp_enqueue_script ми зараз використовуємо wp_enqueue_style, щоб додати наш таблицю стилів.

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

У наведених вище прикладах ми використовували функцію plugins_url, щоб вказати на розташування сценарію чи стилю, який ми хотіли завоювати.

Однак якщо ви використовуєте в своїй темі функцію скриптів enqueue, просто використовуйте замість цього get_template_directory_uri (). Якщо ви працюєте з дочірньою темою, тоді використовуйте get_stylesheet_directory_uri ().

Нижче наведено приклад коду:

<?php

функція wpb_adding_scripts () {
wp_register_script (‘my_amazing_script’, get_template_directory_uri (). ‘/js/amazing_script.js’, array (‘jquery’), ‘1.1’, правда);
wp_enqueue_script (‘my_amazing_script’);
}

добавлення (‘wp_enqueue_scripts’, ‘wpb_adding_scripts’);
?>

Ми сподіваємося, що ця стаття допомогла вам навчитися правильно додавати jac JavaScript та стилі в WordPress. Ви також можете вивчити вихідний код основних плагінів WordPress для деяких прикладів реального життєвого коду.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map