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

Скачать исходники для статьи можно ниже

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

Поэтому разработчики wordpress – создали параметр “Классы CSS”.

Чтобы использовать пользовательские классы для пунктов меню, они должны быть включены.

Обязательно установите флажок для пункта “Классы CSS” в раскрывающемся меню “Параметры экрана”. После этого Вы заметите, что в пункты меню добавлен новый раздел.

В это поле можно ввести любое имя. Если Вы не хотите использовать какие-либо селекторы, такие как # или . (точка). Просто введите текст класса, как показано на рисунке ниже.

Я выбрал имя класса redback, которое легко запомнить.

После сохранения меню вы можете ввести пользовательский CSS в любом месте, где обычно это делаете – либо в файле style.css, либо в пользовательском плагине css.

Здесь я выбрал следующее правило CSS:

.redback a:hover{
	background:red;
}

Теперь при наведении курсора мыши на пунк меню с классом redback, оно будет становиться красным.

На этом все, красивых и прибыльных Вам сайтов!