Як розмістити меню на кожній сторінці WordPress

Останнє оновлення: 04/10/2024
Як розмістити меню на кожній сторінці WordPress

Чи хотіли б ви знати, як мати меню на кожній сторінці WordPress? Є багато випадків, коли вам потрібні різні меню на різних сторінках.

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

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

Тут ви можете прочитати про: Способи додавання форми підписки в WordPress

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

Методи створення меню на кожній сторінці WordPress

Тепер давайте подивимося, як ви можете розмістити меню на кожній сторінці WordPress:

Спосіб 1: Меню на кожній сторінці WordPress

Ось кроки, які ви повинні виконати, щоб мати меню на кожній сторінці WordPress:

Частина 1: установіть безкоштовний плагін, щоб мати меню на кожній сторінці WordPress

Щоб налаштувати інше меню для певної сторінки, вам знадобиться використовувати плагін Conditional Menus. Щоб установити його, виконайте наведені нижче дії.

  1. крок 1: на інформаційній панелі WordPress перейдіть до Додатки → Додати новий
  2. Крок 2: У рядку пошуку знайдіть «Умовні меню» і встановіть перший результат (скріншот)
Умовні меню
Умовні меню
  1. крок 3: Після встановлення натисніть активувати.

Частина 2: Створення різних меню для різних сторінок

Для створення меню для кожної сторінки необхідно:

  1. крок 1: Йти до Інформаційна панель WordPress → Вигляд → Налаштувати → натисніть Меню
  2. Крок 2: Додайте нове меню, назвемо його «Меню сторінки контактів» (або будь-яка інша назва)
  3. Крок 3: Додайте пункти меню для кожної сторінки або спеціального посилання та натисніть Публікувати
  4. Крок 4: Повторіть процес для всіх інших потрібних меню.

Частина 3: Керуйте розташуванням кожного меню

Перейти до Вигляд → Меню → Керувати локації і почніть налаштовувати меню на кожній сторінці WordPress, виконавши такі дії:

  1. крок 1: Клацніть + Умовне меню щоб додати нове меню в тому самому місці (наприклад, Головне меню)
  2. крок 2: Виберіть меню, яке потрібно додати
  3. крок 3: Клацніть + Умови щоб вибрати місця, де ви бажаєте розмістити це конкретне меню
  4. крок 4: Клацніть Зберегти зміни і відвідайте сторінку, щоб переконатися, що вона працює правильно;

Повторіть той самий процес для будь-якої кількості окремих сторінок.

Спосіб 2: Як створити різні меню на кожній сторінці WordPress

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

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

Частина 1. Використовуйте програми для створення меню на кожній сторінці WordPress

Наявність окремих меню для кожної сторінки може допомогти вам, якщо:

  1. Ви хочете відобразити сторінки продуктів у меню головної сторінки. Кожна сторінка продукту матиме окреме меню з підменю, пов’язаними зі сторінками інформації про продукт. Наприклад, меню на сторінці товару міститиме таку інформацію, як ціна, країна походження відповідного продукту.
  2. У вас є веб-сайт мережі магазинів, і кожен магазин представлений на окремій сторінці. Меню домашньої сторінки спрямує вас на сторінки магазину. Кожна сторінка магазину матиме власне меню основних сторінок, таких як продукти, адреса, замовлення тощо.
  Як розробити автоматизовані робочі процеси за допомогою WhatsApp Business API, що знизять вартість одного ліда

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

Як розмістити меню на кожній сторінці WordPress

Ми створимо ще два окремих меню для цих двох сторінок за допомогою плагіна Conditional Menus. Щоб це зробити, виконайте наведені нижче дії.

Частина 2: Встановіть і активуйте плагін Conditional Menus

Плагіни Conditional Menus безкоштовні та доступні за адресою wordpress.org . Вам просто потрібно встановити та активувати його, як і будь-який інший безкоштовний плагін.

  1. крок 1: Далі перейдіть до Зовнішній виглядМеню, перейти Керуйте місцями і ви побачите + Умовне меню додано плагіном:
Керуйте місцями
Керуйте місцями

Частина 3: Створення меню для кожної сторінки WordPress

  1. крок 1: Тепер ми створимо окремі меню для сторінок Apple і Banana. Для цього давайте Зовнішній виглядМеню > Редагувати меню > створити нове меню .
Вигляд > Меню > Редагувати меню > створити нове меню 
Вигляд > Меню > Редагувати меню > створити нове меню
  1. крок 2: Далі ми дамо назву меню, виберемо позицію відображення меню (я хочу показати його на заголовок), а потім натисніть Створити меню.
Натисніть Створити меню.
Натисніть Створити меню.
  1. крок 3: В розд Додайте пункти меню, ви повинні додати сторінки як підменю. Додайте дві сторінки, які є Походження яблукаЦіна Apple al яблучне меню. натисніть в меню збереження.
Додайте пункти меню
Додайте пункти меню та натисніть в меню збереження
  1. крок 4: Тепер виконайте ті самі дії, щоб створити окреме меню для сторінки Банан:

Натисніть «Зберегти меню».

Частина 4: Налаштуйте меню на кожній сторінці WordPress (відповідно)

  1. крок 1: Ще всередині Зовнішній виглядМеню, перейти Керуйте місцями і вибирайте + Умовне меню:
Керуйте місцеположеннями та виберіть + Умовне меню
Керуйте місцеположеннями та виберіть + Умовне меню
  1. крок 2: зі списку виберіть меню (я вибираю Меню Apple). Натисніть + Стан щоб встановити, де його відображати:
Натисніть + Умова
Натисніть + Умова

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

  1. крок 3: виберіть вкладку Сторінки та сторінка Apple щоб налаштувати меню на цій сторінці.
Виберіть вкладку «Сторінки» та сторінку Apple
Виберіть вкладку «Сторінки» та сторінку Apple
  1. крок 4: Зробіть те саме з банановим меню.

Виберіть вкладку «Сторінки» та сторінку Apple

  1. крок 5: Нарешті, не забудьте натиснути Зберегти зміни, або все, що ви зробили, зникне.

Тепер ви повинні перейти до інтерфейсу WordPress, щоб перевірити результат.

натисніть Зберегти зміни
Натисніть Зберегти зміни

Як бачите, домашня сторінка, сторінка Apple і сторінка Banana тепер мають три різні меню.

Типи меню на кожній сторінці WordPress

Зручна навігація на сайті є життєво важливою. Тому дуже важливо створювати спеціальне меню для кожної сторінки, добре організоване та легке для користувача. Однак веб-сайт не завжди потребує єдиного меню на всіх сторінках, оскільки кожна сторінка має своє призначення. Ви хочете створити різні меню на кожній сторінці WordPress? Давайте подивимося, які найкращі варіанти ви можете використовувати:

Найкращі плагіни для різних меню на кожній сторінці WordPress

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

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

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

  Hostpapa. Що це таке, тарифні плани, ціни, підтримка, альтернативи

1. JetBlocks

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

  1. Форми входу
  2. Реєстраційні форми
  3. Пошукові форми
  4. і кошик WooCommerce,
  5. Навігаційне меню
  6. Розширювані панелі.

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

Ви можете завантажити його з тут

2. JetMenu

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

Крім того, ви можете змінити фон пунктів меню, створити типографіку меню, застосувати режим наведення тощо. Ми впевнені, що можливості плагіна JetMenu безмежні. Це один із найкращих інструментів для створення меню на кожній сторінці WordPress.

Ви можете завантажити його з тут

3. JetThemeCore

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

Ви можете завантажити його з тут

Як налаштувати та створити меню на кожній сторінці WordPress

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

Частина 1: простий заголовок із віджетами мегаменю

  1. крок 1: Щоб додати заголовок до свого веб-сайту. Там ви побачите частини теми,де ви додасте заголовок.
  2. крок 2: Натисніть кнопку Додати нове, Виберіть тип шаблонузаголовок і виберіть для нього назву.
  3. крок 3: ви будете перенаправлені на сторінку Elementor, де почнеться магія.
  4. крок 4: Додайте розділ і виберіть відповідний макет, наприклад, Ширина вмісту: в коробці, Встановіть необхідні параметри.

Віджети в меню на кожній сторінці WordPress

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

  1. крок 1: шукайте віджети Mega Menu на панелі елементів.

Примітка: доступні два варіанти: Вертикальне мегаменю та мегаменю простий

  1. крок 2: Тепер ми зосередимося на останньому. Перетягнувши віджет, ви побачите вкладки налаштувань на лівій бічній панелі.
  2. крок 3: Шукає зміст, дисплеї Загальне і виберіть там меню.
  3. крок 4: виберіть екран меню або поверніться до інформаційної панелі WordPress — Зовнішній виглядМеню.
  4. крок 5: Тепер виберіть меню, з яким хочете працювати, або створіть нове.
  5. крок 6: коли ви створите меню, ви побачите його в списку доступних меню в Elementor.

Примітка: Не забудьте розмістити меню для настільної та мобільної версій вашого веб-сайту, щоб переконатися, що він має адаптивний дизайн.

Табуляція Стиль, ви можете налаштувати своє майбутнє меню: установити вирівнювання, змінити фон, тип рамки або тінь прямокутника. Знайдіть той, який вам найбільше підходить.

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

Налаштування меню на кожній сторінці WordPress
  1. крок 1: Щоб установити цей заголовок у певне розташування, перейдіть до Налаштування заголовка в Elementor.
  2. крок 2: це меню допоможе вам змінити стан заголовка та встановити умови, за яких він буде відображатися через спадне меню: весь веб-сайт, окрема або архівна сторінка. Наприклад, вибрати весь сайт.

Частина 2: Mega Menu та плагін JetMenu

Як ми вже знаємо, JetMenu особливий тим, що він дозволяє додавати будь-який вміст до ваших умовних меню. Давайте разом використовувати його необмежені можливості.

  1. крок 1: At Інформаційна панель WordPress — Вигляд — Меню.
  2. Крок 2: Знайдіть меню, яке потрібно налаштувати, або створіть нове.
  Інструменти електронного маркетингу: повний і порівняльний посібник

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

Налаштування меню на кожній сторінці WordPress за допомогою JetMenu
  1. крок 1: у кожному пункті меню шукайте пункт JetMenu, де ви можете грати з налаштуваннями.
  2. крок 2: увімкнути Мега підменю і натисніть Редагувати вміст пункту мегаменю щоб збагатити своє меню іншими продуктами та персоналізувати продукти.
  3. крок 3: на сторінці Elementor виберіть розділ із необхідною кількістю стовпців.
  4. крок 4: перетягніть Віджет вертикального мегаменю до першого стовпця на вкладці вмісту на лівій бічній панелі
  5. крок 5: Виберіть меню, яке потрібно вставити.
  6. крок 6: Нарешті, додайте підменю, які ви створили, до панелі адміністратора WordPress. Ви можете легко скопіювати віджет і вставити його в другий розділ.

Після цього можна використовувати вкладку Стиль і налаштувати елементи, встановити ширину, висоту, типографіку, необхідний простір тощо.

У головних налаштуваннях JetMenu ви можете побачити положення мегаменю, додати будь-яку піктограму до свого меню (вибрати із готових або завантажити SVG-файл), застосувати будь-який текстовий значок до пункту меню, налаштувати розмір меню тощо.

Професійні поради

Використовуючи Elementor, додайте заголовок над меню (наприклад, копію попередньої сторінки), вставте окремі елементи за допомогою віджета JetBlocks і оновіть його.

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

  1. крок 1: йти до Тема Builder знову створіть новий шаблон заголовка, скопіюйте заголовок або створіть новий
  2. крок 2: виберіть на вкладці щойно створене мегаменю Загальна конфігурація щоб відобразити його та додати віджет Хлібні крихти.
  3. крок 3: У налаштуваннях заголовка: вкладка Умови виберіть Однина та обкладинка щоб розмістити створений вами заголовок на своїй домашній сторінці та залишити створений раніше заголовок на інших сторінках вашого веб-сайту.

Частина 3: Створення меню на кожній сторінці WordPress (спадне меню)

Припустімо, у вас є окрема сторінка з контактною формою, і ви хочете додати їй інший заголовок. Просто виконайте такі дії:

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

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

  1. крок 2: Нарешті, встановіть цей конкретний заголовок для конкретної сторінки, використовуючи опцію Єдине число табуляція Умови і вказавши назву вашої сторінки контактів.

Вам також може бути цікаво прочитати про: Як створити спадне меню в WordPress

Висновок

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

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