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

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

5 декабря 2016 429

Благодаря дизайнерам всем известной студии, логотип московского метрополитена не так давно обрёл свои окончательные формы. Сегодня мы научимся внедрять его в WordPress.

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

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

Интеграция иконки в WordPress

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

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

  1. Загрузка изображения;
  2. Создание стиля;
  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>

В зависимости от размера используемого шрифта, может возникнуть такая ситуация, что иконка не будет центрирована по-вертикали.

metro-2

Задать вертикальное позиционирование можно, сместив элемент относительно верха на 10px, к примеру.

position: relative;
top: 10px;

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

metro-1

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

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

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

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

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

Vds vps хостинг

vds vps хостинг

vpshoster.ru

Иван Данилин
Автор: Иван Данилин

Практикующий веб-разработчик, специализируюсь на платформе Вордпресс.

  ПОДПИСАТЬСЯ

Комментарии

Разгоните свой WordPress

Выбираем быстрый и надежный хостинг для своих сайтов

Подробнее