Як стилізувати меню навігації WordPress

Ви хочете стилізувати меню навігації WordPress, щоб змінити їх колір або зовнішній вигляд? Поки ваша тема WordPress обробляє зовнішній вигляд ваших меню навігації, ви можете легко налаштувати її за допомогою CSS, щоб відповідати вашим вимогам. У цій статті ми покажемо вам, як створити навігаційні меню WordPress на вашому сайті.


Стилізація меню навігації в WordPress

Ми покажемо два різні методи. Перший метод призначений для початківців, оскільки він використовує плагін і не вимагає знань з коду. Другий метод призначений для проміжних користувачів, які роблять сам, які вважають за краще використовувати код CSS замість плагіна.

Спосіб 1: Стилізація меню навігації WordPress за допомогою плагіна

Ваша тема WordPress використовує CSS для створення навігаційних меню. Багатьом новачкам не зручно редагувати файли тем або писати CSS-код самостійно.

Тоді корисний плагін для WordPress. Це рятує вас від редагування файлів тем або написання будь-якого коду.

Для початку потрібно встановити та активувати плагін CSS Hero. Детальніше дивіться в покроковому посібнику, як встановити плагін WordPress.

CSS Hero – це преміальний плагін WordPress, який дозволяє розробити власну тему WordPress, не записуючи жодного рядка коду (не потрібен HTML або CSS). Перегляньте наш огляд CSS Hero, щоб дізнатися більше.

Користувачі WPBeginner можуть використовувати цей купон CSS Hero, щоб отримати 34% знижку на їх покупку.

Після активації вас буде переспрямовано на отримання вашого ліцензійного ключа CSS Hero. Просто дотримуйтесь інструкцій на екрані, і ви будете перенаправлені назад на ваш сайт в декілька кліків.

Далі вам потрібно натиснути кнопку CSS Hero на панелі інструментів адміністратора WordPress.

Запустіть CSS Hero

CSS Hero пропонує редактор WYSIWYG (те, що ви бачите, те, що ви отримуєте) редактор. Натиснувши на кнопку, ви перейдете на ваш веб-сайт із плаваючою панеллю інструментів CSS Hero, що видно на екрані.

Панель інструментів героя CSS

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

Після натискання на синій значок переведіть курсор миші на своє навігаційне меню, і CSS Hero виділить його, показуючи межі навколо нього. Коли ви натиснете на виділене меню навігації, воно покаже вам елементи, які ви можете редагувати.

Наведіть курсор і натисніть, щоб налаштувати меню

На знімку екрана він показує нам головний контейнер навігаційного меню. Припустимо, ми хочемо змінити колір фону в нашому навігаційному меню. У цьому випадку ми виберемо верхню навігацію, яка впливає на все наше меню.

CSS Hero тепер покаже вам різні властивості, які ви можете редагувати, як текст, фон, облямівка, поля, накладки тощо.

Властивості CSS

Ви можете натиснути будь-яку властивість, яку хочете змінити. CSS Hero покаже вам простий інтерфейс, де ви можете внести свої зміни.

Змінення зовнішнього вигляду елемента

На знімку екрана ми вибрали фон, і він показав нам приємний інтерфейс для вибору кольору тла, градієнта, зображення тощо.

Під час внесення змін ви зможете побачити їх у прямому ефірі в попередньому перегляді теми.

Попередній перегляд змін у CSS

Після задоволення змін натисніть кнопку збереження на панелі інструментів героя CSS, щоб зберегти зміни.

Найкраще у використанні цього методу – ви можете легко скасувати будь-які внесені вами зміни. CSS Hero зберігає повну історію всіх змін, і ви можете переходити між цими змінами.

Спосіб 2: Меню навігації в ручному стилі WordPress

Цей метод вимагає вручну додавати спеціальний CSS та призначений для проміжних користувачів.

Навігаційні меню WordPress відображаються в не упорядкованому списку (маркований список).

Як правило, якщо ви використовуєте тег меню WordPress за замовчуванням, тоді він відображатиме список, не пов’язаний з ним класами CSS.

<?php wp_nav_menu (); ?>

У вашому невпорядкованому списку буде ім’я класу “меню”, коли кожен елемент списку має свій клас CSS.

Це може спрацювати, якщо у вас є лише одне розташування меню. Однак у більшості тем є декілька місць, де можна відображати меню навігації.

Використання лише класу CSS за замовчуванням може спричинити конфлікт із меню в інших місцях.

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

<?php
wp_nav_menu (масив (
‘topic_location’ => “первинний”,
‘menu_class’ => ‘первинне меню’,
));
?>

Цей код повідомляє WordPress, що саме тут тема відображає основне меню. Він також додає основне меню класу CSS до навігаційного меню.

Тепер ви можете налаштувати своє навігаційне меню за допомогою цієї структури CSS.

// контейнерний клас
#header. первинне меню {}

// Клас контейнерів перший не упорядкований список
#header. первинне меню ul {}

// не упорядкований список у межах не упорядкованого списку
#header. первинне меню ul ul {}

// кожен елемент навігації
#header .primary-меню li {}

// кожен елемент навігації
#header .primary-меню li a {}

// не упорядкований список, якщо є спадні елементи
#header .primary-menu li ul {}

// кожен елемент навігації, що випадає
#header .primary-меню li li {}

// кожен прив’язок навігаційного елемента вниз
#header .primary-меню li li a {}

Вам потрібно буде замінити #header класом CSS контейнера, який використовується у вашому навігаційному меню.

Ця структура допоможе вам повністю змінити зовнішній вигляд вашого навігаційного меню.

Однак існують інші CSS-класи, створені WordPress, які автоматично додаються до кожного меню та пункту меню. Ці класи дозволяють ще більше налаштувати меню навігації.

// Клас для поточної сторінки
.current_page_item {}

// Клас для поточної категорії
.поточний кіт {}

// Клас для будь-якого іншого поточного пункту меню
.пункт поточного меню {}

// Клас для категорії
.меню-пункт-тип-таксономія {}

// Клас для типів пошти
.menu-item-type-post_type {}

// Клас для будь-яких спеціальних посилань
.меню-пункт-тип на замовлення {}

// Клас для дому Посилання
.menu-item-home {}

WordPress також дозволяє додавати власні власні класи CSS до окремих пунктів меню.

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

Переходьте до Зовнішній вигляд »Меню сторінки у своєму адміністраторі WordPress та натисніть кнопку Параметри екрана.

Увімкніть опцію класів CSS для окремих пунктів меню

Після того, як ви встановите цей прапорець, ви побачите, що додаткове поле додається під час редагування кожного окремого пункту меню.

Додавання спеціального класу CSS до пункту меню в WordPress

Тепер ви можете використовувати цей клас CSS у таблиці стилів, щоб додати свій спеціальний CSS. Це вплине лише на пункт меню із доданим вами класом CSS.

Приклади меню стилізації навігації в WordPress

Різні теми WordPress можуть використовувати різні параметри стилізації, класи CSS і навіть JavaScript для створення навігаційних меню. Це дає вам багато варіантів для зміни цих стилів та налаштування меню навігації відповідно до власних потреб.

Інструмент перевірки у вашому веб-браузері стане вашим найкращим другом, коли справа доходить до з’ясування, які класи CSS потрібно змінити. Якщо ви раніше не користувалися нею, перегляньте наш посібник щодо використання інструменту перевірки для налаштування тем WordPress.

По суті, вам просто потрібно навести курсор на елемент, який ви бажаєте змінити, клацніть правою кнопкою миші та виберіть інструмент “Оглянути” в меню браузера.

Використання інструмента перевірки для пошуку класів CSS для зміни

Зважаючи на це, давайте подивимось на приклади реального життя стилізації навігаційних меню в WordPress.

1. Як змінити колір шрифту в меню навігації WordPress

Ось зразок спеціального CSS, який ви можете додати до своєї теми, щоб змінити колір шрифту навігаційних меню.

# верхнє меню li.menu-пункт a {
колір: # ff0000;
}

У цьому прикладі # верхнє меню – це ідентифікатор, присвоєний не упорядкованому списку, який відображає наше навігаційне меню. Вам потрібно буде скористатися інструментом перевірки, щоб з’ясувати ідентифікатор, який використовується вашою темою.

Зміна кольору шрифту навігаційних меню WordPress

2. Як змінити колір тла панелі меню навігації

Спочатку вам потрібно буде дізнатися ідентифікатор CSS або клас, який використовується вашою темою для навігаційного меню контейнера.

Пошук класу CSS для контейнера навігаційного меню

Після цього ви можете використовувати наступний користувальницький CSS для зміни кольору фону панелі навігаційного меню.

.навігація-топ {
фоновий колір: # 000;
}

Ось як це виглядало на нашому демо-сайті.

Зміна кольору фону панелі меню навігації

3. Як змінити колір тла одного елемента меню

Можливо, ви помітили, що багато веб-сайтів використовують інший колір фону для найважливіших посилань у своєму навігаційному меню. Це посилання може бути кнопкою для входу, реєстрації, контакту чи придбання. Надаючи йому іншого кольору, це робить посилання більш помітною.

Для цього ми додамо спеціальний клас CSS до пункту меню, який ми хочемо виділити іншим кольором фону.

Переходьте до Зовнішній вигляд »Меню і натисніть кнопку Параметри екрана у верхньому правому куті екрана. У цьому меню з’явиться меню, в якому потрібно полеміти, де потрібно встановити прапорець біля параметра “Класи CSS”.

Увімкніть опцію класів CSS для окремих пунктів меню

Після цього потрібно прокрутити вниз до пункту меню, який потрібно змінити, і натиснути, щоб розгорнути його. Ви помітите нову опцію для додавання власного класу CSS.

Додавання спеціального класу css до елемента меню

Тепер ви можете використовувати цей клас CSS для стилізації цього конкретного пункту меню по-різному.

.зв’яжіться з нами {
фоновий колір: # ff0099;
межа-радіус: 5px;
}

Ось як це виглядало на нашому тестовому сайті.

Зміна кольору фону одного пункту меню в навігаційних меню WordPress

4. Додавання ефектів наведення в меню навігації WordPress

Чи хочете, щоб пункти меню міняли кольори під час переведення миші? Цей фокус CSS робить ваші меню навігації виглядати більш інтерактивно.

Просто додайте до своєї теми такий спеціальний CSS.

# верхнє меню li.menu-item a: наведіть курсор {
фон-колір: #fff;
колір: # 666;
межа-радіус: 5px;
}

У цьому прикладі # верхнє меню – це ідентифікатор CSS, який використовується вашою темою для невпорядкованого списку меню навігації.

Ось як це виглядало на нашому тестовому сайті.

Ефект миші в навігаційних меню WordPress

5. Створіть стиглі плаваючі навігаційні меню в WordPress

Зазвичай меню навігації з’являється вгорі і зникає, коли користувач прокручується вниз. Липкі плаваючі навігаційні меню залишаються вгорі, коли користувач прокручується вниз.

Ви можете додати наступний CSS-код до своєї теми, щоб зробити меню навігації липким.

# верхнє меню {
фон: # 2194af;
висота: 60px;
z-індекс: 170;
маржа: 0 авто;
облямівка-дно: 1px суцільна #dadada;
ширина: 100%;
положення: фіксований;
верх: 0;
зліва: 0;
справа: 0;
вирівнювання тексту: справа;
padding-right: 30 пікс
}

Просто замініть # верхнє меню на ідентифікатор CSS свого навігаційного меню.

Ось як це виглядало в нашій демонстрації:

Липке навігаційне меню

Більш докладні інструкції та альтернативний метод див. У нашому посібнику про те, як створити липке плаваюче меню навігації в WordPress.

6. Створіть прозорі меню навігації в WordPress

Багато веб-сайтів використовують великі або повноекранні фонові зображення за допомогою їх заклику до дії. За допомогою прозорих меню ваша навігація поєднується із зображенням. Це змушує користувачів скоріше зосередитись на вашому заклику до дії.

Просто додайте наступний зразок CSS до своєї теми, щоб зробити меню навігації прозорим.

# навігація по сайту {
колір фону: прозорий;
}

Так виглядало на нашому демо-сайті.

Прозорі меню навігації в WordPress

Залежно від вашої теми, можливо, вам потрібно буде відрегулювати положення заголовка, щоб воно охоплювало область за прозорими меню.

Ми сподіваємося, що ця стаття допомогла вам навчитися стилювати меню навігації WordPress. Ви також можете ознайомитись з нашим керівництвом про те, як додати меню WordPress, готове до мобільних пристроїв.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map