Як привласнити елементам WordPress-меню свій CSS-клас
Привіт:) Для кожного пункту меню WordPress автоматично генерує та додає унікальні CSS-ідентифікатори.
Але іноді розробнику потрібно додати свої класи в HTML-розмітку, щоб досягти гнучкості в реалізації потрібного функціоналу або швидко змінити дизайн.
Додати кожному пункту меню власний клас можна за 2-ма способами.
Спосіб 1. Стандартні інструменти WordPress
- Виберіть Вигляд > Меню та виберіть потрібне меню.
- У верхньому правому куті екрана натисніть Параметри екрану та поставте галочку навпроти пункту Клас CSS.
- Для кожного пункту меню в полі CSS класи (необов’язково) вкажіть свої класи.
- Натисніть кнопку Зберегти меню.
Спосіб 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
" — це довільні назви класів.