Роман Бурашников

Добавляем иконки в меню WordPress

В данной статье я расскажу как довольно просто сделать иконки в меню WordPress без плагинов, но для этого нужно хотя бы поверхностно знать CSS.

И так. В WordPress по умолчанию есть возможность добавить стиль CSS к каждому пункту меню.

Вот где его можно прописать (на странице "Внешний вид" -> "Меню").

Добавляем иконки в меню WordPress

Если данный пункт отсутствует - нужно нажать вверху справа "Настройки экрана" и в открывшемся окне поставить галочку около "Классы CSS".

Добавляем иконки в меню WordPress

Теперь нужно создать нужный класс CSS с иконкой.

Идём в "Внешний вид" -> "Редактор" и правим файл style.css .

А именно - добавляем в него (в любом месте, но лучше в конце, для удобства) следующий код:

.icon1 a {
background: url(https://burashnikov.ru/ico/ico-home.png);
background-repeat: no-repeat;
background-position: left;
padding-left: 23px !important;
}

.icon1 a.active {
background: url(https://burashnikov.ru/ico/icob-home.png);
background-repeat: no-repeat;
background-position: left;
padding-left: 23px !important;
}

.icon1 a:hover {
background: url(https://burashnikov.ru/ico/icob-home.png);
background-repeat: no-repeat;
background-position: left;
padding-left: 23px !important;
}

Вместо "icon1" пишем своё название стиля, оно должно быть одинаковым в этом коде и в пункте меню.

Вместо "23px" возможно придётся поставить своё значение, тут нужно пробовать как лучше будет смотреться иконка того или иного размера.

Вместо "https://burashnikov.ru/ico/ico-home.png" подставляем ссылку на свою иконку, предварительно иконку нужно загрузить на сайт.

Теперь поясню почему три почти одинаковых стиля использую для одного класса CSS меню.

Первый (.icon1 a) просто добавляет иконку. Собственно можно оставить только его, если нужно чтобы иконка всегда была одинаковая и одного цвета.

Второй (.icon1 a.active) включается когда открыта страница соответствующая пункту меню. Если внимательно посмотреть и сравнить с первым стилем название файла -  можно заметить, что ссылка ведёт на другую картинку. Я её сделал чуть темнее, чтобы иконка была выделена затемнением когда открыта соответствующая этой иконке страница.

Третий  (.icon1 a:hover) включается если навести мышкой на данный пункт меню. Тут я тоже использовал затемнённую иконку.

В результате у меня в пункте меню такая картинка , а если на неё навести мышкой или нажать то - .

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

Нашлась ошибка в тексте? Выдели её и нажми Ctrl+Enter.

VN:F [1.9.22_1171]
Рейтинг: +3 (голосов: 3), Понравилось: 3, Не понравилось: 0

Поделись записью с друзьями в соц сети:


Поблагодари автора рублём за понравившуюся статью, при помощи формы справа.
Или через Paypal
Paypal
Это мотивирует автора на написание новых полезных статей.

Немного рекламы:


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Бурашников Роман Александрович

Подпишись на новые статьи

Топ 5 лучших статей блога
Реклама