Дізнайтеся, як створити липке меню для основної навігації вашого сайту WordPress! Закріплені меню допомагають покращити взаємодію з користувачем, роблячи меню вашого веб-сайту більш доступним для відвідувачів сайту. Крім того, це може допомогти покращити загальний вигляд вашого сайту. Давайте приступимо до цього!

Зміст

1. Перейдіть до редактора сайту

Першим кроком у цьому процесі є перехід до «Редактора сайту» в області адміністрування WordPress. Редактор сайту доступний для «Блокових тем» у WordPress, якщо ви використовуєте WordPress версії 5.9 або новішої.

Щоб перейти до редактора сайту, перейдіть до Зовнішній вигляд> Редактор (червона стрілка на зображенні вище) з головної панелі навігації в області адміністратора WP.

Клацніть на область основного вмісту в правій частині екрана (обведену світло-блакитним кольором і позначену синьою стрілкою у верхній частині екрана). Ви перейдете до редактора блоків у редакторі сайту.

Праворуч під вкладкою «Сторінка» ви побачите рядок із написом «Шаблон» (обведений синім кольором на зображенні вище). Натисніть назву/посилання шаблону (червона стрілка). Потім натисніть «Редагувати шаблон» (зелена стрілка – іноді «Редагувати шаблон» — це невелике синє текстове посилання під спадним меню, яке відображає назву вашого шаблону).

2. Відредагуйте свій шаблон

Тепер ви опинитесь у редакторі шаблонів домашньої сторінки вашого веб-сайту. (Якщо у вас немає домашньої сторінки для вашого сайту, ви можете перевірити цей посібник із налаштування статичної домашньої сторінки для вашого веб-сайту WordPress).

У верхній частині шаблону розташована основна навігаційна панель вашої сторінки, яка також називається «Заголовок» вашої веб-сторінки. Коли ви наведете курсор миші на цей елемент, ви побачите фіолетову рамку, що окреслює його (червона стрілка на зображенні вище). Це означає, що цей елемент є a «синхронізований шаблон», це означає, що внесення змін до одного екземпляра шаблону застосує зміни до всіх екземплярів на всьому сайті. Натисніть цю область, щоб вибрати шаблон синхронізації заголовка.

Якщо це основний елемент заголовка вашого сайту, тепер ви повинні побачити, що синхронізований шаблон має позначку «Заголовок» на панелі інструментів блоку.

3. Додайте свій заголовок до групи

На панелі інструментів блоку для вибраного шаблону заголовка клацніть піктограму «Параметри» (червона стрілка на зображенні вище) і виберіть «Групувати» (зелена стрілка). Синхронізований шаблон буде вкладено в груповий блок.

Ви помітите, що на панелі інструментів блокування тепер є значок групового блоку (синя стрілка на зображенні вище), а контур навколо головної навігаційної області тепер синій, а не фіолетовий (червона стрілка).

Зауважте, що це може змінити ширину вашого головного навігаційного меню. Щоб налаштувати ширину, наведіть курсор миші на шаблон синхронізації заголовка та клацніть, щоб вибрати його (червона стрілка).

На панелі інструментів блоку для синхронізованого шаблону заголовка клацніть піктограму «Вирівняти» (зелена стрілка) і знову змініть потрібну ширину (синя стрілка — у моєму випадку я вибрав «Широка ширина»).

Щоб повернутися до блоку Group, клацніть піктограму «Вибрати групу» на панелі інструментів блоку Header (рожева стрілка).

WordPress Simplified: Як створювати потужні веб-сайти, курс від Davies Media Design

4. Встановіть групу на «Ліпка»

Вибравши групу, перейдіть до вкладки «Блокувати» на бічній панелі налаштувань у правій частині екрана (червона стрілка на зображенні вище).

Клацніть пункт меню «Позиція» (зелена стрілка). Тут ви побачите спадне меню з позначкою «За замовчуванням» (рожева стрілка). Клацніть спадне меню та виберіть опцію «Прилипання» (синя стрілка).

Перейдіть до верхньої частини редактора та натисніть кнопку «Зберегти» (червона стрілка), а потім знову натисніть «Зберегти». Тепер ви матимете головну навігаційну панель для вашого веб-сайту WordPress!

5. Стилізуйте липке меню

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

Для цього, вибравши груповий блок, я перейду до вкладки «Стилі» на бічній панелі налаштувань (червона стрілка на зображенні вище).

У розділі «Колір» я клацну опцію «Фон» (синя стрілка), а потім виберу білий зразок, щоб встановити білий фоновий колір (зелена стрілка).

Я ще раз двічі клацну «Зберегти», щоб зберегти зміни.

Зауважте, що ви завжди можете налаштувати ширину, висоту або відстань заголовка свого веб-сайту в розділі «Розміри» за допомогою повзунків «Відступ» і «Поля».

Ви можете переглянути свій сайт, клацнувши піктограму пристрою (червона стрілка), а потім клацнувши «Переглянути сайт» (зелена стрілка).

Ви можете прокручувати свій веб-сайт і дивитися, як липке меню навігації залишається на місці вгорі (зелена стрілка)!

Завершивши редагування липкого меню, натисніть кнопку «Назад» у верхній частині редактора (червона стрілка). Це поверне вас на вашу веб-сторінку в бічному редакторі.

Щоб повернутися до області адміністратора WP, просто натисніть на логотип у верхньому лівому куті.

Це все для цього підручника! Якщо вам це сподобалося, ви можете вивчайте WordPress за допомогою мого поглибленого курсу Udemy. Або ви можете перевірити інші безкоштовні Відеоуроки WordPress та Довідкові статті WordPress на моєму веб-сайті.

Інформаційний бюлетень Davies Media Design Free Creative Apps

Підпишіться на розсилку DMD

Підпишіться, щоб отримувати нові навчальні посібники, оновлення курсу та останні новини про ваші улюблені безкоштовні творчі програми!

Ви успішно підписалися!

Pin It на Pinterest