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

Автор: | 12.11.2014

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

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

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

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

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

/*---------Меню с иконками www.besplatniemp3.ru---------*/
.menu-icon1 a {
    background: url(/wp-content/uploads/URL_картинки);
    background-repeat: no-repeat;
    padding-left: 20px;
}
.menu-icon2 a {
    background: url(/wp-content/uploads/2014/11/URL_картинки);
    background-repeat: no-repeat;
    padding-left: 20px;
}

/*———Меню с иконками www.besplatniemp3.ru———*/ .menu-icon1 a { background: url(/wp-content/uploads/URL_картинки); background-repeat: no-repeat; padding-left: 20px; } .menu-icon2 a { background: url(/wp-content/uploads/2014/11/URL_картинки); background-repeat: no-repeat; padding-left: 20px; }

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

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

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

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

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

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

  1. Сергей

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

Обсуждение закрыто.