Як у WordPress створити випадаюче меню (посібник для початківців)

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

Оновлено: 2023-06-20 20:48:19 Вадим Дворніков автор матеріалу

Навіщо використовувати меню в WordPress?

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

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

Щоб перевірити айфон за серійним номером, скористайтесь офіційним сайтом Apple або спеціалізованими сервісами.

Вибір теми оформлення за допомогою меню, що випадає

Майже всі теми оформлення WordPress за замовчуванням підтримують меню, що випадають. Але не всі. Тому потрібно переконатися, що використовується тема, яка підтримує меню, що випадають. Ось кілька із них:

Створення меню в WordPress

Крок 1. Створення меню навігації у WordPress

Перейдіть в меню "Зовнішній вигляд" - "Меню" і натисніть кнопку "Створити нове меню" .

Далі введіть назву меню навігації.

Потім натисніть кнопку «Створити меню». Після цього WordPress створить нове пусте меню.

Щоб додати в меню навігації посилання верхнього рівня, виберіть сторінки, які потрібно додати в меню. Це можна зробити у лівому стовпці. Потім натисніть кнопку «Додати в меню» .

Для створення унікального користувача можна використовувати послуги, які згенерують нік.

Після цього вибрані посилання з'являються в правому стовпці та створеному меню.

Крок 2. Додавання підпунктів у меню

В рамках цього посібника ми додамо до підпунктів категорії матеріалів блогу. Для цього виберіть у лівому стовпці елементи, які потрібно додати в меню і натисніть « Додати в меню» .

Але ці посилання будуть відображатися як звичайні пункти меню. Їх слід зробити підпунктами шляхом перетягування під батьківський елемент.

Повторіть цей процес для всіх посилань меню. Коли ви закінчите, не забудьте натиснути кнопку «Зберегти меню» .

Крок 3. Опублікуйте меню, що випадає

Теми оформлення WordPress можуть відображати меню у різних місцях. Кожна тема оформлення підтримує певні області розміщення меню. Вони наведені в розділі «Параметри меню» . Виберіть параметр поряд з параметром «Область відображення» та натисніть кнопку «Зберегти меню» .

Тепер відвідайте сайт, щоб побачити меню, що випадає в дії.

Меню, що випадає, зручне для економії місця на сайті та організації навігації.

Поради щодо створення інтерактивних випадаючих меню

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

1. Використовуйте багаторівневі меню.

Можна додати підпункт нижче іншого підпункту, щоб створити багаторівневе меню.

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

2. Створіть кілька меню, що випадають.

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

3. Створюйте меню за допомогою попереднього перегляду

Якщо меню стає занадто складним, можна перейти на візуальний попередній перегляд. Для цього перейдіть в меню "Зовнішній вигляд" - "Налаштувати".

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

4. Створення великої навігації у вигляді меню WordPress

Мегаменю відображаються у вигляді меню. Але вони можуть відображати набагато більше посилань, підменю та багато іншого.

Ми сподіваємося, що ця стаття допомогла вам зрозуміти, як створити меню в WordPress.

Вадим Дворніков автор-перекладач статті.

Створення меню, що розкриваються

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

У цьому посібнику

Створення меню, що розкривається

Щоб створити розкривне меню, виконайте наведені нижче дії.

Щоб зрозуміти, який розділ цього посібника вам потрібен, відкрийте консоль і перегляньте пункт Зовнішній вигляд ліворуч. Якщо там відображається Редактор, використовуйте розділ Редактор сайту цього керівництва. В іншому випадку дотримуйтесь інструкцій у розділах Консоль або Конфігуратор.

У редактор сайту меню потрапляє із блоку «Навігація». Щоб створити розкривне меню, виконайте наведені нижче дії.

1. У консолі перейдіть до розділу Зовнішній вигляд → Редактор.
2. Виберіть шаблон або частину шаблону, які потрібно відредагувати, або клацніть на мініатюрі попереднього перегляду сайту в правій частині екрана, щоб відкрити редактор головної сторінки.
3. Відкрийте подання у вигляді списку у верхньому лівому кутку екрана (значок, що складається з трьох горизонтальних ліній одна над одною).
4. Виберіть Блок «Навігація» (він може бути вкладений всередині інших блоків, таких як Заголовок, Група або Рядок).
5. У налаштуваннях бокової панелі праворуч наведіть курсор на пункт меню і клацніть по трьох точках.
   • Якщо бокова панель не відображається праворуч, натисніть піктограму налаштувань у верхньому правому куті екрана, щоб відкрити налаштування. Цей значок виглядає як квадрат із двома нерівними колонками.
6. Натисніть на посилання «Додати підменю».
7. Виберіть першу сторінку, яка повинна з'явитися в списку.
8. Повторюйте цю процедуру, доки не будуть додані всі необхідні елементи меню.
9. Натисніть «Зберегти», щоб зберегти зміни.

Уповільнюйте або прискорюйте відтворення відео за допомогою елементів керування в нижньому правому куті після натискання кнопки «Відтворення»

Можна також створити меню, що розкривається, за допомогою панелі інструментів блоку «Навігація».

1. Клацніть по елементу меню, який ви хочете перетворити в список, що розкривається.
2. Над елементом меню з'явиться панель інструментів, де ви знайдете кнопку Додати підменю (значок виглядає як вигнута стрілка із трьома горизонтальними лініями поруч із нею).
3. Натисніть кнопку «Додати підменю» на панелі інструментів, щоб перетворити цей елемент меню на меню, що розкривається.
4. Клацніть по значку, що відобразиться + або за опцією Додати посилання , щоб додати нові посилання до розкривного меню.
5. Натисніть Зберегти, щоб зберегти зміни.

Уповільнюйте або прискорюйте відтворення відео за допомогою елементів керування в нижньому правому куті після натискання кнопки «Відтворення»

На сайтах з класичними темами меню можна додавати в консолі WP-Admin. Для цього виконайте наведені нижче дії.

1. Відкрийте консоль.
2. Перейдіть до розділу Зовнішній вигляд → Меню.
3. Переконайтеся, що у верхній частині екрана вибрано потрібне меню.
4. Клацніть по елементу меню та перетягніть праворуч, щоб вкласти його в елемент над ним.
5. Натисніть кнопку «Зберегти меню», щоб зберегти зміни.

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

На сайтах з класичними темами меню можна створювати в конфігураторі. Для цього виконайте наведені нижче дії.

1. Додайте всі елементи меню, які потрібно в меню на сайті.
2. Натисніть кнопку "Змінити порядок" під елементами меню.
3. Натисніть стрілку праворуч >, щоб вкласти сторінку в сторінку вище, створивши меню, що розкривається.
4. Після завершення роботи з меню, що розкривається, натисніть «Готово».
5. Натисніть «Зберегти зміни», щоб опублікувати зміни на сайті.

Навчальне відео

Додавання елемента меню без посилання

Ви можете створити неінтерактивний елемент меню, що іноді буває необхідно при створенні меню. Справа в тому, щоб використовувати символ # як посилання елемента меню. Сам елемент може бути інтерактивним, але він не вестиме на іншу сторінку. Щоб створити неінтерактивний елемент меню, виконайте наведені нижче дії.

Щоб зрозуміти, який розділ цього посібника вам потрібен, відкрийте консоль і перегляньте пункт Зовнішній вигляд ліворуч. Якщо там відображається Редактор, використовуйте розділ Редактор сайту цього керівництва. В іншому випадку дотримуйтесь інструкцій у розділах Консоль або Конфігуратор.

У редактор сайту меню потрапляє із блоку «Навігація». Щоб створити неінтерактивний елемент меню, виконайте наведені нижче дії.

1. У консолі перейдіть до розділу Зовнішній вигляд → Редактор.
2. Виберіть шаблон або частину шаблону, які потрібно відредагувати, або клацніть на мініатюрі попереднього перегляду сайту в правій частині екрана, щоб відкрити редактор головної сторінки.
3. Відкрийте подання у вигляді списку у верхньому лівому кутку екрана (значок, що складається з трьох горизонтальних ліній одна над одною).
4. Виберіть Блок «Навігація» (він може бути вкладений в інші блоки, такі як Заголовок, Група або Рядок).
5. Натисніть кнопку + інструмент вставки блоків, щоб додати новий елемент меню.
6. У вікні, що з'явиться, клацніть «Додати блок» та виберіть опцію «Користувальницьке посилання».
7. Введіть # і натисніть клавішу Enter або Натисніть на клавіатурі .
8. Натисніть піктограму "Олівець", щоб відредагувати елемент меню. Введіть текст елемента меню у полі «Текст». Щоб зробити посилання неактивним, залиште в полі «Посилання» тільки символ #.
9. Натисніть кнопку «Зберегти».

Ви також можете відредагувати існуюче посилання на меню, щоб зробити його неінтерактивним. Натисніть на наявний елемент меню. Над ним з'явиться панель інструментів, де знаходиться кнопка «Посилання» (значок виглядає як ланка ланцюжка). Відредагуйте елемент меню та замініть поточне посилання на символ #. GIF-файл демонструє весь процес.

На сайтах із класичними темами елемент меню без посилання можна додати до консолі WP-Admin. Для цього виконайте наведені нижче дії.

1. Перейдіть до розділу Зовнішній вигляд → Меню.
2. Виберіть меню.
3. Клацніть на розділ «Довільні посилання» під заголовком «Додати елементи меню».
4. У полі URL-адреса введіть #, як показано на зображенні праворуч.
5. У полі Текст посилання введіть текст, який має відображатися в меню, як показано на зображенні праворуч.
6. Натисніть кнопку «Додати в меню».
7. Натисніть кнопку «Зберегти меню».

На сайтах із класичними темами елемент меню без посилання можна додати до конфігуратора. Для цього виконайте наведені нижче дії.

1. Перейдіть до розділу Зовнішній вигляд → Налаштувати → Меню.
2. Виберіть меню.
3. Натисніть кнопку «Додати елементи».
4. Виберіть опцію Довільні посилання.
5. У полі URL-адреса введіть #, як показано на зображенні праворуч.
6. У полі Текст посилання введіть текст, який має відображатися в меню, як показано праворуч.
7. Натисніть кнопку «Додати в меню».
8. Натисніть кнопку «Зберегти зміни».