Головна › Windows

Плагін WP Mega Menu: функціональні можливості, установка, настройка. Горизонтальне меню, що випадає супер плагін WordPress Вертикальне мега меню wordpress

Широко відомо, що в WordPress 3.0 додана підтримка довільних меню (настроюються меню). Річ, на мій погляд, вкрай зручна і корисна. Власне, звідси і ця стаття.

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

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

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

Замітка: меню працює через таксономию (nav_menu) WordPress, а довільні (зовнішні) посилання, записуються в основну таблицю БД posts. Такий підхід більш гнучкий і динамічний, проте вимагає постійної генерації таких меню.

Register_nav_menus (array ( "top" \u003d\u003e "Верхнє меню", // Назва місця розташування меню в шаблоні "bottom" \u003d\u003e "Нижнє меню" // Назва іншого місця розташування меню в шаблоні));

Зараз ми зареєстрували 2 меню з ідентифікаторами "top" і "bottom" з відповідними їм назвами. Ідентифікатори потрібні, щоб використовувати їх в темі, для вказівки того місця, де, через функцію виведення wp_nav_menu (), буде виводитися створене в адмінці меню. Назви зареєстрованих розташувань ми побачимо в адмінці, коли зайдемо в розділ Зовнішній вигляд -\u003e Меню.

Після того, як меню зареєстровані, йдемо в адмінку і створюємо свої меню (в даному прикладі 2 менюшки):

Задаємо назву меню (меню в шаблоні можна виводити за вказаною назвою, функцією wp_nav_menu ()

Створюємо пункти меню. Використовуємо лівий блок: сторінки посилання, рубрики

Вибираємо де буде розташовано меню, так як ми зареєстрували 2 менюшки, у нас буде 2 варіанти: "Верхнє меню" і "Нижня меню".

Підтримка довільних меню в WordPress включається для кожної теми окремо, такий рядком у файлі functions.php add_theme_support ( "menus"); Однак, в цьому рядку немає необхідності, якщо ми реєструємо меню. У цьому випадком підтримка буде включена автоматично.

Висновок довільних меню через функцію wp_nav_menu

Меню зареєстровані і створені, залишилося додати їх в шаблон. Робиться це функцією wp_nav_menu (), яка може приймати такі параметри:

Wp_nav_menu (array ( "menu" \u003d\u003e "", // (string) Назва виведеного меню (вказується в адмінці при створенні меню, приоритетнее // ніж вказане місце розташування theme_location - якщо вказано, то параметр theme_location ігнорується) "container" \u003d\u003e " div ", // (string) Контейнер меню. Обворачіватель ul. Вказується тег контейнера (за замовчуванням в тег div)" container_class "\u003d\u003e" ", // (string) class контейнера (div тега)" container_id "\u003d\u003e" " , // (string) id контейнера (div тега) "menu_class" \u003d\u003e "menu", // (string) class самого меню (ul тега) "menu_id" \u003d\u003e "", // (string) id самого меню ( ul тега) "echo" \u003d\u003e true, // (boolean) Виводити на екран або повертати для обробки "fallback_cb" \u003d\u003e "wp_page_menu", // (string) Використовувана (резервна) функція, якщо меню не існує (не вдалося отримати ) "before" \u003d\u003e "", // (string) Текст перед кожного посилання "after" \u003d\u003e "", // (string) Текст після кожного посилання "link_before" \u003d\u003e "", // (string) Текст перед анкором (текстом) посилання "link_after" \u003d\u003e "", // (string) Текст після анкора (тексту) посилання "depth" \u003d\u003e 0, / / (integer) Глибина вкладеності (0 - необмежена, 2 - дворівневе меню) "walker" \u003d\u003e "", // (object) Клас збирає меню. Default: new Walker_Nav_Menu "theme_location" \u003d\u003e "" // (string) Розташування меню в шаблоні. (Вказується ключ яким було зареєстровано меню в функції register_nav_menus)));

В даному прикладі в шаблон потрібно вставити приблизно (залежить від необхідних вам параметрів) такі, 2 коду:

# 1. Висновок меню по розташуванню

Верхнє меню.Вставляємо в шапку шаблону (header.php), там де буде виводиться верхнє (top) меню:

"Menu", "theme_location" \u003d\u003e "top", "after" \u003d\u003e "/")); ?\u003e

Виведе створене в адмінці меню, прикріплене до розташування "Верхнє меню" з подібною структурою:

Нижнє меню.Вставляємо в підвал шаблону (footer.php), там де буде виводиться нижня (bottom) меню:

Виведе створене в адмінці меню, прикріплене до розташування "Нижнє меню". Структура буде ідентична першої.

Зверніть увагу, в першому варіанті параметри були передані через масив (array). У другому через рядок. Обидва варіанти правильні. Це звичайна справа для функцій WordPress - параметри можна передавати як масивом, так і рядком (рядок потім перетворюється в масив).

# 2 Виводимо меню за назвою

Щоб вивести меню по його назві можна скористатися аргументом "menu". Назва вказується, то яке було задано при створенні меню в адмінці. У нашому прикладі (див. Малюнок) "Головне меню". Аргумент menu володіє великим пріоритетом ніж theme_location, а значить, якщо ми виводимо за назвою, то параметр theme_location буде ігноруватися.

Можна вказати ID меню, а не назву. Так, при зміні назви меню, код залишиться робочим. ID меню можна подивитися в УРЛ під час редагування меню:

нотатки

Приберемо обгортку Div

Ви напевно звернули увагу, що меню "обертається", часто, непотрібним тегом div. Його можна видалити, вказавши в аргументах для функції wp_nav_menu () порожній параметр "container" \u003d\u003e "".

Змінюємопараметри за замовчуванням

Щоб постійно не вказувати один і ті ж параметр для вставляються меню, їх можна перевизначити в functions.php. Робиться це через фільтр wp_nav_menu_args:

Register_nav_menus (array ( "top" \u003d\u003e "Верхнє меню", "bottom" \u003d\u003e "Нижнє меню")); add_filter ( "wp_nav_menu_args", "my_wp_nav_menu_args"); function my_wp_nav_menu_args ($ args \u003d "") ($ args [ "container"] \u003d ""; return $ args;)

За аналогією, можна створити свої аргументи за умовчанням: $ args [ "аргумент"] \u003d "значення".

Перевірка зареєстровано чи меню

У WordPress так само є, функція умови: has_nav_menu ( "top") - перевіряє чи було зареєстровано розташування меню top. Якщо меню не вказано, то функція wp_nav_menu () спрацює, як wp_list_pages (), але "обворачіватель" div залишиться, незважаючи на те що в аргументах ми його прибрали. Вирішити цю проблему можна так:

If (has_nav_menu ( "top")) (wp_nav_menu (array ( "container" \u003d\u003e "", "theme_location" \u003d\u003e "top", "menu_class" \u003d\u003e "menu"));) else (echo "

"; }

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

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

У статті ми розглянемо основний функціонал плагіна WP Mega Menu, як його встановити і налаштувати.

Функції WP Mega Menu

Широкий діапазон функцій WP Mega Menu включає в себе:

Перетягування меню.
Візуальне побудова меню.
Віджети в пунктах меню.
Варіант кількох тем.
Експортувати / імпортувати теми меню.
Брендинг з логотипом і соціальними іконками.
Маркування меню / значки.
Підтримка значків.
Розтягнуте меню і картинка в тлі меню.
Адаптивне і мобільне меню.
Необмежені кольору і варіанти Google шрифтів.

Розглянемо деякі з потужних функцій більш докладно.

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

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

Повністю адаптивне і мобільне меню

Меню, створені за допомогою WP Mega Menu, будуть на 100% адаптивними і мобільними. Незалежно від розміру пристроїв, на яких працює ваш сайт, у нього не буде проблем з відображенням. Ви можете управляти адаптацією до дозволу екрану, щоб автоматично перемикатися між настільними і мобільними версіями. Меню вашого веб-сайту буде відмінно працювати у всіх ОС.

Інтеграція з WooCommerce

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

Багаторівневі випадають меню

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

розширені функції

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

Соціальні іконки і опція пошуку в меню

У вас є система пошуку за замовчуванням WordPress прямо в вашому меню. З плагіном WP Mega Menu ви можете зробити це всього за кілька кліків.

повнота налаштувань

WP Mega Menu дозволяє повністю налаштовувати меню. Налаштування цього меню і внесення необхідних змін досить проста. Встановлюйте відступи і поля будь-якого елементу в меню. Керуйте видимістю меню відповідно до пристроями, на яких будуть працювати ваші меню. Ви також можете накладати ефекти на елементи меню. Використовуйте різноманітні елементи, такі як значки, параметри фону при налаштуванні меню.

Багатомовний: WPML-сумісний

Незалежно від того, якою мовою ваш сайт буде працювати, WP Mega Menu не матиме проблем ні з якими мовами. Він повністю сумісний з WPML. Робіть свій контент меню на будь-якій мові, і меню буде працювати.

Як побудувати мега-меню на вашому сайті WordPress

1. Встановіть плагін WP Mega Menu

Як і будь-який інший плагін WordPress, ви можете встановити його на свій сайт двома різними способами. Спочатку перейдіть в Особистий кабінет -\u003e Модулі -\u003e Додати новий. Вкажіть в рядку пошуку «WP Mega Menu» і натисніть «Встановити зараз». Потім активуйте плагін, коли з'явиться кнопка «Активувати».

Ви також можете завантажити плагін WP Mega Menu з каталогу WordPress. Потім відкрийте панель інструментів WordPress. Перейдіть в Модулі -\u003e Додати новий -\u003e Завантажити плагін. Завантажте ZIP-файл з плагіном і натисніть «Встановити зараз».

Активуйте плагін після повідомлення про успішну установки. Фактично, сама система попросить його активувати.

2. Створіть меню

Перш за все, створіть меню, перейшовши в панель інструментів WordPress -\u003e Зовнішній вигляд -\u003e Меню. Потім створіть нове меню. Так WordPress дозволяє створювати меню за замовчуванням.

3. Глобальні налаштування WP Mega Menu

Знайдіть вкладку WP Mega Menu на лівій бічній панелі і натисніть на неї.

4. Створіть тему для меню

Теми меню визначають стилі і поведінку навігаційних панелей в меню. Щоб створити тему меню, відкрийте WP Mega Menu -\u003e Теми. Ви можете або створити нову тему, або імпортувати її. Натисніть кнопку «Імпорт теми» або «Створити нову тему», щоб виконати дію.

5. Налаштування елементів Mega Menu

Відвідайте панель інструментів WordPress -\u003e Зовнішній вигляд -\u003e Меню. Параметр WP Mega Menu з'явиться при наведенні курсору миші на елементи меню.

Натисніть на нього, щоб зробити установки. Встановіть для параметра Mega Menu значення «Так» і натисніть «Додати рядок», щоб вибрати рядки і стовпці. Також виберіть тему меню з лівого боку.

Магазин в мега-меню

Зліва ви побачите корисні віджети, за допомогою яких можна додати розширені функції. Перетягніть віджет WPMM Grid WooCommerce і помістіть його в стовпець.

Відредагуйте віджет WPMM Grid WooCommerce. Додайте свої товари з зображеннями та інформацією, як ви хочете, щоб покупці їх бачили. Ви можете вказати назву і вибрати певну категорію або всі категорії для відображення товарів з усіх категорій.

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

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

Спосіб 1: Використання ручного зміни стилю меню навігації в WordPress

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

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

Меню навігації в WordPress відображається у вигляді невпорядкованого списку (маркований список).

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

Ваш невпорядкований список матиме ім'я класу 'menu' з кожним елементом списку, який має свій власний клас.

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

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

Саме тому вам потрібно визначити клас CSS і розташування меню. Швидше за все, ваша тема WordPress вже це робить, шляхом додавання меню навігації за допомогою коду, приблизно так:

"Primary", "menu_class" \u003d\u003e "primary-menu",)); ?\u003e

Цей код повідомляє WordPress, що це тема відображає початкове меню. Він також додасть клас CSS primary-menu до навігації по меню.

Тепер ви можете налаштувати стиль вашого меню навігації за допомогою цієї структури CSS.

#header .primary-menu () // container class #header .primary-menu ul () // container class first unordered list #header .primary-menu ul ul () // unordered list within an unordered list #header .primary -menu li () // each navigation item #header .primary-menu li a () // each navigation item anchor #header .primary-menu li ul () // unordered list if there is drop down items #header .primary -menu li li () // each drop down navigation item #header .primary-menu li li a () // each drap down navigation item anchor

Замініть #header на клас контейнера або ID, що використовується вашою темою WordPress.

Ця структура допоможе вам повністю змінити зовнішній вигляд меню навігації.

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

Current_page_item () // Class for Current Page .current-cat () // Class for Current Category .current-menu-item () // Class for any other current Menu Item .menu-item-type-taxonomy () // Class for a Category .menu-item-type-post_type () // Class for Pages .menu-item-type-custom () // Class for any custom item that you added .menu-item-home () // Class for the Home Link

WordPress також дозволяє додавати класи CSS до окремих пунктів меню зсередини області адміністратора.

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

Зайдемо на сторінку Appearance »Menus і натиснемо на кнопку.

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

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

Метод 2: Налаштувати стиль меню в WordPress за допомогою плагінів

Ваша тема WordPress використовує стиль для меню навігації. Багатьом новачкам не дуже зручно редагувати файли теми або писати CSS самостійно.

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

Спочатку вам потрібно встановити і активувати плагін CSS Hero. Для отримання більш докладної інформації див наш крок за кроком керівництво про те,.

CSS Hero є преміум плагіном в WordPress, який дозволяє проектувати свою власну тему WordPress, не написавши жодного рядка коду (без HTML або CSS).

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

Тепер вам потрібно натиснути на кнопку CSS Hero у вашій панелі адміністратора WordPress.

CSS Hero пропонує редактор WYSIWYG (що ви бачите, то і отримуєте). Натискання на кнопку приведе вас на ваш сайт з плаваючою панеллю інструментів CSS Hero видимої на екрані.

Вам потрібно натиснути на синю іконку у верхній частині, щоб почати редагування.

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

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

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

Тепер CSS Hero покаже вам різні властивості, які можна редагувати як текст, фон, межі, поля, відступи і т.д.

Ви можете натиснути на будь-яку властивість, яке ви хочете змінити. CSS Hero покаже вам простий інтерфейс, де ви можете внести свої зміни.

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

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

Після того, як ви задоволені змінами, натисніть на кнопку Зберегти на панелі інструментів CSS Hero, щоб зберегти зміни.

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

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

Це можна зробити за допомогою стилів.
Але вам потрібно розуміти, що у вас Меню тоді необхідно перемістити з верхньої частини в Сайдбар, якого у вас поки немає.
Ну тобто, якщо ця Тема дозволяє, підключайте з правого боку Сайдбар і переносите в нього Меню.
А щоб воно було вертикальним, досить додати / змінити CSS

Main-navigation ul li, .secondary-navigation ul li (display: block! Important;)

Ну там ще після цього трохи потрібно поміняти відступи та інші властивості.

Можливо я Вас неправильно зрозумів, але у мене Max mega menu вже знаходиться в області лівої колонки (воно чорного кольору, вишикувалося в 2 рядки з за обраніченності області, а так воно за замовчуванням в плагіні горизонтальне), додав туди через віджети, у верхній частині у мене стандартне меню теми і вони мені обидва потрібні, зараз спробую CSS, спасибі

Можливо, що я теж не зовсім правильно вас зрозумів.
Я говорив про меню, яке у вас на скрині в горизонтальному верхньому блоці салатового кольору «Чай Кава Солодощі ...»
Але перечитавши ваш відповідь, розумію, що ми говоримо про різні меню.
На скрині у вас бачу в лівій частині це саме Max mega menu, але не бачу його на сайті по вашому посиланню.
І тому не бачив його і вчора, то на скрін і не дивився.
Зараз також не спостерігаю.

Намагаюся щось зробити постійно, різний ставлю і прибираю, поки не зрозумів як це меню зробити вертикальним, шукаю іншого прийнятного. Для цього меню таке ж рішення за допомогою css можна застосувати як Ви написали? Ви не могли б підказати, в яку саме частину коду вставити дані рядка, в код самого плагіна? Розташування має значення?
Зайшов Модулі-редагувати-вибрав Max mega menu, далі є такі розділи:
css
megamenu.scss
reset.scss
toggle-blocks.scss
admin
mixin.scss
Ні в одному з них не знайшов подібних рядків, щоб виправити

Я просто зовсім нуб і не зрозумів, навіщо Вам потрібно, щоб у мене воно відображалося, мабуть щоб код подивитися і підказати. Знайшов в форумі підтримки Max Mega Menu відповідь адміна, що вертикальне доступно тільки в Про (платній) версії, тому від нього поки що доведеться відмовитися. Чи не могли б Ви будь ласка порадити будь-якої аналогічний плагін, критерії такі:
- можливість встановити в сайдбар
- меню повинно бути випадає
- при переході на будь-яку з категорій, щоб воно залишалося відкритим на даному етапі, а не закривалося повністю з оновленням сторінки

Саме так.
Не бачачи це саме Меню - неможливо давати поради і рекомендації. Можливо, що досить пари рядків в CSS. Але не факт.

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