Горизонтальне меню, що випадає Супер плагін WordPress. Створення та виведення меню в WordPress

Привіт друзі! Щасливі бачити вас на сторінках мого блогу. Цю статтю повністю присвячую меню WordPress. Постараюся висвітлити цю тему з усіх боків: розгляну найцікавіші плагіни для меню WordPress, присвячую кілька рядків створення верхнього меню, розповім про стандартні можливості WP. Щоб матеріал, описаний у цій статті, був зрозумілий, обов'язково перед його прочитанням ознайомтеся з постом про .

Стандартні способи створення та виведення меню в WordPress:

Якщо тема підтримує WordPress 3 Menu System, то верхнє menu можна створити через розділ «Зовнішній вигляд» — «Меню», інакше воно формується автоматично зі сторінок, що публікуються.
Створити меню, що містить активні рубрики блогу, можна за допомогою віджету «Рубрики».
Меню із посиланнями на сторінки блогу виводиться за допомогою віджету «Сторінки». Особисто я ніколи цим віджетом не користувався, тому що на блозі WP сторінки використовуються для виведення технічної інформації (про себе, карта сайту, зворотний зв'язок і так далі). Найкраще місце для них – у шапці блогу у горизонтальному вигляді. Так уже заведено.
Довільне меню створюється в розділі "Зовнішній вигляд" - "Меню", для виведення на блог використовується однойменний віджет.
Використовувати додаткові плагіни WordPress.

Якщо 2 і 3 пункти очевидні, і достатньо лише додати відповідні віджети, інші можуть здатися заплутаними, тому я розгляну їх детальніше.

Стандартні можливості WordPress

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

Тепер необхідно додати до нього пункти:

Сторінки — виберіть потрібні сторінки та натисніть «Додати до меню».

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

Не забувайте зберігати внесені зміни.

У темах, які підтримують WordPress 3 Menu System, присутня так само опція «Області теми» — це місце в меню, яке спеціально відведене під меню. Найчастіше воно призначене для виведення верхнього горизонтального меню блогу, яке часто називають головним. У такому випадку достатньо задати «Область теми», і вона автоматично з'явиться на сайті.

Інакше використовується віджет «Довільне меню». Перейдіть до розділу «Зовнішній вигляд» — «Віджети», знайдіть у загальному списку цей віджет і перетягніть його у сайтбар (бічна колонка). Після цього з'являться налаштування, в яких потрібно вибрати створене меню.

Збережіть налаштування та помилуйтеся своїм творінням.

Верхнє меню WordPress - як відредагувати та видалити

У багатьох темах верхнє menu формується автоматично з сторінок, що публікуються, які в основному використовуються для загальної інформації — «Про блог», «Корисна інформація», «Карта сайту» і так далі. Для цього у файлі header.php використовується наступний код:

> >

У моїй темі воно дублюється ще внизу сторінки, тому цей код був і в шаблоні footer.php.

Чим це незручно:

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

Виправити ці недоліки досить легко - потрібно просто видалити той код, що я навів вище і написати таку конструкцію:

Для людей, які знають html, розібратися в цьому коді не складе труднощів, для тих, хто не знає поясню. Рядки будуть відрізнятися лише двома параметрами.

20.10.2012

admin

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

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

Встановлення бічного меню в Wordpress

Щоб встановити бічне меню в wordpress, можна скористатися віджетом «Власне меню». Щоправда, перед цим потрібно буде створити своє унікальне меню. Наприклад, ваш сайт займається продажем кухонних обладнання, таких як крани, змішувачі та інша сантехніка. Тому передусім потрібно створити сторінки типу «Головна», «Товари», «Статті», «Про нас». У статтях можна викласти матеріали про те, який марки вибрати сантехніку, як купити мийку для кухні зі штучного каменю, які бувають види змішувачів і т. п. Після чого, слід зайти в розділ «Меню» в адмінці вордпресу, і створити там нове меню із цих сторінок, яке буде бічним. Тепер, як я говорив вище, можна розташувати бічне меню за допомогою віджету вордпрес. Для цього достатньо встановити віджет у сайдбарі та вибрати в ньому відповідне меню. А можна піти іншим шляхом, скористатися спеціальним плагіном.

Відео встановлення плагіна jQuery Slick Menu

Створення вертикального меню за допомогою плагіну jQuery Vertical Accordion Menu

Цей безкоштовний плагін дозволяє створити вертикальне розсувне меню. Причому за замовчуванням вже є кілька готових варіантів шаблонів меню, причому з різними кольорами. Найголовніша особливість даного плагіна в тому, що він дозволяє створювати саме розсувне меню. Це дуже зручно, якщо скажемо, в одному пункті меню ви маєте кілька підпунктів. Під час наведення мишкою на перший розділ буде розкриватися додатковий список пункту. Ще однією приємною особливістю, що має Vertical Accordion Menu, є наявність спеціального шорт-коду плагіна. Який можна розмістити в самих записах сайту, створивши там меню.

плагін дозволяє створювати різного кольору та стилю меню

Встановити плагін можна через саму адмінку вордпресу, набравши там «jQuery Vertical Accordion Menu» або завантажити з офіційного сайту автора. Після встановлення плагіна, вам потрібно зайти у «Віджети», знайти там віджет плагіна і перетягнути його в сайдбар. У самому віджеті ви знайдете всі необхідні параметри плагіна. Хочеться додати, що автор jQuery Vertical Accordion Menu має й інші спеціальні плагіни, які дозволяють створювати різні багаторівневі меню, як вертикальні, так і горизонтальні.

Таким чином, створити вертикальне випадаюче (розсувне) меню в wordpress, не так вже й складно, якщо використовувати спеціальні плагіни.

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

Поштовхом до розвитку концепції мега-меню послужив, ймовірно, стрічковий інтерфейс Microsoft Office 2007. Ця концепція знаходиться якраз посередині між простим статичним меню і динамічним. З одного боку, таке меню досить інформативно та інтуїтивно зрозуміло, з іншого – значно скорочує необхідні маніпуляції мишею. Розкриваючись, воно може використовувати весь доступний простір екрану, що дозволяє користувачеві охопити поглядом всі пропоновані в даному контексті пункти, а при необхідності ховається.

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

UberMenu: WordPress Mega Menu Plugin

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

Крім того, меню також має ряд інших чудових особливостей, таких як:

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

В цілому, дуже потужний плагін, який я рекомендую.

Вартість: $19

Mega Main Menu

Дуже популярний і широко використовується плагін Mega Main Menuвміє тримати баланс між функціональністю та простотою. У вашому розпорядженні понад 10 різних інструментів для створення випадаючих меню, які можуть містити текст, зображення, посилання та віджети. А крім цього – необмежені кольорові налаштування та понад 600 шрифтів Google.

Вартість: $15

Liquida Mega Menu

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

Плагін пропонує широкі можливості для створення менюіз сучасним та стильним дизайном: вертикальною або горизонтальною орієнтацією, можливістю включати до пунктів меню посилання, зображення та навіть картки товарів WooCommerceабо Easy Digital Downloads, що може стати в нагоді при розробці інтернет-магазинів.

Вартість: $19

Sky Mega Menu

Три варіанти дизайну для мобільних пристроїв, 9 колірних схем, власна сітка, форми та 360 векторні іконки. Цей набір дозволяє Sky Mega Menu зайняти гідне місце серед подібних.

Вартість: $6

WP Mega Menu

Плагін із категорії must have. Безліч налаштувань та опцій, робота з категоріями, підкатегоріями та повідомленнями, SEO-оптимізаціяі дві встановлені колірні схеми (темна та світла), які, втім, можна легко змінити на свій смак.

Вартість: $29

NOO Menu

Щоб розібратися в панелі налаштувань NOO Menuвам навіть не доведеться читати документацію – настільки все інтуїтивно зрозуміло. Маючи під рукою попередній перегляд у реальному часі, ви зможете просто змінювати значення та пересувати повзунки, спостерігаючи ефект, що виробляється. Колірну схему можна змінювати абсолютно довільно і кожен варіант зберігати під своїм ім'ям, причому кількість цих варіантів необмежена.

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

Вартість: $15

Hero Menu – Responsive WordPress Mega Menu Plugin

Hero Menu дозволяє прив'язувати до пунктів меню посилання на повідомлення, категорії, зовнішні URL, а також відображати записи блогу разом з featured image. В останній версії анонсовано повну підтримку платформи WooCommerce. Для зручної роботи має вбудований drag-and-drop редактор.

Дизайн сучасний та стильний і, звичайно ж, повністю.

Вартість: $19

Superfly - Responsive WordPress Menu Plugin

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

Одним із представників цього різновиду мега-меню є Superfly - Responsive WordPress Menu Plugin. Вражаючий інструмент як у плані дизайну, так і характеристик.

Вартість: $22

Toggle Menu

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

Toggle menu - дуже просте, мінімалістичне меню, Яке, тим не менш, відмінно справляється зі своєю основною функцією.

Вартість: $5

WP Floating Menu Pro

WP Floating Menu Pro- це плагін 2 в 1. Меню-навігатор для односторінкового сайтута меню-наклейки. Більше того: за допомогою цього плагіна ви зможете принаймні візуально перетворити свій традиційний сайт на сучасний односторінковий. WP Floating Menu Pro забезпечить плавне прокручування від однієї частини сторінки до іншої.

У розпорядженні розробника WP Floating Menu Pro пропонує 13 та 7 різних варіантів розташування на сторінці, можливості налаштування, кольору, вмісту та кількості пунктів.
Для екранів роздільною здатністю менше 480px є можливість автоматичного відключення меню.

Вартість: $17

Flexi Menu WordPress Plugin

Flexi Menu - це 5 різних, що повністю настроюються типу меню: fly-меню, широке (на ширину сторінки), широке+описи, широке+зображення та вертикальне.

Вартість: $14

Max Mega Menu (Free)

Дуже непоганий плагін з drag-and-drop редактором менюі можливістю вбудовування в пункти меню практично будь-яких віджетів – від контактних форм до карт Google.

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

JQuery Vertical Mega Menu Widget - безкоштовний плагін, призначений для створення вертикального меню в сайдбарі. Плагін призначений для WordPress загалом, проте явно заточений під електронну комерцію і може використовуватися не лише з WooCommerce, а й з іншими плагінами для інтернет-комерції.

Мені зустрічалося кілька різних плагінів для створення різного роду структурованих, що випадають меню в сайдбарі, проте цей плагін виділяється. Більшість із них автоматично створює меню на основі блогових записів та категорій, на основі дати та місяця. Зручно, якщо у вас просто блог.
Розглянутий плагін дозволяє створювати абсолютно будь-які меню на основі сторінок, товарів, категорій, міток - чого завгодно! Це саме те, що треба для каталогу товарів, хоча доведеться трохи повозитись – пункти додаються вручну.
Після скачування, встановлення та активації плагіна перше, що треба зробити - це створити необхідне меню, яке відображатиметься за допомогою плагіна. У налаштуваннях сайту йдемо на вкладку "Зовнішній вигляд" -> "Меню" і створюємо нове - ну допустимо "menu2". Далі наповнюємо його, як хочемо, робимо вкладені пункти. Поекспериментувати можна і потім, насамперед головне створити хоч щось. Кожен пункт робиться вручну посиланням. Тобто, якщо вставити в меню сторінку каталогу, посилання на каталог працювати буде, але позиції з каталогу в меню автоматично не підтягнутися. Для найбільшого ефекту рекомендується робити трирівневі пункти меню, тоді плагін найбільше себе покаже.

Коли меню створено, треба зробити так, щоб плагін почав його відображати. Йдемо до "Зовнішнього вигляду" -> "Віджети", знаходимо там новий віджет "jQuery Vertical Mega Menu" і поміщаємо його в потрібне місце на сайдбарі. Тут можна поритися трохи в налаштуваннях, хоча головне зараз - це вибрати наше попередньо створене меню menu2 і натиснути Зберегти. Меню створено, його можна переглянути на сайті!

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

Max Mega Menu

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

Особливості Max Mega Menu:

Базується на стандартній системі меню WordPress
Підтримує кілька місць меню, кожне зі своєю конфігурацією
Конструктор шляхом перетягування елементів
Показує віджети WordPress у меню
Налаштовуються стилі меню за допомогою вбудованого редактора тем
Переходи підменю Fade, Fade Up, Slide Up або Slide
Додавання іконок до пунктів меню
Опції пунктів меню, включаючи "Приховати текст", "Вимкнути посилання", "Приховати на мобільному" і т.д.
Вирівнювання пунктів меню

Admin Menus Fixed
Це один з найбільш відомих безкоштовних плагінів меню WordPress, який дозволяє додавати різноманітні меню. Вам не потрібна додаткова прокручування.

Особливості Admin Menus Fixed:

Працює з WordPress 3.5+
Має три варіанти Admin Menus Fixed
Включає панель інструментів WordPress
Автоматично вбудовується у WordPress
Показує елемент вікна адміністратора