Кругове меню також відоме як (кругле чи радіальне) – це нова структура для відображення на веб-сайті пунктів меню. Круглое меню – відмінний варіант для перерахування елементів на веб-сторінках, де користувачі можуть переглядати та вибирати кращі елементи за допомогою швидкої навігації. Така форма має привабливий сучасний вигляд, який порушує загальний шаблон користувальницького інтерфейсу горизонтальної навігації.
У цьому посібнику ви навчитеся додавати або створювати меню кругової структури на веб-сайті WordPress.
Найкращий спосіб додати або створити кругове меню – використовувати плагін WordPress. Він робить процес легким, простим, зручним та додає гарну функцію. Саме з цієї причини познайомимося із плагіном WP Circular Menu.
Для створення плагін використовує функцію меню WordPress за промовчанням. Можна додати до 12 пунктів і включити додаткові елементи до пунктів меню за промовчанням, таких як піктограми та підказка.
Основні особливості плагіна:
- Необмежене коло меню.
- Інтегрований із WordPress.
- 9 готових шаблонів з 5 перетягуються і 4 фіксованими.
- Повноекранний дизайн з плоскою сіткою для мобільних пристроїв.
- Підтримка іконок користувача.
- Фактично, він має кілька меню на сторінці.
- Прості налаштування збирання.
- Має 9 позицій для фіксованого дизайну.
- Чудова анімація.
- Прості настройки.
Як додати кругове меню на сайт WordPress
Крок 1. Встановіть плагін WP Circular Menu
Для цього перейдіть до CodeCanyon і купіть плагін WP Circular Menu, після оплати ви отримаєте електронною поштою заархівований файл.
Встановіть та активуйте плагін на своєму сайті.
Крок 2. Додати або створити кругове меню
Після того, як плагін буде встановлено та активовано, на лівій панелі адміністратора WordPress відображатиметься Menus. Клацаємо на цей пункт, плагін перенаправить на сторінку зі списком меню. Можете натиснути "Додати новий", але перед цим потрібно спочатку створити меню.
Щоб створити нове:
- перейдіть в Панель керування >> Зовнішній вигляд >> Меню.
- клацніть створити меню.
- Дайте ім'я та натисніть «Створити меню».
- Перейдіть до розділу "Параметри екрану" у верхній частині сторінки та встановіть прапорець «Кругове меню WP» під боксами.
- Знайдіть мета-поля WP Circular Menu. Аналогічно встановіть прапорець «Використовувати як кругове меню», якщо ви хочете використовувати поточне як кругове.
- Виберіть пункти, які потрібно додати та збережіть.
Важливо: плагін не підтримує підменю.
Тепер на кожному пункті відображатиметься піктограма WP Circular Menu. Натисніть на ньому, щоб відкрити модульне меню налаштувань.
На відміну від звичайного, це меню дозволяє додавати такі речі, як значок, фонове зображення, змінювати текст підказки до індивідуального пункту.
Налаштування
Коли ви натискаєте на WP Circular Menu, потрапляєте на сторінку налаштувань.
- Тип значок
- Значки шрифтів: кругове меню Підтримує широкий спектр значків шрифтів, включаючи Dashicons, Font Awesome, Genericons, Linear Icons та Themify. Натисніть кнопку, щоб вибрати шрифт. Можна безпосередньо додати код значка, такий як dashicons | dashicons-admin-site або fa | fa-envelope-o або genericon | genericon-aside або lnr | lnr-home чи ti | ti-home.
- Значок користувача: якщо піктограми не підходять, можна завантажити власні зображення піктограм з медіатеки WordPress. Так само натисніть кнопку, щоб завантажити медіафайл з медіатеки, або безпосередньо розмістіть URL-адресу зображення.
- Назва
- Приховати / показати ім'я: за промовчанням у круговому меню відображається позначка імені при наведенні на нього курсора. Якщо ця функція не потрібна, встановіть прапорець, який сховає відображення імені при наведенні курсору.
- Ім'я користувача: щоб змінити текст назви, просто додайте текст – ім'я меню за замовчуванням буде перезаписано та змінено.
- Ярлик повідомлення
- Текст повідомлення. Бажаєте привернути увагу глядачів до певної сторінки? У магазині триває гарячий розпродаж? Плагін дозволяє додавати статичні мітки повідомлень, щоб люди знали, що відбувається з кожним конкретним посиланням.
- Фон
- Фон зображення: найкраще підходить для шаблону 2 і не підтримується у шаблонах 3, 4 та 5. Можна додавати фонові зображення до кожного з пунктів списку меню.
Після будь-якої зміни пункту меню потрібно спочатку зберегти його, тоді параметр WP Circular Menu у знову доданих пунктах буде видно.
Після створення пунктів можна створити своє перше меню.
Дивіться також:
Функціональні можливості, встановлення, налаштування плагіна WP Mega Menu.
Крок 3. Налаштуйте кругове меню
Настав час створити кругове меню. Для цього:
- Натисніть WP Circular Menu на лівій панелі адміністратора.
- натисніть "Добавить".
- Введіть назву для свого Круглого меню.
- Опублікуйте.
- Виберіть призначене кругове меню з опції "ВИБРАТИ". Аналогічно настройте своє.
Налаштування макета
- Вибрати шаблон: виберіть будь-який із 9 готових шаблонів: 5 перетягуваних та 4 фіксованих шаблонів.
- Вихідне положення: доступно лише для шаблонів, що перетягуються. Ви можете встановити початкову позицію меню під час завантаження сторінки.
- позиції: доступний лише для фіксованих шаблонів. Встановіть відповідну фіксовану позицію для завантаження меню.
- Анімація: Виберіть анімацію відкриття та закриття.
- Кнопка перемикання:
- Toggle Animation: Виберіть анімацію для перемикача.
- Налаштувати: встановіть прапорець, щоб налаштувати перемикач.
- Значок палітри: встановіть колір відкриття, закриття та наведення смуг перемикання.
- Фон: встановіть колір відкриття, закриття та наведення фону перемикача.
- кордон: встановіть колір та ширину межі відкриття, закриття та наведення курсору.
- Пункт меню:
- Налаштувати: встановіть прапорець, щоб налаштувати елементи.
- Значок палітри: встановіть колір піктограми, активний колір та колір наведення піктограм.
- Фон: аналогічно встановіть колір піктограми, активний колір та колір наведення для фону меню.
- кордон: встановіть колір піктограми, активний колір та колір наведення для фону піктограми. Опція доступна лише у шаблонах 2, 3, 6 та 9.
- Центральне зображення: Встановіть фон зображення у центрі меню. Опція доступна лише у шаблонах 1, 4 та 8.
- Палітра центру: встановіть колір фону в центрі меню. Опція доступна лише у шаблонах 1, 4 та 8.
- Налаштувати: встановіть прапорець, щоб налаштувати елементи.
- Ярлик повідомлення:
- Вибрати шаблон: виберіть один із п'яти шаблонів для ярлика сповіщення.
- Анімація сповіщення: аналогічно виберіть одну з п'яти анімацій для ярлика сповіщення.
- Налаштувати: встановіть прапорець, щоб налаштувати позначку сповіщення.
- Кольори тексту: встановіть колір тексту для позначки сповіщення.
- Колір фону: Встановіть колір фону для ярлика сповіщення.
- Підказка:
- Налаштувати: встановіть прапорець, щоб налаштувати спливаючу підказку.
- Палітра тексту: встановіть колір тексту для підказки.
- Палітра фону: встановіть колір фону для підказки.
- Налаштувати: встановіть прапорець, щоб налаштувати спливаючу підказку.
- Друкарня:
- Налаштувати: встановіть прапорець, щоб налаштувати типографіку.
- Сімейство шрифтів: Виберіть сімейство шрифтів.
- Перетворення тексту: встановіть верхній регістр великими, малими або великими літерами підказки та позначки сповіщення.
- Налаштувати: встановіть прапорець, щоб налаштувати типографіку.
Налаштування відображення
Ви можете вказати, де відображати або приховати меню Круг. Ці настройки можна використовувати для керування кількома меню на різних сторінках. За промовчанням усі меню налаштовані для відображення на всіх сторінках. Можете вказати, де показувати та кому показувати:
- Налаштування дозволів: встановіть для відображення «Всі користувачі / Користувачі, що увійшли до системи» або «Користувачі, що вийшли із системи».
- Приховати кругове меню у: Виберіть сторінки, на яких не потрібно відображати це меню. Фактично, список повинен охоплювати всі стандартні сторінки WordPress за замовчуванням і всі окремі сторінки будь-якого типу публікації. Якщо вибрати опцію All Single Page, жодне меню не відображатиметься на окремих сторінках, незалежно від конкретної опції сторінки нижче.
Користувальницькі CSS
Крім того, ви можете увімкнути опцію Custom CSS і додати необхідний код за необхідності.
Крок 4: Використання шорткоду
Щоб додати будь-який шаблон, що перетягується на свій сайт, можете використовувати шорткод. Для цього:
- Перейдіть до «Налаштування шаблону» та налаштуйте параметр «Не закривати, приховати кнопку перемикання».
Дуже важливо відключити властивість Draggable.
- Перейдіть до Налаштування екрана та увімкніть параметр Використовувати як шорткод і приховати деінде.
Перейдіть до опції Extra та увімкніть гнучкий плоский дизайн.
- Скопіюйте шорткод із мета-поля «Інформація про шорткод» та вставте його в бажане місце.
Таким чином можна просто додати/створити кругове меню на своєму веб-сайті WordPress. А використання шорткоду дозволяє легко та просто додати на певну сторінку чи публікацію.
Джерело: accesspressthemes.com
Коментарі до запису: 0