Добавление иконки ВКонтакте к теме для WordPress

wordpresscustomizationWordPress помимо того, что позволяет быстро создать свой сайт, используя одну из многочисленных тем, также имеет удобные возможности по созданию собственного оформления. Например, одна из возможностей это создание дочерних тем от уже существующих. Это удобно, так как существующие темы, особенно те, что автоматически устанавливаются вместе с WP, имеют весь необходимый функционал, а также используют все встроенные возможности.

Например, вы создаете дочерную тему от темы TwentySixteen. Это хороший выбор, но проблема в том, что TwentySixteen (впрочен как многие другие похожие темы) имеет встроенную возможность создания меню социальных ссылок, но при этом не имеют в своем распоряжении иконки ВКонтакте. Вместо неё используется прочто иконка «по-умолчанию», но это конечно, же не может нас строить

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

Для подстановки иконок использует какой-нибудь шрифт. Одним из популярных для этого шрифтом является http://genericons.com/. Работает он достаточно просто и в инструкции на сайте все подробно расписано. Также есть статьи и на русском языке https://wpmag.ru/2013/genericons-besplatnyie-ikonki-dlya-vashih-tem-wordpress/.

Но проблема в том, что этот шрифт не имеет иконки ВКонтакте. И более того, авторы шрифта не смотря на просьбы не собираются эту иконку добавлять. Вот здесь об этом прямо и написано https://github.com/Automattic/Genericons/issues/7.

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

Например, можно взять шрифт Grands icon font. О нем можно прочитать в статье на Хабре https://habrahabr.ru/post/156767/, либо сразу же на сайте http://grawl.ru/Grands/

Далее, следуtv инструкциям по установке шрифта. Скачиваем архив и копируем папочку fonts из него в папку с нашей темой. Открываем файл style.css новой темы и вставляем лучше в самое начало код:

@font-face {
font-family: 'Grands';
src:url('fonts/Grands.eot');
src:url('fonts/Grands.eot?#iefix') format('embedded-opentype'),
url('fonts/Grands.svg#Grands') format('svg'),
url('fonts/Grands.woff') format('woff'),
url('fonts/Grands.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

Теперь наша тема знает о новом шрифте.

И теперь подключаем иконку ВКонтакте к нашей теме следующим кодом:

.social-navigation a[href*="vk.com"]:before {
font-family: 'Grands';
font-style: normal;
speak: none;
font-weight: normal;
-webkit-font-smoothing: antialiased;
content: "\e003";
}

Этот код можно вставить в любое место файла style.css, но лучше в соответствующий раздел, где подключаются другие иконки социальных сетей.

Если вас по какой-то причине не устраивает выбранный шрифт или в нем недостаточно иконок для решения других задач, то можно посмотреть шрифт Font Awesome на https://fortawesome.github.io/Font-Awesome/ — там есть точно почти все. Инструкция по подключению будет примерно похожа.