Делаем векторную иконку московского метро для 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] в любом месте сайта.

Всё самое новое и интересное я публикую в своём Телеграм-канале . Подписывайтесь!

IRC (Internet Relay Chat)
rss