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

Да. Именно так. Имеем сайт на WordPress, и имеем тему, в которой на «ребре» сайдбара размещено меню социальных ссылок (Social Links Menu). При чем отдельного плагина или виждета, которое характеризовало бы меню для социальных ссылок нет (ну, потому что оно незачем для данной темы).
Конкретный пример такой темы: Receptar.
Пример такого сайта: Сайт «Рецепты».
И мы видим слева на сайдбаре меню социальных ссылок.

Вполне логичная кастомизация для такого сайта — на место первой ссылки добавить ссылку на главную страницу сайта «Рецептов» (т.е. на текущий сайт).
Для этого заходим в «Внешний вид -> Меню», выбираем «Social Links Menu», и на первую позицию добавляем «Произвольную ссылку»:

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

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


Но вот беда… мы не можем поменять иконку на нашей первой ссылке, и имеем такое недоразумение:
Изменение иконок в Social Links Menu — меню, которое встроено в тему WordPress

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


В то время, как ссылки на сайты социальной направленности (FaceBook, Instagram и пр.) выглядят вполне пристойно…
Т.е. вполне естественно, что мы хотим видеть ссылку такого типа, например:
Изменение иконок в Social Links Menu — меню, которое встроено в тему WordPress

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


Интернет предлагает в качестве решения всевозможные плагины (plugins) социальной направленности, которые добавляют отельные виджеты (widget) для меню, но такие решения, к сожалению, не подходят для темы нашего сайта.
Вопрос оставался нерешенным. Как Social Links Menu понимало, какие иконки использовать для социальных сетей ? Тем более что в качестве для иконок использовались объекты в SVG формате.
Для того, чтобы приступить разбираться с темой Receptar на WordPress, предлагаю сначала разобраться что за формат такой SVG, и с чем его едят.

Изображения SVG формата.


(Часть 2)
Растровые картинки (jpeg, png, gif, bmp и пр.) состоят из пикселей (pixel), и представлены в цифровом виде, где каждый пиксель (цвет) обозначен своим цифровым значением. Плотность пикселей, в зависимости от использования изображения, принято измерять в американский системе — пиксель на дюйм (px/inch), но пользователю проще принимать абсолютные размеры изображения (ширина и высота изображения в пикселях), которые можно увидеть в свойствах графического файла. В зависимости от количества пикселей на изображении, мы можем судить о качестве цифрового растрового изображения, которое перед нами — фотографии или анимационной картины. Зачастую чем больше пикселей — тем выше качество картинки (при условии что изображение не сжато JPEG форматом, например). Изображение с большим количеством пикселей можно смело масштабировать, не боясь при этом потерять в качестве при увеличении.
Масштабируемая векторная графика SVG (Scalable Vector Graphics) позволяет изображению выглядеть четко на мониторе с любым расширением (при небольшом размере файла), потому что изображение в файле описывает набор двумерных векторов в разметке, основанной на XML. Векторами можно описать как простые геометрические фигуры, так и сложные контуры. Все то, что можно сделать в векторных графических редакторах (напр.: Adobe Illustrator), можно выполнить в SVG формате.
Информацию о том, как сделать файлы для иконок в формате SVG можно почерпнуть а просторах интернета (Google в помощь). Где скачать файлы (иконки) — тоже можно найти в интернете. Причем есть как бесплатные, так и платные ресурсы.
Рассмотрим простое изображение, которое вполне бы подошло для главной (домашней) страницы сайта (домик):
SVG Home

Home

— в формате SVG это изображение выполнено вектором при помощи одной неразрывной линии (кривой).
Тег с вектором для этого файла (вектор, который описывает нашу иконку) выглядит так:

<path d="M 8 1.320313 L 0.660156 8.132813 L 1.339844 8.867188 L 2 8.253906 L 2 14 L 7 14 L 7 9 L 9 9 L 9 14 L 14 14 L 14 8.253906 L 14.660156 8.867188 L 15.339844 8.132813 Z M 8 2.679688 L 13 7.328125 L 13 13 L 10 13 L 10 8 L 6 8 L 6 13 L 3 13 L 3 7.328125 Z "/>

Полностью код SVG файла имеет такой вид (структура XML):

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" version="1.1" width="64px" height="64px">
<g id="surface1">
<path style=" " d="M 8 1.320313 L 0.660156 8.132813 L 1.339844 8.867188 L 2 8.253906 L 2 14 L 7 14 L 7 9 L 9 9 L 9 14 L 14 14 L 14 8.253906 L 14.660156 8.867188 L 15.339844 8.132813 Z M 8 2.679688 L 13 7.328125 L 13 13 L 10 13 L 10 8 L 6 8 L 6 13 L 3 13 L 3 7.328125 Z "/>
</g>
</svg>

SVG chef hat

Шеф

Для отрисовки более сложной конструкции (например, колпак повара), где имеет место быть несколько кривых линий, в SVG применяется несколько тегов <path>, в каждом из которых прорисован вектор для каждой отдельно стоящей кривой.

<svg height="452pt" viewBox="-27 0 452 452.33844" width="452pt" xmlns="http://www.w3.org/2000/svg">
<path d="m301.964844 57.011719c-.871094 0-1.761719.015625-2.675782.042969-20.710937-35.339844-58.605468-57.054688-99.566406-57.054688-40.964844 0-78.855468 21.714844-99.566406 57.054688-.917969-.027344-1.8125-.042969-2.6875-.042969-53.652344 0-97.300781 43.441406-97.300781 96.835937.054687 25.246094 9.542969 49.558594 26.601562 68.167969 14.460938 15.902344 32.660157 25.875 50.9375 28.160156v194.164063c0 4.417968 3.582031 8 8 8h227.003907c4.417968 0 8-3.582032 8-8v-194.179688c38.359374-4.941406 78.0625-44.507812 78.0625-96.3125-.054688-53.449218-43.359376-96.765625-96.808594-96.835937zm-208.253906 379.328125v-38h211v38zm219-201.65625c-4.417969 0-8 3.582031-8 8v139.65625h-211v-139.65625c0-4.417969-3.582032-8-8-8-16.386719 0-33.554688-8.542969-47.101563-23.433594-14.375-15.664062-22.378906-36.136719-22.4375-57.398438 0-44.574218 36.472656-80.835937 81.300781-80.835937 1.992188 0 4.144532.101563 6.582032.292969 3.183593.257812 6.214843-1.402344 7.710937-4.226563 17.199219-32.644531 51.0625-53.078125 87.960937-53.078125 36.894532 0 70.757813 20.433594 87.957032 53.078125 1.496094 2.820313 4.527344 4.484375 7.714844 4.226563 2.4375-.199219 4.585937-.292969 6.570312-.292969 44.613281.058594 80.761719 36.21875 80.804688 80.835937 0 45.519532-37.664063 80.832032-70.0625 80.832032zm0 0"/>
<path d="m165.710938 236.339844c-4.417969 0-8 3.582031-8 8v98c0 4.417968 3.582031 8 8 8 4.417968 0 8-3.582032 8-8v-98c0-4.417969-3.582032-8-8-8zm0 0"/>
<path d="m230.710938 236.339844c-4.417969 0-8 3.582031-8 8v98c0 4.417968 3.582031 8 8 8 4.417968 0 8-3.582032 8-8v-98c0-4.417969-3.582032-8-8-8zm0 0"/>
</svg>

В теге SVG данного файла необходимо обратить внимание на атрибут viewBox. Он нам еще пригодится. В этом атрибуте прописаны координаты (по факту ширина и высота) нашей иконки. А так как формат объекта векторный, который можно масштабировать как угодно, то большие цифры размеров (ширины и высоты) пускай вас не пугают (как и маленькие).

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

(Часть 3)
Ну вот и подошли к самому интересному.
Для темы Receptar добавляем новую SVG иконку в Social Links Menu.

А вообще, продолжение этой темы в следующем посте (в этом и так уже много буков 🙂 )

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

RSS feed for comments on this post. TrackBack URI

Leave a Reply