Як додати файли зображень 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 із вбудованою санітаризацією.
• Санiтiзацiя через онлайн-інструменти (наприклад, тест санітайзера SVG Darryll Doyle) перед завантаженням.
• Обмежити завантаження SVG лише для адміністратора або довірених користувачів.

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

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

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

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

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

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

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

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

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

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