09 Авг Вставка SVG с ховер-эффектом на страницу WordPress
В этой статье мы расскажем об одном из очень удобных способах размещения изображения формата SVG с ховер-эффектом на страницу WordPress. Дело в том, что вставка обычного SVG изображения на сайт не представляет из себя ничего сложного. Достаточно, например, установить плагин SVG-support или ему подобный, чтобы внедрить поддержку данного формата. Но в данном случае мы не сможем управлять свойствами SVG изображения при наведении на него мыши. А это очень большое упущение, если мы хотим обеспечить максимально интересное взаимодействие с интерфейсом.
Сразу стоит сделать небольшую оговорку: если вы совсем не умеете работать с SVG-графикой и ее кодом, посмотрите наш небольшой цикл видео «Введение в SVG-графику»:
Итак, какие исходники нам потребуются:
- Код SVG изображения
- Код этого же изображения с измененными цветами
- Сайт на WordPress
- Плагин, позволяющий создавать сниппеты (шорт-коды) из HTML кода
- Плагин, позволяющий добавлять пользовательский CSS на отдельную страницу сайта
- Кофе (опционально)
Для демонстрации используем простой пример — наш логотип.
Исходный вид
Вид при наведении мыши
Мы предполагаем, что вы уже знакомы с форматом SVG и его кодом. Ниже мы приведем пример кода, уже готового для вставки. Поскольку SVG имеет ту же разметку, что и HTML, мы могли бы вставить его в исходный код страницы с заданным классом, а затем прописать ховер-эффект в главном CSS файле. Получилось бы следующее:
See the Pen Devtool logo hover by Alexander Webmassa (@Webmassa) on CodePen.
Но мы имеем дело с WordPress. Да, эта CMS поддерживает вставку HTML кода прямо в текст страницы. Но теперь давайте представим, что нам необходимо разместить не одну простую SVG иконку, а 10-15. Например, вы оформляете раздел «Клиенты» с множеством логотипов со сложными заливками. Если все они будут размещены через простую вставку кода, редактирование страницы превратится в серьезную проблему.
Для этого и нужны так называемые сниппеты или шорт-коды. Существует множество плагинов, позволяющих вставлять HTML код в тело страницы WordPress, в том числе и код SVG. Мы использовали плагин XYZ HTML — рекомендуем, но здесь все зависит от вашего выбора.
Создаем сниппет с SVG кодом
Все что от нас требуется — вставить SVG код одной строкой в поле HTML code. Сохраняем полученный сниппет и получаем шорткод для вставки в редактор страницы или записи WordPress. Вы можете использовать как встроенный WYSYWIG-редактор, так и дополнительно установленные Visual Composer, Page Builder и т.п.
А чтобы добавить для нашего SVG эффект при наведении, необходимо добавить пользовательский CSS код на отдельной странице. Например, можете использовать встроенный CSS-редактор в Visual Composer или установить плагин Add Custom CSS. Как выглядит этот код, вы можете увидеть выше в нашем примере на Codepen.
Получаем такой вот простой ховер-эффект.
Безусловно, есть и другие способы. Например, вы можете создать отдельный PHP-блок, а затем вставить его на страницу, можете создать отдельный шаблон страницы, который уже содержал бы SVG-изображения с эффектами. Но мы привели здесь один из самых простейших и удобных способов, который подойдет и для новичков.
С помощью сниппетов вы можете создать у себя целую библиотеку SVG-изображений с различными эффектами при наведении. А используя пользовательский JS-код, создавать красивые анимации. Поэтому мы рекомендуем пользоваться возможностями WordPress и огромным выбором расширений для этой CMS.
Рисуйте, разрабатывайте, развлекайтесь и следите за нашими обновлениями!