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

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

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

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

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

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

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

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

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

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

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

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

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

Метод 1. Использование плагина SVG Support

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

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

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

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

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

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

Метод 2: Настроить файл functions.php

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

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

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

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

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

В виде примера мы добавим код в родительский файл 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? Задайте их в комментариях!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *