Вы хотите добавить SVG файлы на свой сайт WordPress?
По умолчанию WordPress позволяет загружать все популярные форматы изображений, аудио- и видеофайлов, но SVG среди них нет. Существуют потенциальные проблемы с безопасностью, но есть способы безопасного использования.
В этой статье мы покажем вам, как легко добавить SVG в WordPress.
Что такое SVG?
SVG или Scalable Vector Graphics — это формат файлов, который определяет векторную графику с помощью языка разметки XML. Главное преимущество SVG в том, что он позволяет увеличивать изображения без потери качества или пикселизации.
Как работает SVG?
Масштабируемая векторная графика (SVG) — это технология, которая отображает двухмерные рисунки с помощью XML. Они отличаются от широко используемых форматов изображений, таких как PNG, GIF или JPEG.
Если вы возьмете файл изображения png или jpeg и увеличите его, то заметите, что изображение начнет размываться и пикселироваться.
Векторная графика не использует пиксели. Вместо этого они используют двухмерную карту, которая определяет графику, которую вы просматриваете. При увеличении масштаба изображение не пикселируется.
Это позволяет вам увеличивать векторную графику без потери качества. Самое главное, что SVG изображения могут быть намного меньше по размеру, чем jpg или png.
Векторная графика обычно используется для иконок, шрифтов иконок, логотипов сайтов и брендинговых изображений. Вы можете добавить SVG файлы в WordPress для логотипа вашей компании, иконок или другой графики.
Как бы круто они ни звучали, файлы SVG все еще немного небезопасны. Вот почему WordPress по умолчанию не поддерживает загрузку SVG-файлов.
Если вы загрузите SVG-изображение в WordPress, то увидите следующее сообщение об ошибке:
Извините, этот тип файлов не разрешен по соображениям безопасности.
Проблемы безопасности, связанные с SVG в WordPress
Файлы SVG содержат код на языке разметки XML, который похож на HTML. Ваш браузер или программа для редактирования SVG анализирует язык разметки XML, чтобы вывести результат на экран.
Однако это откроет ваш сайт для возможных XML-уязвимостей. Он может быть использован для получения несанкционированного доступа к данным пользователя, проведения атак грубой силы или межсайтовых скриптовых атак.
Методы, которыми мы поделимся в этой статье, попытаются санитировать SVG файлы для повышения их безопасности. Однако эти плагины не могут полностью предотвратить загрузку или внедрение вредоносного кода.
Лучшее решение — использовать только файлы SVG, созданные надежными источниками, и ограничить загрузку SVG только доверенными пользователями.
Чтобы узнать больше о безопасности, ознакомьтесь с нашим полным руководством по безопасности WordPress для начинающих.
Учитывая это, давайте рассмотрим, как легко и безопасно использовать SVG файлы в WordPress, используя один из 3 методов.
- Метод 1. Разрешить SVG-файлы в WordPress с помощью WPCode
- Метод 2. Загрузка SVG-файлов в WordPress с помощью поддержки SVG
- Метод 3. Загрузка SVG-файлов в WordPress с помощью Safe SVG
Метод 1. Разрешить SVG файлы в WordPress с помощью WPCode
Самый простой и легкий способ безопасно разрешить загрузку SVG в WordPress — это использование WPCode, самого мощного плагина для работы с фрагментами кода.
WPCode поставляется с большой библиотекой предварительно настроенных фрагментов кода, которые могут заменить множество одноразовых плагинов на вашем сайте, от отключения страниц вложений, использования классического редактора постов или разрешения загрузки SVG файлов.
Во-первых, вам нужно будет установить и активировать бесплатный плагин WPCode. Для получения подробных инструкций см. наше пошаговое руководство по установке плагина WordPress.
После активации вы должны перейти на страницу Сниппеты кода » Добавить сниппет в ваш WordPress панель администратора. Просто найдите в поиске ‘svg’ и наведите курсор мыши на ‘Разрешить загрузку SVG файлов.’
Затем вы можете нажать на кнопку «Использовать сниппет.’
Далее вы попадете на страницу ‘Edit Snippet’, где WPCode уже настроил все параметры, необходимые для выполнения кода.
Все, что вам нужно сделать, это переключить переключатель на ‘Active’, а затем нажать кнопку ‘Update’.
Теперь вы сможете загружать SVG-файлы, не получая от WordPress сообщений об ошибках или предупреждений.
Затем вы можете обращаться с ним так же, как и с любым другим изображением на вашем сайте WordPress.
По умолчанию сниппет WPCode позволяет добавлять SVGs в WordPress только пользователям с ролью администратора.
Вы также можете предоставить разрешение всем остальным ролям пользователей, просто удалив строки 14-16 фрагмента кода.
Вы также можете «закомментировать их», добавив две косые черты «//» в начало каждой из этих строк, придав им светло-коричневый цвет. WPCode не будет выполнять ту часть сниппета, которую он воспринимает как комментарий, а не код.
Вы можете увидеть пример этого в строках 11-13 на изображении ниже.
В любом случае, после удаления кода, все пользователи смогут загружать SVG файлы на ваш сайт WordPress. Не забудьте нажать ‘Обновить’, чтобы сохранить все сделанные изменения.
Способ 2. Загрузка SVG-файлов в WordPress с помощью поддержки SVG
Этот метод использует плагин SVG Support и позволяет отображать встроенные SVG в постах и страницах WordPress, а также контролировать, кто имеет разрешение на их загрузку.
Во-первых, вам нужно установить и активировать плагин SVG Support. Для более подробной информации смотрите наше пошаговое руководство о том, как установить плагин WordPress.
После активации вам необходимо посетить Настройки » Поддержка SVG страница для настройки параметров плагина.
На странице настроек вам нужно установить флажок «Ограничить доступ администраторов»?’ опция. Это позволит только администратору сайта загружать SVG файлы в WordPress.
Следующий вариант — включить расширенный режим. Вам нужно отметить эту опцию, только если вы хотите использовать расширенные возможности, такие как CSS-анимация и встроенный SVG-рендеринг.
Не забудьте нажать на кнопку сохранения изменений, чтобы сохранить ваши настройки.
Теперь вы можете создать новое сообщение или отредактировать существующее. В редакторе постов вы загрузите ваш SVG-файл, как вы бы загрузили любой другой файл изображения. Просто добавьте блок изображения в редактор, а затем загрузите SVG-файл.
Теперь вы сможете загружать и встраивать SVG-файлы в WordPress.
Метод 3. Загрузка SVG файлов в WordPress с помощью Safe SVG
Этот метод также использует плагин и позволяет выполнять санитарную обработку SVG файлов, загружаемых в WordPress.
Первое, что вам нужно сделать, это установить и активировать плагин Safe SVG. Для более подробной информации смотрите наше пошаговое руководство о том, как установить плагин WordPress.
Плагин работает «из коробки», и вам не нужно настраивать никаких параметров. Вы можете просто пойти вперед и начать загрузку SVG файлов.
Недостатком является то, что этот плагин позволяет загружать SVG всем пользователям, которые могут писать посты на вашем сайте WordPress.
Для того чтобы контролировать, кто может загружать файлы, вам необходимо приобрести премиум-версию плагина.
Надеемся, эта статья помогла вам узнать, как безопасно добавлять файлы SVG в WordPress. Вы также можете ознакомиться с нашей статьей о том, как исправить наиболее распространенные проблемы с изображениями в WordPress и о лучших SEO-плагинах и инструментах.
Источник: www.wpbeginner.com