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

Наша взаимовыгодная связь https://banwar.org/

WordPress крім того, що дозволяє швидко створити свій сайт, використовуючи одну з численних тим, також має зручні можливості по створенню власного оформлення. Наприклад, одна з можливостей це створення дочірніх тим від вже існуючих. Це зручно, так як існуючі теми, особливо ті, що автоматично встановлюються разом з 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/ - там є точно майже все. Інструкція по підключенню буде приблизно схожа.