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

Деякі плагіни працюють сьогодні

Давайте візьмемо реальний приклад. Плагін WP-Polls. Я думаю, що це хороший плагін. Він відмінно підходить для опитувань. Саме його я використовую.

Якщо Ви хочете розмістити на своєму сайті опитування, вам потрібен буде якийсь JavaScript для обробки функціоналу (тобто можливості голосувати і бачити результати голосування без необхідності оновлювати сторінку) і CSS для визначення стилів віджета опитувань (панелі з результатами і багато чого ще).

CSS додається за допомогою включення таблиці стилів через звернення wp_head(), розміщена в розділі :

JavaScript додається за допомогою введення скрипта через звернення wp_footer(), розміщене в нижній частині документа:

Це розумно. Це те, що вони повинні зробити, щоб змусити цей плагін працювати. Автори плагінів повинні забезпечити, щоб їх плагіни були прості у використанні і працювали.

Як розробник, орієнтований на підвищення продуктивності, я хочу, щоб скрипти і стилі були об’єднані

Тепер у нас є ці два ресурси, які призначені для однієї мети. Коли ви подивіться матеріали, присвячені веб-продуктивності і того, як зробити сайти швидше, перше, що ви почуєте від їх авторів — це потрібно об’єднувати ресурси. Гарне правило: чим менше ресурсів сайту необхідно завантажити, тим швидше він працює.

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

Шрифти іконок і SVG-спрайт призначені для вирішення цієї проблеми. CSS-препроцессоры допомагають об’єднати ваші таблиці стилів. Rails Asset Pipeline також допомагає об’єднати ресурси. Є велика кількість Grunt і Gulp плагінів, які призначені для того ж самого.

Але ми зараз говоримо про WordPress, тому нам потрібні рішення саме для нього.

Чи можуть самі плагіни допомогти нам?

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

Навіть піти настільки далеко, щоб надати ресурси, які вони завантажують, в текстовому полі, з тим, щоб їх можна було легко скопіювати і вставити в нашу систему.

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

Рішення 1: Використовуйте плагін

Плагін MinQueue пропонує рішення, яке мені особисто подобається. Він не робить нічого автоматично, що дозволяє налаштувати, які ресурси ви хочете поєднати, і в якому порядку.

У розділі плагіна, в панелі адміністрування WordPress ви побачите невелику допоміжну посилання:

Для нашої демо-версії, я хочу об’єднати CSS нашої теми і CSS плагіна WP-Polls. Тому я беру ці імена з підказки і розміщую їх в нову чергу завантаження» в налаштуваннях плагіна:

Управління CSS/JS, які завантажують плагіни WordPress

Тепер жоден з цих файлів стилів більше не завантажується окремо. MinQueue створює об’єднану (і закэшированную) версію і обслуговує її:

Ви можете створити кілька черг завантаження«, що в сумі дасть вам достатньо контролю. Наприклад, можливо, підрозділ вашого сайту завантажує різні ресурси, які можуть бути об’єднані окремо, їх не треба поєднувати з основними розділами.

Зверніть увагу, це означає, що ви повинні будете мати чергу завантаження стилів вашої теми, але це досить просто.

Також майте на увазі, що популярний плагін W3 Total Cache також здійснює об’єднання, але я вважаю, що це він робить це набагато складніше. Ви додаєте стилі через URL-адреси, і мені здається, що це загрожує помилками.

Рішення 2: Вручну виділяйте елементи і об’єднуйте їх

Плагіни, які додають ресурси, роблять це через wp_enqueue_script і wp_enqueue style. Ви можете покопатися в коді плагіна і знайти, де вони роблять це. Тоді ви можете побачити ім’я, яке вони застосовують, коли роблять це.

Після чого у власному файлі теми functions.php (або додатковому файлі функцій плагіна ви можете виділити їх з черги. Простий приклад витягу з черги однієї таблиці стилів:

add_action(‘wp_print_styles’, ‘my_deregister_styles’, 100);
function my_deregister_styles() {
wp_deregister_style(‘name-of-style’);
}

Тепер ви можете знайти цей ресурс і об’єднати його з CSS, який ви завантажуєте на сторінці самостійно. Можливо, ви використовуєте CSS-препроцесор, тоді ви можете імпортувати цей ресурс.

Можливо, ви використовуєте обробник завдань на зразок Grunt, тоді ви можете додати його в список файлів, які будуть виділятися і об’єднуватися. Або просто вручну скопіювати і вставити вміст ресурсу на власну таблицю стилів (просто пам’ятайте, що в цьому випадку він не буде оновлюватися при оновленні плагіна).

Рішення 3: Використовуйте плагін для виділення з черги завантаження елементів та їх об’єднання

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

Під час попередніх дискусій на цю тему Нейт Райт з Theme of the Crop показав нам зовсім новий плагін, призначений для цих цілей, під назвою Asset Queue Manager. Через його інтерфейс ви легко можете виділити елементи, без необхідності лестощі в код.

Через інтерфейс сайту ви можете натиснути посилання в панелі адміністрування, щоб вивести випадаюче меню зі списком всіх елементів, що завантажуються сторінки:

Управління CSS/JS, які завантажують плагіни WordPress

Плагін містить кнопку для виділення елементів з черги завантаження. Плагін виведе їх з черги завантаження, поки ви не скасуєте це дія. Тепер ви можете об’єднувати файли ресурси на свій розсуд. В Asset Queue Manager ще одна кнопка, яка дозволяє зв’язатися безпосередньо з ресурсом, таким чином, його дуже легко знайти. Досить круто!

Висновок

Є багато способів управління CSS і JavaScript, які завантажують плагіни WordPress. Ви можете і повинні зробити це для кожного завантаження ресурсу.

Переклад статті «Taking Control of the CSS-JS that WordPress Plugins Load» був підготовлений дружною командою проекту Сайтостроение від А до Я.