Как в WordPress сделать каждый пункт меню разного цвета

Автор:
Nurlan Kemelbekov

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

Например, первый пункт меню имеет красный цвет, а затем элементы с цветами, как: желтый, синий и так далее. Это очень легко осуществить в любой теме WordPress.
Предварительный просмотр: То, что мы пытаемся достичь.

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

1. Добавьте стили разного цвета в файл style.css для каждого пункта меню.

Если предположить, что мы изменяем цвет каждого пункта главного меню, можно добавить следующий код в файл style.css темы сайта.

.nav-primary .greencolor a { background:#4BB748; }
.nav-primary .greencolor a:hover { background:#359099; }

.nav-primary .purplecolor a { background:#FCD208; }
.nav-primary .purplecolor a:hover { background:#359099; }

.nav-primary .tealcolor a { background:#C75050; }
.nav-primary .tealcolor a:hover { background:#359099; }

2. Назначьте классы CSS к пунктам меню.

В панели WordPress откройте — Внешний вид> Меню и нажмите кнопку «Настройки экрана», расположенную в правом верхнем углу и активируйте вариант «Классы CSS».

Настройка классов CSS для меню.
Теперь раскройте первый пункт меню и введите «greencolor» в поле «Классы CSS». Аналогичным образом добавьте purplecolor, tealcolor для других пунктов меню. Сохранить меню, и теперь фон каждого пункта меню будет отображаться разного цвета.

Другие заметки по теме:
Пять CSS настроек, которые помогут изменить дизайн блога
Выбор оптимального размера шрифта для веб — сайта

Использовав эту же процедуру, вы можете создать еще более цветовых стилей для других пунктов меню. Вы можете изменить цвет шрифта и стиль шрифта для каждого класса color, добавив color: вариант. То же самое может быть реализовано для вторичного меню с помощью класса subnav вместо класса NAV.



Вам также может понравиться:


5 комментарий на “Как в WordPress сделать каждый пункт меню разного цвета

  1. Делал как указано — не вышло. Может надо куда то конкретно вставлять этот код?

    • Здравствуйте, Сергей. Для Вашего сайта необходимо изменить nav-primary на тот class меню, который указан в файле header.php темы i-max Вашего сайта. Я полагаю, что это будет примерно так: .navbar .greencolor a { background:#4BB748; }
      Откройте файл header.php в notepad++ для редактирования и посмотрите внимательно.
      Я тоже большой поклонник Владимира Высоцкого, которому, как я понял, посвящен Ваш сайт. Обращайтесь, если возникнут проблемы.
      Вы также могли бы использовать способ, описанный Велимудр в комментарии выше.

  2. Конечно, и этот способ хорош, но есть ещё более простой.
    Этот способ заставляет добавлять ещё один класс и без того напичканным ими пунктам, откройте исходник, вы увидите десяток классов к одному пункту, а это однозначно не хорошо.
    Проще, через инспектор кода посмотреть у нужного пункта уникальный класс, такие классы единственные для каждого пункта, пример: menu-item-952
    Номер — идентификатор класса, одинаковых не бывает.
    Всё, дальше вы сами догадались — задаёте стиль по таким классам, и будет у вас однозначно у каждого пункта свой.
    Теперь почему я написал это;
    Мой знакомый мне написал просьбу помочь, всё сделал как в статье (указав эту), но стили не применились, хотя класс присутствует.
    Я ему посоветовал сделать иначе, через обращение к классу с уникальным идентификатором.
    Автор, допиши этот вариант как альтернативу, в статье.

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

  3. Дружище, огромное спасибо, выручила статья!!! Удачи тебе!!!

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

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

* Copy This Password *

* Type Or Paste Password Here *

два × четыре =

Я просто хотел сказать, как сильно я ценю Ваш комментарий на мой пост. Спасибо Вам !!