Как добавить файлы изображений 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 Support

• Установите «SVG Support» через Плагины > Добавить новый, активируйте его.
• В настройках установите флажок "Ограничить администратором" и/или "Включить расширенный режим" (встроенный рендеринг, стилизация 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 атаки (JavaScript).
• XXE-атаки (внешние вызовы сущностей).

Лучшие практики:

• Используйте плагины, такие как SVG Support, SVG Safe, HappyFiles, со встроенной функцией очистки данных.
• выполните очистку с помощью онлайн-инструментов (например, теста SVG Sanitizer Test от Даррилла Дойла).
• Ограничить загрузку SVG только для администраторов или доверенных пользователей.

WP Media Folder и почему это важно для SVGs на WordPress

WP Media Folder - мощный менеджер медиатеки

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

-Расширенные фильтры, сортировка, перетаскивание

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

- Совместим со многими инструментами, такими как Page Builders, WooCommerce и WPML.

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

В заключение: повысьте уровень вашего сайта с помощью SVG и WP Media Folder

Перестаньте бороться с беспорядочными папками с медиафайлами и неоптимизированными изображениями. Вместо этого раскройте весь потенциал SVG, легких, доступных для поиска и адаптируемых, с помощью интуитивно понятных инструментов организации WP Media Folder. 

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