Хотите узнать, как загрузить SVG в WordPress? В этом уроке мы представим вам методы достижения этой цели..
Веб-администраторы и веб-дизайнеры вынуждены использовать в своей работе различные форматы медиафайлов. Сегодня одним из самых популярных форматов является SVG, векторный формат на основе XML. К сожалению, не все браузеры и платформы поддерживают SVG, поэтому сначала необходимо включить поддержку SVG вручную.
В этой статье будут описаны шаги по загрузке файлов SVG на веб-сайт WordPress с помощью плагина поддержки SVG. Мы также ответим на несколько вопросов, касающихся проблем безопасности, связанных с этим конкретным форматом медиафайлов, и почему стоит использовать SVG.
Для начала давайте познакомимся с SVG и его работой.
Но прежде чем мы начнем, если вы никогда не устанавливали WordPress, узнайте Как установить WordPress блог шаги 7 et Как найти, установить и активировать WordPress тему на своем блоге
Тогда вернемся к тому, почему мы здесь.
Что такое СВГ?
Масштабируемая векторная графика (SVG) — это текстовый формат изображения векторной графики XML. Хотя распространенные форматы изображений, такие как JPG и PNG, состоят из множества крошечных квадратов, называемых пикселями, этот формат использует язык разметки XML для описания атрибутов изображения.
В январе 2022, 42% всех веб-сайтов по всему миру используйте SVG. Этот процент увеличился с января 2021 года, когда только 29,4% веб-сайтов использовали его. Подобно форматам PNG и JPG, SVG популярен среди веб-сайтов с высоким трафиком, таких как Google, Wikipedia и YouTube.
Еще одна замечательная особенность SVG заключается в том, что он широко поддерживается всеми основными браузерами.
Вот список браузеров которые поддерживают формат файла SVG:
| навигатор | Частичная поддержка | Полная поддержка |
| Bord | – | Версия 12-18, 79-96, 97 |
| Fire Fox | Версия 2 | Версии 3-94, 95, 96-97 |
| Фаерфокс для Android | – | Версия 95 |
| Chrome | – | Версии 4-96, 97, 98-100 |
| Chrome для Android | – | Версия 96 |
| Сафари | Версия 3.1 | Версия 3.2-15.1, 15.2, ТП |
| Опера | – | Версии 10-81, 82 |
| Мини Опера | – | Все версии |
| Opera Mobile | – | Выпуск 12-12.1, 64 |
| Сафари на iOS | – | Выпуск 3.2-15.1, 15.2 |
| Android-браузер | Версия 3-4.3 | Выпуск 4.4-4.4.4, 96 |
| UC-браузер для Android | – | Версия 12.12 |
| Интернет-магазин Samsung | – | Выпуск 4-14.0, 15.0 |
| QQ Browser | – | Версия 10.4 |
| Baidu Browser | – | Версия 7.12 |
| Браузер KaiOS | – | Версия 2.5 |
Как работает SVG?
В SVG-графике для создания двухмерных векторных изображений используется XML. В отличие от JPG и PNG, векторная графика не имеет пикселей. Вместо этого её поведение описывается в текстовых XML-файлах.
По этой причине SVG можно искать, индексировать, создавать сценарии, изменять и сжимать, как и код. В результате любой может создать их с помощью текстового редактора или программного обеспечения для векторной графики.
Поддерживает ли WordPress SVG?
В WordPress по умолчанию отсутствует поддержка SVG из-за связанных с ним рисков безопасности — мы подробнее рассмотрим проблемы безопасности, связанные с SVG, позже.
Вот сообщение об ошибке, которое появляется при загрузке SVG-графики на веб-сайт WordPress:
Есть текущее обсуждение о том, чтобы сделать SVG частью основной функциональности WordPress. До тех пор нам нужно проявить творческий подход и использовать другие решения для загрузки изображений SVG в WordPress.
Зачем использовать WordPress SVG?
Несмотря на проблемы с безопасностью, многие пользователи по-прежнему используют этот формат изображения, поскольку он имеет ряд преимуществ. Вот некоторые из преимуществ использования файлов SVG:
- Масштабируемость: Поскольку SVG — это формат векторного изображения, файлы SVG сохраняют одинаковое качество при любом разрешении экрана. Это преимущество также присутствует после их увеличения, поэтому многие люди используют этот масштабируемый формат изображения для значков и логотипов.
- Меньший размер файла SVG-файлы упрощают повышение производительности веб-сайта, поскольку занимают меньше места в веб-хранилище и загружаются гораздо быстрее, чем другие изображения.
- SEO Friendly Google индексирует SVG-файлы, что позволяет им отображаться в поиске изображений Google и улучшает ваши SEO-показатели. В случае с другими типами изображений вы ограничены оптимизацией их атрибутов alt.
- SVG на основе кода редактируются с помощью текстового редактора или программного обеспечения для редактирования векторной графики. Вы можете оптимизировать файлы SVG для веб-сайтов или даже добавить анимацию, чтобы сделать графику интерактивной.
SVG на WordPress и безопасность
Поскольку SVG по сути является текстовым XML-файлом, в нем есть уязвимые места, которые не затрагивают другие форматы изображений. Поэтому люди могут легко взломать его с помощью вредоносного кода для запуска атак межсайтового скриптинга (XSS) и XML External Entity (XXE) на вашу систему.
По этой причине вы должны быть осторожны при обработке файлов SVG и добавлении их в WordPress.
Чтобы свести к минимуму риски безопасности, обязательно санируйте файлы SVG перед их загрузкой в медиатеку WordPress. Этот процесс удаляет подозрительный код и ошибки, делая изображения безопасными для вашего сайта.
Вы можете очистить загруженные SVG-файлы с помощью плагина для SVG — мы рассмотрим эти шаги позже. Однако мы рекомендуем дезинфицировать их дважды с помощью... Тест дезинфицирующего средства SVG -
Еще один способ обезопасить ваш сайт WordPress — ограничить загрузку SVG-файлов только для доверенных пользователей. Избранные пользователи должны быть осведомлены о проблемах безопасности, связанных с форматом SVG, — это отпугнет их от получения SVG-файлов из сомнительных источников.
Как загрузить файлы SVG в WordPress двумя безопасными способами
Технически есть два способа добавить поддержку SVG в WordPress: с помощью плагина WordPress или включить ее вручную. Какой бы вариант вы ни выбрали, мы настоятельно рекомендуем ограничить права на загрузку только администраторами и доверенными пользователями, чтобы свести к минимуму вредоносные загрузки.
Используйте плагин WordPress
В этом уроке мы будем использовать Поддержка SVGЭтот плагин WordPress использует библиотеку SVG-дезинфектора, которая автоматически активируется при загрузке файлов SVG в медиатеку. Он также прост в настройке и бесплатен в использовании.
Вот шаги для настройки поддержки SVG:
- IУстановить плагин и активируйте его.
- Доступ к Настройки -> поддержка SVG с панели управления WordPress.
- Установите флажок рядом с вариантом Ограничить для администраторов чтобы ограничить права загрузки. Сделайте то же самое для варианта Активировать расширенный режим если вам нужен доступ к расширенным функциям, таким как встроенный рендеринг SVG и стили CSS.
- После сохранения изменений можно смело приступать к загрузке файлов SVG в медиатеку.
Вручную добавьте поддержку WordPress SVG
Этот метод включает в себя редактирование файла functions.php вашего сайта WordPress. Поэтому мы настоятельно рекомендуем вам выполнить эти шаги, если вы знакомы с PHP и полностью понимаете проблему безопасности SVG.
Убедитесь, что резервное копирование вашего сайта WordPress перед внесением изменений, чтобы избежать потери данных в случае неправильной настройки.
Следующие шаги объяснят, как вручную включить SVG в WordPress с помощью FTP-клиента, например, FileZilla.
- Перейдите в каталог файлов вашего сайта на вашем хосте
- Доступ к public_html -> WP-включает в себя. Прокрутите вниз, пока не найти functions.php.
- Щелкните этот файл правой кнопкой мыши и выберите «Просмотр/редактирование», чтобы открыть его и вставить в него следующий фрагмент кода:
function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');- Сохраните изменения и попробуйте загрузить новый файл SVG. Если процесс прошел успешно, ваша медиатека должна принять загрузку файла.
Многие преимущества файлов SVG способствуют растущей популярности этого типа файлов. К сожалению, текстовые XML-файлы подвержены внедрению кода, что является основной причиной того, что WordPress по умолчанию не включает поддержку SVG.
Тем не менее, есть два способа принять файлы SVG для вашего сайта WordPress: использовать плагин WordPress или отредактировать файл. functions.php. Помимо ограничения прав на загрузку, вы сможете безопасно загружать файлы SVG в медиатеку веб-сайта.
Другие рекомендуемые ресурсы
Мы также приглашаем вас ознакомиться с указанными ниже ресурсами, чтобы получить дополнительную информацию о вашем веб-сайте и блоге.
- Как создать простой плагин WordPress
- Как создать простой плагин Gutenberg Block для WordPress
- Как установить домашнюю страницу в WordPress
- Как понять панель инструментов WordPress
- Как создать простой плагин WordPress
Заключение
На этом руководство по загрузке SVG-файлов в WordPress завершается. Мы надеемся, что эта статья дала вам общее представление о преимуществах и рисках загрузки SVG-файлов на веб-сайт WordPress. Если у вас есть какие-либо вопросы или предложения, пожалуйста, сообщите нам об этом в комментариях. Комментарии.
Однако вы также сможете ознакомиться с нашими Ressources, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
В то же время, поделитесь этой статьей в разных социальных сетях.
...