Делаем векторную иконку московского метро для Вордпресс

Кто не видел, на сайте студии есть очень интересная статья о процессе создания логотипа. После презентации новой айдентики московского транспорта, было много дискуссий на эту тему. Вопрос давно закрыт, и я оставлю его за кадром. Отмечу только, что новый логотип метрополитена неплохо вписался в общую картину. Я имею в виду логотип в той самой «булавке» из фирменного стиля московского транспорта.

Безусловно, использование визуального языка в городской среде, делает ее более комфортной, более удобной в использовании. Узнаваемая на подсознании символика существенно упрощает восприятие, в том числе и в интернете. Информация выглядит более привычно, стильно, минимизируя информационный шум.

Интеграция иконки в Вордпресс

Для использования логотипа метро в Вордпресс в качестве иконки станции, можно пойти привычным для Вордпресс путем — создать шорткод и оперировать им внутри контента.

Процесс условно можно разбить на 3 этапа:

1. Загрузка изображения;
2. Создание стиля;
3. Создание шорткода.

Загрузка изображения

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

Логотип метро в SVG можно скачать в трех цветовых решениях:

• Красный (фирменный);
• Черный;
• Белый.

Если не удается загрузить SVG с помощью стандартного загрузчика WordPress, рекомендую ознакомиться с публикацией «Как разрешить загрузку SVG в 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;

Получится уже лучше.

Если иконка выводится, тогда можно переходить к следующему шагу. Если нет — ищем ошибку.

Создание шорткода

Регистрация шорткодов в Вордпресс осуществляется с помощью функции add_shortcode(). Произвести регистрацию можно файле функций активной темы — functions.php. Если тема иногда обновляется, тогда будет правильнее зарегистрировать шорткод в плагине или дочерней теме.

// Metro Icon Shortcode
function metrofunc( $atts, $content = null ) {
   return '<span class="metro"></span>';
}
add_shortcode( 'metro', 'metrofunc' );

В результате мы получим возможность вывода иконки метро шорткодом [metro] в любом месте сайта.