Як привласнити елементам WordPress-меню свій CSS-клас

Привіт:) Для кожного пункту меню WordPress автоматично генерує та додає унікальні CSS-ідентифікатори.

Але іноді розробнику потрібно додати свої класи в HTML-розмітку, щоб досягти гнучкості в реалізації потрібного функціоналу або швидко змінити дизайн.

Додати кожному пункту меню власний клас можна за 2-ма способами.

Спосіб 1. Стандартні інструменти WordPress

  1. Виберіть Вигляд > Меню та виберіть потрібне меню.
  2. У верхньому правому куті екрана натисніть Параметри екрану та поставте галочку навпроти пункту Клас CSS.
  1. Для кожного пункту меню в полі CSS класи (необов’язково) вкажіть свої класи.
  2. Натисніть кнопку Зберегти меню.

Спосіб 2. Код у functions.php

Є й інший спосіб, який не потребує будь-яких налаштувань в адмін-панелі сайту. У файл functions.php додайте наступний код:

add_filter( 'nav_menu_css_class', function( $classes, $item ) {
	if( $item->title == "Sample Page" ){ 
        $classes[] = "custom-class-1";
    }
    if( $item->title == "Hello world!" ){ 
        $classes[] = "custom-class-2";
    }

    return $classes;
}, 10, 2 );

У коді рядки "Sample Page" та "Hello world!" — це назви пунктів меню (текст посилань) у розділі Вигляд > Меню.

Значення "custom-class-1" та "custom-class-2" — це довільні назви класів.

Михайло Петров
Михайло Петров

Мене звати Михайло. Я є WordPress-розробником. Створюю сайти з "нуля", розробляю плагіни, оновлюю наявний функціонал та підтримую готові проєкти.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *