Делаем векторную иконку московского метро для WordPress
Опубликовано: 06.09.2018
Благодаря дизайнерам всем известной студии, логотип московского метрополитена не так давно обрёл свои окончательные формы. Сегодня мы научимся внедрять его в WordPress.
Кто не видел, на сайте студии есть очень интересная статья о процессе создания логотипа. После презентации новой айдентики московского транспорта, было много дискуссий на эту тему. Вопрос давно закрыт, и я оставлю его за кадром. Отмечу только, что новый логотип метрополитена неплохо вписался в общую картину. Я имею в виду логотип в той самой «булавке» из фирменного стиля московского транспорта.
Безусловно, использование визуального языка в городской среде, делает ее более комфортной, более удобной в использовании. Узнаваемая на подсознании символика существенно упрощает восприятие, в том числе и в интернете. Информация выглядит более привычно, стильно, минимизируя информационный шум.
Для использования логотипа метро в WordPress в качестве иконки станции, можно пойти привычным для WordPress путем — создать шорткод и оперировать им внутри контента.
Процесс условно можно разбить на 3 этапа:
Загрузка изображения; Создание стиля; Создание шорткода.1. Загрузка изображения
Изображение логотипа логично загружать в векторе, так чтобы иконка одинаково качественно отображалась на любом дисплее с любым разрешением и плотностью пикселей. Для веб лучше всего использовать формат SVG.
Логотип метро в SVG можно скачать в трех цветовых решениях:
Если не удается загрузить SVG с помощью стандартного загрузчика WordPress, рекомендую ознакомиться с публикацией « Как разрешить загрузку SVG в WordPress ».
2. Создание стиля
Задать новые стили в WordPress проще всего добавив их в основной CSS-файл активной темы — style.css. Но это не совсем верный путь, особенно если используется регулярно обновляемая тема. О правильной кастомизации CSS темы я рассказывал в прошлом году.
Необходимо создать новый класс и назвать его .metro , например.
.metro { width: 24px; height: 27px; background: url(images/metro.svg) no-repeat; background-size: 24px 27px; display: inline-block; }В background задаем путь к ранее загруженному изображению. При необходимости размеры 24×27 можно изменить на свои. Проверить правильность сделанного можно, выведя логотип напрямую где-нибудь в коде темы.
<span class="metro"></span>В зависимости от размера используемого шрифта, может возникнуть такая ситуация, что иконка не будет центрирована по-вертикали.
Задать вертикальное позиционирование можно, сместив элемент относительно верха на 10px, к примеру.
position: relative; top: 10px;Получится уже лучше.
Если иконка выводится, тогда можно переходить к следующему шагу. Если нет — ищем ошибку .
3. Создание шорткода
Регистрация шорткодов в WordPress осуществляется с помощью функции add_shortcode() . Произвести регистрацию можно файле функций активной темы — functions.php . Если тема иногда обновляется, тогда будет правильнее зарегистрировать шорткод в плагине или дочерней теме.
// Metro Icon Shortcode function metrofunc( $atts, $content = null ) { return '<span class="metro"></span>'; } add_shortcode( 'metro', 'metrofunc' );В результате мы получим возможность вывода иконки метро шорткодом [metro] в любом месте сайта.
Всё самое новое и интересное я публикую в своём Телеграм-канале . Подписывайтесь!