Как добавить поддержку SVG в WordPress

По умолчанию WordPress поддерживает множество графических форматов, в том числе .jpg, .jpeg, .png и .gif. Но CMS не позволяет использовать масштабируемую векторную графику (SVG). К счастью, добавить поддержку SVG в WordPress довольно просто.

В этой статье мы рассмотрим, что такое SVG. Затем мы научим вас добавлять поддержку SVG в WordPress, используя два разных метода.

Что такое масштабируемая векторная графика и чем она полезна

Что такое масштабируемая векторная графика и чем она полезна

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

SVG не является форматом изображений как таковым. Это язык разметки, который используется для создания двумерных изображений, состоящих из векторов. Определение может показаться сложным. Но на практике вы будете использовать SVG так же, как и другие форматы изображений.

При этом SVG обладают преимуществами по сравнению с более распространенными форматами изображений. Например:

  • Занимают меньше места.  Вместо пикселей SVG состоит из векторов. Таким образом, изображения будут иметь меньший вес.
  • Легко масштабировать.  Существуют пределы того, насколько можно масштабировать обычные изображения, прежде чем они начнут выглядеть ужасно. Это не относится к SVG, поскольку векторы можно увеличивать без потери качества.
  • Можно анимировать SVG с помощью CSS.  Что позволяет создать уникальные эффекты (мы поговорим об этом позже).

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

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

Как добавить поддержку SVG в WordPress (два простых способа)

По умолчанию WordPress не поддерживает формат SVG. Но это можно исправить вручную или использовать специальный плагин.

Способ 1. Использование плагина SVG Support

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

Способ 1. Использование плагина SVG Support

После установки и настройки плагина вы сможете добавлять SVG-файлы на свой WordPress-сайт. В расширении есть две настройки, которые можно изменить в зависимости от ваших потребностей. Для начала перейдем на вкладку «Настройки» → «Поддержка SVG»:

Способ 1. Использование плагина SVG Support - 2

Здесь вы найдете два параметра. Первый включает расширенный режим работы плагина, который позволяет ориентировать SVG с помощью CSS. Если вы не хотите анимировать SVG, то можете пропустить эту опцию.

Также можно активировать возможность загрузки SVG только для администратора, включив параметр «Ограничить для администраторов»?

Способ 2: Изменить файл functions.php

Файл functions.php в себя важные функции, классы и фильтры. Также через него можно добавить поддержку формата SVG в WordPress.

Чтобы получить доступ к этому файлу, зайдите на свой сайт с помощью FTP. Если у вас нет FTP-клиента, мы рекомендуем использовать FileZilla. После этого перейдите в корневую папку, которая обычно называется public_html или совпадает с именем сайта.

Способ 2: Изменить файл functions.php

Затем зайдите в папку wp-includes и найдите functions.php. Важно отметить, что это родительский файл. Отдельные файлы functions.php существуют в каждой теме

Способ 2: Изменить файл functions.php - 2

В качестве примера мы добавим код в родительский файл functions.php. Но обратите внимания, что внесенные изменения теряются при обновлении WordPress. Поэтому данный код лучше добавлять в файл functions.php используемой темы оформления.

Откройте 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_action('upload_mimes', 'add_file_types_to_uploads');

Сохраните изменения и закройте файл. Затем вернитесь в панель администрирования и протестируйте новую функцию, загрузив SVG- файл в медиа библиотеку сайта!

Анимирование SVG-изображений с помощью CSS

Анимирование SVG-файлов является довольно сложным процессом. Но она позволяет создавать анимацию, которая имеет небольшой размер. Также вы сможете масштабировать анимированные SVG-файлы по мере необходимости, чего нельзя достичь при работе с GIF-файлами.

Заключение

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

Появились вопросы о том, как добавить поддержку SVG в WordPress? Задайте их в комментариях!

Дайте знать, что вы думаете по данной теме статьи в комментариях. Мы крайне благодарны вам за ваши комментарии, подписки, дизлайки, отклики, лайки!

Пожалуйста, опубликуйте ваши комментарии по текущей теме статьи. За комментарии, отклики, дизлайки, подписки, лайки низкий вам поклон!

Дайте знать, что вы думаете по данной теме материала в комментариях. За комментарии, лайки, дизлайки, отклики, подписки низкий вам поклон!

Вадим Дворниковавтор-переводчик статьи «How to Add SVG to WordPress Your Guide to Vector Images in WordPress»