Как добавить файлы изображений SVG в WordPress

Готовы ли вы серьёзно обновить графику своего сайта WordPress? Представьте себе бесконечно масштабируемый логотип и иконки, которые выглядят чётко на любом устройстве, без пикселизации и искажений. Это руководство подробно покажет вам, как загружать и управлять SVG-файлами в WordPress с помощью WP Media Folder. Оно подходит для всех, даже если вы не разработчик.

В этом пошаговом учебном пособии мы распаковываем преимущества файлов SVG, почему дизайнеры любят их и почему они фантастические для SEO и Page Performance. Вы выучите несколько простых методов, чтобы включить загрузки SVG: от использования доверенных плагинов до простых настроек кода, а также интеллектуальные стратегии для обеспечения безопасности вашего сайта.

Мы будем использовать WP Media Folder, мощный плагин Media Management от JoomUnited. 

Почему SVG отлично подходят для масштабируемой графики

Масштабируемость - SVG - это векторные файлы. Это означает, что вы можете масштабировать, увеличить или уменьшить их, не теряя качества для логотипов, значков или отзывчивых дизайнов.

Легкие и дружеские - файлы SVG часто меньше растровых изображений и являются текстовыми XML, так что поисковые системы могут напрямую читать элементы ключа (Alt Text, заголовки и т. Д.).

Стилирование и анимация - вы можете манипулировать SVG с помощью CSS или JavaScript. Хотите эффект зависания или анимации? Легкий.

Доступность - правильно настроена, SVG содержат доступные текстовые теги и роли, которые считыватели экрана могут интерпретировать, просто еще одна веская причина для их использования.

Решения для добавления SVG в WordPress

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

1. Используйте плагин

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

• Установите бесплатный плагин WPCode.
• Добавьте фрагмент «Разрешить файлы SVG» из его библиотеки и активировать его.
• По умолчанию только администраторы могут загружать SVGS.

б) плагин поддержки SVG

• Установите «поддержку SVG» через плагины> Добавить новый, активируйте его.
• В своих настройках проверьте «ограничить администратором» и/или «Включить расширенный режим» (встроенное рендеринг, стиль CSS).
• Загрузите свой SVG через Media> Добавить новый или перетаскивать.

в) Другие варианты :

• SVG Safe от Даррелла Дойла, старше, но все еще используется.
• SVG поддерживает дезинфекции загрузки, чтобы предотвратить риски XSS/XXE.
• HappyFiles/Catfolders добавляют загрузки SVG с дезинфекцией и предварительным просмотром.

2. Добавить код фрагмент в functions.php

Вы можете использовать следующий код: 

функция enable_svg_upload ($ mimes) {$ mimes ['svg'] = 'image/svg+xml'; вернуть $ mimes; } add_filter ('upload_mimes', 'enable_svg_upload'); 

Где: функции темы.

Недостатки: без дезинфекции по умолчанию - Риски, если только в сочетании с дезинфицирующим средством. И загрузить ограниченную администратором (вы можете настроить это).

3. Соображения безопасности

 Svg = xml, который может содержать:

• XSS атаки (JavaScript).
• Xxe атаки (внешние вызовы сущности).

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

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

WP Media Folder и почему она имеет значение для SVGS на WordPress

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

- Структура папки/подводчика

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

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

- Совместимо со многими инструментами, такими как строители страниц, Woocommerce и WPML.

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

Завершение: поднять свой сайт с помощью SVGS и WP Media Folder

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

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