Меню с иконками в WordPress

Меню с иконкамиЕсли есть желание украсить пункты меню иконками, есть пара способов это сделать:

    1. Меню с иконками с помощью CSS стилей.
    2. Меню с иконками с помощью плагина.

Меню с иконками в WordPress с помощью стилей

Первый вариант более трудоемкий, но зато вы не будете зависеть от плагина, который в любой момент может «слететь» из-за чего угодно. И не будет нагружать лишним функционалом административную панель вашего блога. Итак, создаем иконку нужного размера и формата, лучше максимум 15×15, хотя зависит от шаблона WordPress который у вас установлен. Загружаем её в библиотеку медиафайлов (см. скрин ниже) и сохраняем ссылку на иконку.

Загрузка медиафайла

Теперь в файл style.css (Внешний вид — Редактор — Таблица стилей) добавляем стили:

/*---------Меню с иконками www.vipbiz.org---------*/
.menu-icon1 a {
    background: url(URL_картинки#1);
    background-repeat: no-repeat;
    padding-left: 20px;
}
.menu-icon2 a {
    background: url(URL_картинки#2);
    background-repeat: no-repeat;
    padding-left: 20px;
}

Вы можете добавить стили для всех пунктов меню. В данном случае я прописала для двух, где:
menu-icon1 и menu-icon2 — стиль для 1-го и 2-го пункта меню;
URL_картинки#1 и URL_картинки#2 — нужно заменить на адрес ссылки на 1-ю картинку и 2-ю соответственно.

После того как прописали стили для пунктов меню, их названия (menu-icon1 или menu-icon2) надо добавить в классы CSS пунктов меню. Для этого идем Внешний вид — Меню — Настройки экрана — Показывать расширенные свойства меню и устанавливаем галочку «Классы CSS». Теперь если раскрыть каждый пункт меню, можно добавлять стили которые мы пропишем в файл style.css (см. скриншот ниже).

Настройка меню

Меню с иконками в WordPress с помощью плагина

Скажу сразу, что я этот способ не тестировала, поэтому за работоспособность плагина не отвечаю. Подойдет он для тех, кто не разобрался с первым вариантом, что называется «для чайника». Для этого достаточно установить себе на блог плагин Category and Page Icons, загрузить картинки и сделать нужные настройки. Информации в сети по работе с этим плагином очень много, поэтому описывать этот процесс нет необходимости. Тем более, я думаю, там итак все интуитивно понятно.

Светлана Ковалева

Мастер креатива и нестандартных решений
ВКонтакте Facebook Twitter Одноклассники
Запись опубликована в рубрике Сайтостроение с метками , . Добавьте в закладки постоянную ссылку.
Подпишитесь на обновления блога:

1 комментарий: Меню с иконками в WordPress

  1. Сергей говорит:

    Все сделал как написано в ставил в css, добавил в меню стили —- не появляются ваши картинки в меню- помогите!

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