Як додати файли зображень SVG у WordPress

Готові надати своєму сайту WordPress серйозне оновлення графіки? Уявіть собі нескінченно масштабований логотип та іконки, які виглядають чітко на будь-якому пристрої, без пікселізації, без спотворень. Цей посібник показує вам, як саме завантажувати та керувати файлами SVG у WordPress за допомогою WP Media Folder, і він створений для будь-кого, навіть якщо ви не розробник.

У цьому покроковому підручнику ми розкриємо переваги файлів SVG, чому дизайнери їх люблять і чому вони чудово підходять для SEO та продуктивності сторінки. Ви дізнаєтесь про декілька простих методів увімкнення завантаження SVG: від використання надійних плагінів до простих змін у коді, а також розумні стратегії для забезпечення безпеки вашого сайту.

Ми будемо використовувати WP Media Folder, потужний плагін керування медіафайлами від JoomUnited. 

Чому SVG чудово підходять для масштабованої графіки

Масштабованість – SVG-файли – це векторні файли. Це означає, що ви можете збільшувати, зменшувати їх масштаб без втрати якості логотипів, значків або адаптивного дизайну.

Легкі та SEO-дружні – SVG-файли часто менші за растрові зображення та є текстовим XML-файлом, завдяки чому пошукові системи можуть безпосередньо зчитувати ключові елементи (альтернативний текст, заголовки тощо).

Стилізація та анімація – Ви можете маніпулювати SVG-файлами за допомогою CSS або JavaScript. Потрібен ефект наведення курсора або анімація? Легко.

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

Рішення для додавання SVG у WordPress

WordPress блокує SVG за замовчуванням через ризики безпеки (SVG — це XML, який може містити шкідливий код), однак є три надійні способи увімкнути підтримку SVG:

1. Використовуйте плагін

 а) WPCode + фрагмент SVG

• Встановіть безкоштовний плагін WPCode.
• Додайте фрагмент 'Allow SVG Files Upload' з його бібліотеки та активуйте його.
• За замовчуванням лише адміністратори можуть завантажувати SVG.

 б) Плагін підтримки SVG

• Встановіть "SVG Support" через Plugins > Add New, активуйте його.
• У його налаштуваннях перевірте "Обмежити для адміністратора" та/або "Увімкнути розширений режим" (вбудоване відображення, стилізація CSS).
• Завантажте свій SVG через Медіа > Додати новий або перетягніть його.

в) Інші варіанти:

• SVG Safe від Darrell Doyle, старіший, але все ще використовується.
• SVG Support санізує завантаження, щоб запобігти ризикам XSS/XXE.
• HappyFiles/CatFolders додають завантаження SVG із санітаризацією та попереднім переглядом.

2. Додайте фрагмент коду до functions.php

Ви можете використовувати наступний код: 

function enable_svg_upload($mimes) { $mimes['svg'] = 'image/svg+xml'; return $mimes; } add_filter('upload_mimes', 'enable_svg_upload'); 

Де: functions.php теми (завжди використовуйте дочірню тему!).

Недоліки: санітарна обробка відсутня за замовчуванням — ризиковано, якщо не використовувати санітарний засіб. А завантаження обмежено адміністратором (ви можете це налаштувати).

3. Розгляди безпеки

 SVG = XML, який може містити:

• XSS attacks (JavaScript).
• XXE-атаки (зовнішні виклики об'єктів).

Найкращі практики:

• Використовуйте плагіни, такі як SVG Support, SVG Safe, HappyFiles, із вбудованою функцією очищення.
• продезінфікуйте за допомогою онлайн-інструментів (наприклад, тесту санітайзера SVG від Дарріла Дойла).
• Обмежити завантаження SVG лише для адміністратора або довірених користувачів.

WP Media Folder і чому це важливо для SVG на WordPress

WP Media Folder - це потужний менеджер бібліотеки медіа

- Структура папок і підпапок

-Розширені фільтри, сортування, перетягування

 - Перейменування, додавання водяних знаків, масова заміна, попередній перегляд, завантаження

- Сумісний з багатьма інструментами, такими як Побудовники сторінок, WooCommerce та WPML.

Хоча WP Media Folder сам по собі не дозволяє використовувати SVG-файли, він дозволить нам організувати, підтримувати та керувати будь-яким типом файлів, включаючи SVG-файли.

Підсумок: Підвищте свій сайт за допомогою SVG та WP Media Folder

Припиніть боротися з безладними папками медіафайлів та неоптимізованими зображеннями. Замість цього розкрийте повний потенціал SVG-файлів, легких, пошукових та адаптивних, за допомогою інтуїтивно зрозумілих інструментів організації WP Media Folder. 

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