Как добавить файлы изображений 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 от Darryll Doyle) перед загрузкой.
• Ограничить загрузку 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. 

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