Изменение иконок в Social Links Menu — меню, которое встроено в тему WordPress (часть 3)

Добавление нового элемента в библиотеку иконок SVG нашей темы.

(Часть 3)
Продолжение. Начало смотрите здесь:
<< Изменение иконок в Social Links Menu — меню, которое встроено в тему WordPress (часть 1,2)

Ну вот и подошли к самому интересному.
Для темы Receptar добавляем новую SVG иконку в Social Links Menu.
В нашей теме за это отвечают 2 файла:
wp_content/themes/<receptar>/assets/images/svg/social-icons.svg
и
wp_content/themes/<receptar>/inc/setup.php
где <receptar> — название нашей темы.

1.


wp_content/themes/<receptar>/assets/images/svg/social-icons.svg
В этом файле находится векторное описание (код) наших картинок.
Внутри тега <defs> находятся теги с контейнерами векторных картинок.
<symbol>…</symbol> — в атрибутах этого тега указано ID нашей иконки, и области позиционирования viewBox.
Внутри этого тега находится тег <path>, где в атрибуте тега «d» помещен наш векторных массив, которые описывает кривую иконки.
Обратите внимание на атрибут viewBox — в нем указаны координаты позиционирования иконки — точка отсчета и ширина и высота (0 0 32 32). Эти данные нужно взять из оригинального файла, который мы скачали или создали при помощи векторных редакторов. При этом не надо бояться, если ширина и высота картинки будут очень большими. Ведь векторные изображения замечательно масштабируются, и как большие, так и маленькие координаты в конечном счете не будут приносить в ущерб качество, а картинка будет помещаться размеры заданной нами области.
если оригинальная картинка имеет большую ширину и высоту (например «0 0 500 500»), то не надо в атрибуте viewBox указывать «0 0 32 32». Такая ошибка приведет только к тому, что будт отображена только малая часть картинки. Размеры нужно переносить в аккурат с оригинального файла SVG.
Второй нюанс, о котором хочу рассказать — картинка может быть выполнена из нескольких кривых, не связанных между собой (например, как колпак повара в предыдущем посте). В таком случае у нас в описании картинки должны быть описаны несколько векторов. А значит, в теге <symbol>…</symbol> должно ыть несколько тегов <path>, каждый из которых отвечает за отдельную кривую.
Например наша шапка повара в нашей пере с рецептами будет выглядеть так:


<symbol id="social-icon-food" viewBox="0 0 469.333 469.333">
<path d="M128,224c0-5.896-4.771-10.667-10.667-10.667c-5.896,0-10.667,4.771-10.667,10.667c0,28.01,30.896,66.469,34.417,70.771
c2.115,2.563,5.177,3.896,8.26,3.896c2.375,0,4.771-0.792,6.76-2.417c4.552-3.74,5.208-10.458,1.479-15.021
C146.146,267.292,128,239.437,128,224z"></path>
<path d="M352,213.333c-5.896,0-10.667,4.771-10.667,10.667c0,15.385-18.146,43.271-29.583,57.24
c-3.729,4.552-3.063,11.271,1.49,15.01c1.979,1.625,4.375,2.417,6.76,2.417c3.083,0,6.135-1.333,8.25-3.896
c3.521-4.302,34.417-42.76,34.417-70.771C362.667,218.104,357.896,213.333,352,213.333z"></path>
<path d="M234.667,213.333c-5.896,0-10.667,4.771-10.667,10.667v64c0,5.896,4.771,10.667,10.667,10.667
s10.667-4.771,10.667-10.667v-64C245.333,218.104,240.562,213.333,234.667,213.333z"></path>
<path d="M352,42.667c-6.464,0-13.219,0.855-20.234,2.158C308.273,17.439,273.496,0,234.667,0s-73.607,17.439-97.099,44.824
c-7.016-1.302-13.771-2.158-20.234-2.158C52.635,42.667,0,95.302,0,160c0,44.333,25,84.635,64.25,104.562L64.042,425.76
c-0.01,11.635,4.51,22.573,12.729,30.802c8.229,8.24,19.156,12.771,30.792,12.771h254.25c24,0,43.521-19.521,43.521-43.521
V264.406c39.104-19.979,64-60.219,64-104.406C469.333,95.302,416.698,42.667,352,42.667z M384,425.813
c0,12.229-9.958,22.188-22.188,22.188h-254.25c-5.927,0-11.5-2.313-15.698-6.51c-4.188-4.198-6.5-9.771-6.49-15.708L85.43,384
H384V425.813z M390.604,247.802c-0.563,0.229-1.094,0.5-1.594,0.823c-1.344,0.833-2.448,1.938-3.271,3.208
c-0.833,1.26-1.396,2.719-1.625,4.281c-0.094,0.594-0.125,1.188-0.115,1.792v104.76H85.457l0.137-104.615
c0.01-0.583-0.021-1.177-0.104-1.75c-0.229-1.615-0.823-3.115-1.688-4.417c-0.813-1.219-1.875-2.281-3.167-3.094
c-0.531-0.333-1.094-0.625-1.677-0.865C43.948,232.615,21.333,198.135,21.333,160c0-52.938,43.063-96,96-96
c2.069,0,4.253,0.25,6.396,0.419c-10.792,18.756-17.063,40.43-17.063,63.581c0,5.896,4.771,10.667,10.667,10.667
c5.896,0,10.667-4.771,10.667-10.667c0-58.813,47.854-106.667,106.667-106.667S341.333,69.187,341.333,128
c0,5.896,4.771,10.667,10.667,10.667c5.896,0,10.667-4.771,10.667-10.667c0-23.151-6.271-44.824-17.063-63.581

C347.747,64.25,349.931,64,352,64c52.938,0,96,43.063,96,96C448,198,425.479,232.437,390.604,247.802z"></path>
</symbol>

Для примера кусок кода, как выглядят векторные SVG изображения в файле wp_content/themes/<receptar>/assets/images/svg/social-icons.svg нашей темы <receptar>.

Вектор для SVG

Вектор для SVG

Обратите внимание атрибуты в теге <symbol id=«social-icon-food» viewBox=«0 0 469.333 469.333»>

в значении атрибута id=«social-icon-food» ID для нашей темы является только food, о нем упоминается во 2-ом файле wp_content/themes/<receptar>/inc/setup.php.

2.


wp_content/themes/<receptar>/inc/setup.php
Файл с настройками для нашей темы.
В нашем случае в файле нужно найти функцию function receptar_social_links_icons().
Функция находится приблизительно на 1128 строке.
Визуально это выглядит так:
Настройка menu social links в файле setup.php

Настройка menu social links в файле setup.php


В конце функции в ассоциативный массив добавляем строчку с адресом нашего сайта (или того сайта, на который мы хотим установить ссылку с иконкой) и указываем ID векторной иконки SVG из файла, описанного в п.1 этой статьи (wp_content/themes/<receptar>/assets/images/svg/social-icons.svg).
В атрибуте ID тега <symbol id=«social-icon-food» viewBox=«0 0 469.333 469.333»> берем последнюю часть — значение food. Это и будет значение ассоциативного массива в нашей функции, которое надо сопоставить для адреса сайта.
В моем случае визуально это выглядит так:
Настройка menu social links в файле setup.php

Настройка menu social links в файле setup.php

Если вы все сделали правильно, то все должно заработать — в Social links menu вы можете добавить произвольную ссылку на указанную вами страницу, и ссылка появится в меню. В нашем случае это будет ссылка на http://food.melodia.org.ua/. Вы можете указать любую свою произвольную ссылку.

Изменение иконок в Social Links Menu — меню, которое встроено в тему WordPress

Изменение иконок в Social Links Menu — меню, которое встроено в тему WordPress

Также хочу отметить что по добавлению отдельного меню типа Social Links Menu в интернете в свободном доступе есть множество плагинов для сайтов на WordPress с описанием на них.

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

Сайты, на которых можно скачать векторные изображения, и выбрать для их формат SVG:

1) icons8.com
(например для иконки, характеризующую «Домашнюю страницу» сайта можно воспользоваться бесплатно векторным изображением: icons8.com/icon/83352/home).

2) www.flaticon.com

При скачивании некоторых иконок со второго сайта вас могут попросить на вашем сайте (на котором будет использоваться SVG файл) указать ссылку на профиль автора изображения.
Также на всех сайтах могут быть изображения, которые нужно будет покупать, или, если вы не найдете изображение вам по душе, то для вас могут его сделать (естественно за отдельную плату).
Также в интернете можно почерпнуть информацию о том, какие графические пакеты можно использовать для создания изображений в формате SVG (например, Adobe Illustrator) и как работать в этих пакетах.

Внимание !!!

После обновления темы (Receptar) настройки иконки в Social Links Menu надо производить заново !!!

На этом заканчиваем эту тему. Если будут вопросы — пишите в комментариях. Постараюсь ответить.

RSS feed for comments on this post. TrackBack URI

Leave a Reply