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

Иногда нужно выделить в меню не все пункты, а только один. Например, сделать жирным пункт:

Магазин тем и плагинов

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

Этот способ хорошо подходит для темы Kadence, потому что не требует редактировать файлы темы и не влияет на остальные пункты меню.

Шаг 1. Откройте меню WordPress

Перейдите в админке:

Внешний вид → Меню

Выберите нужное меню, например:

Главное

Шаг 2. Включите поле CSS-классов

По умолчанию WordPress может скрывать поле CSS-классы.

В правом верхнем углу нажмите:

Настройки экрана

Поставьте галочку:

CSS-классы

После этого у каждого пункта меню появится дополнительное поле для CSS-класса.

Шаг 3. Добавьте класс нужному пункту меню

Откройте пункт меню, который нужно выделить. Например:

Магазин тем и плагинов

В поле Классы CSS вставьте:

menu-bold

Важно: пишите без точки.

Правильно:

menu-bold

Неправильно:

.menu-bold

После этого нажмите:

Сохранить меню

Шаг 4. Добавьте CSS

Перейдите:

Внешний вид → Настроить → Дополнительные стили

Вставьте код:

.header-navigation .menu-bold > a,
.header-navigation .menu-bold > a .nav-drop-title-wrap,
.mobile-navigation .menu-bold > a,
.mobile-navigation .menu-bold > a .nav-drop-title-wrap {
    font-weight: 700;
}

Сохраните изменения.

Теперь только тот пункт меню, которому вы добавили класс menu-bold, станет жирным.

Почему это работает

Когда вы добавляете класс в поле Классы CSS, WordPress добавляет его к HTML-элементу пункта меню.

Примерно так:

<li class="menu-item menu-bold">
    <a href="/shop/">Магазин тем и плагинов</a>
</li>

CSS находит именно этот пункт:

.menu-bold

и делает ссылку внутри него жирной:

font-weight: 700;

Остальные пункты меню не меняются, потому что у них нет класса menu-bold.

Почему код такой длинный

В Kadence меню может выводиться немного по-разному:

• в обычном десктопном меню;
• в мобильном меню;
• с дополнительной оберткой .nav-drop-title-wrap.

Поэтому в CSS указаны сразу несколько вариантов:

.header-navigation .menu-bold > a

для обычного меню,

.mobile-navigation .menu-bold > a

для мобильного меню,

и:

.nav-drop-title-wrap

для случаев, когда Kadence добавляет внутреннюю обертку в пункт меню.

Если вы используете другой класс

Можно назвать класс как угодно. Например:

magazinmenu

Тогда CSS должен использовать это же имя:

.header-navigation .magazinmenu > a,
.header-navigation .magazinmenu > a .nav-drop-title-wrap,
.mobile-navigation .magazinmenu > a,
.mobile-navigation .magazinmenu > a .nav-drop-title-wrap {
    font-weight: 700;
}

Главное правило: класс в меню и класс в CSS должны совпадать.

Если жирность не появилась

Иногда стили темы или кеш могут перебивать ваш CSS. Тогда используйте усиленный вариант:

.header-navigation .menu-bold > a,
.header-navigation .menu-bold > a .nav-drop-title-wrap,
.mobile-navigation .menu-bold > a,
.mobile-navigation .menu-bold > a .nav-drop-title-wrap {
    font-weight: 700 !important;
}

После этого очистите кеш сайта и браузера.

Можно ли сделать не 700, а сильнее

Да. Значение font-weight можно менять:

font-weight: 600;

Это умеренно жирный текст.

font-weight: 700;

Это обычный bold.

font-weight: 800;

Это еще более жирный вариант, если шрифт поддерживает такую насыщенность.

Для меню чаще всего достаточно:

font-weight: 700;

Итог

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

1. Включить поле CSS-классы в настройках экрана меню.
2. Добавить нужному пункту класс menu-bold.
3. Вставить CSS в Дополнительные стили.

Этот способ аккуратный: он не меняет всю навигацию сайта и не требует редактировать файлы темы.