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

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

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

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

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

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

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

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

Доступність - Правильно налаштована, SVG містять доступні текстові теги та ролі, які читачі екрана можуть інтерпретувати, лише ще одна суцільна причина їх використання.

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

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

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

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

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

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

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

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

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

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

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

функція enable_svg_upload ($ mimes) {$ mimes ['svg'] = 'зображення/svg+xml'; повернути $ mimes; } add_filter ('upload_mimes', 'enable_svg_upload'); 

Де: Функції теми.php (завжди примушують дочірню тему!).

Недоліки: Немає санітарії за замовчуванням - Risky, якщо не поєднується з дезінфікуючим засобом. І завантажити, обмежений адміністратором (ви можете це налаштувати).

3. Міркування безпеки

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

• Атаки XSS (JavaScript).
• Xxe атаки (зовнішні виклики сутності).

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

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

WP Media Folder і чому це має значення для SVG на WordPress

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

- Папка/Субфадкова структура

-Даджановані фільтри, сортування, перетягування та краплі

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

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

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

Загортання: Підніміть свій сайт за допомогою SVGS та WP Media Folder

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

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