Плагин предлагает решение полноэкранного меню, созданное специально для веб-сайтов на WordPress, улучшая опыт пользователей и обеспечивая стильный, современный дизайн. Среди его функций - настраиваемые опции стилизации, плавные анимации и бесшовная интеграция с различными темами WordPress. Реализуя этот плагин, владельцы веб-сайтов могут легко создать визуально привлекательное полноэкранное меню, которое одновременно удобно для пользователя и функционально.

Версия плагина: 1.1.0
 
WordPress плагин CodeCanyon Wauki

Особенности плагина

Он предлагает широкий спектр опций настройки, позволяя пользователям настроить меню под брендинг и дизайн своего веб-сайта. Благодаря интуитивным настройкам и простым в использовании инструментам пользователи могут легко регулировать цвета, шрифты, компоновки и анимации, чтобы добиться желаемого внешнего вида и ощущения. Эта гибкость обеспечивает беспрепятственную интеграцию полноэкранного меню в общий дизайн веб-сайта, повышая визуальную согласованность и вовлеченность пользователей.

Адаптивный дизайн плагина гарантирует, что полноэкранное меню легко адаптируется к различным размерам экранов и устройств, обеспечивая консистентный и оптимальный опыт просмотра для всех посетителей веб-сайта. Будь то настольный компьютер, планшет или мобильное устройство, полноэкранное меню остается полностью функциональным и визуально привлекательным, способствуя позитивному опыту пользователя на различных платформах.

Администраторы веб-сайта могут эффективно управлять CodeCanyon Wauki через панель управления WordPress, где они могут получить доступ к интуитивно понятному интерфейсу для настройки параметров, настройки меню и предпросмотра изменений в реальном времени. Этот упрощенный процесс дает пользователям возможность быстро вносить изменения и обновления в полноэкранным меню, не требуя обширных технических знаний или навыков программирования, что экономит время и усилия при управлении навигационной системой веб-сайта.

Интегрируя этот плагин на свои веб-сайты на WordPress, пользователи могут создать захватывающий опыт просмотра, эффективно демонстрирующий свой контент и облегчающий навигацию для посетителей. Благодаря его мощным функциям, возможностям настройки и адаптивному дизайну, плагин предлагает комплексное решение для реализации полноэкранного меню, которое повышает эстетическую привлекательность и функциональность веб-сайтов на WordPress, в конечном итоге улучшая вовлеченность и удовлетворение пользователей.

Спецификации:

Дата выхода: 01-08-2020
Дата обновления: 18-03-2021
Тип расширения: Платный
Лицензия: GPL
Тематика: Структура и навигация
Совместимость: W5.x
Включает в себя: Плагин
Языковые пакеты: Английский
Разработчик: CodeCanyon

Рейтинг:
4.4909747292419 1 1 1 1 1 (Оценок: 277)
4.4909747292419 277

Скачивание по подписке!

Вам необходимо авторизоваться на сайте и приобрести клубную подписку!

Поделись с друзьями!

 

Руководство по настройке CodeCanyon Wauki для полноэкранного меню WordPress

CodeCanyon Wauki нужен не для замены всей темы и не для сборки сложного конструктора навигации, а для одной конкретной задачи: добавить на сайт WordPress выразительное полноэкранное меню с кнопкой открытия, многоуровневой структурой, поиском, footer menu и отдельными настройками внешнего вида. В этом руководстве разберём, как подойти к установке, какие параметры проверить после активации, как связать меню с уже существующей структурой сайта и как понять, что результат работает корректно на компьютере и мобильных экранах.

Материал не повторяет карточку товара. Здесь важнее практический порядок: сначала подготовить меню WordPress, затем включить Wauki, настроить кнопку и фон, проверить мобильную версию, убрать конфликт с меню темы и только после этого делать визуальную полировку. Такой подход снижает риск ситуации, когда красивый overlay появляется, но посетитель не может закрыть меню, не видит важные пункты или получает два разных меню одновременно.

Публичной подробной документации по Wauki найдено немного, поэтому точные названия некоторых пунктов интерфейса могут отличаться в вашей сборке. В статье используются подтверждённые группы функций из CodeCanyon и Envato, официальная документация WordPress по меню и установке плагинов, а также безопасная практика диагностики конфликтов темы, кеша и пользовательских стилей.

Обложка руководства по CodeCanyon Wauki с картой полноэкранного меню WordPress
Обложка показывает основную логику Wauki: кнопка открытия ведёт к полноэкранному меню, а результат нужно проверять на разных состояниях сайта.

Какую задачу решает полноэкранное меню Wauki

Wauki стоит рассматривать как визуальный слой поверх стандартной навигации WordPress. Сначала вы создаёте или выбираете обычное меню в WordPress, выстраиваете пункты, уровни и ссылки, а затем плагин показывает эту структуру в полноэкранном виде. Это важное различие: Wauki не должен становиться местом, где хаотично придумывают навигацию с нуля. Он лучше работает, когда структура сайта уже понятна, а плагин отвечает за подачу, анимацию, фон, кнопку открытия и адаптацию под разные экраны.

Главная польза плагина появляется на сайтах, где стандартный header слишком тесный или визуально слабый. Например, у портфолио есть несколько направлений работ, у бизнес-сайта - услуги, кейсы, контакты и блог, у лендинга - длинная структура с якорями и важной кнопкой связи. В таких сценариях полноэкранное меню помогает вывести навигацию как отдельный слой, не перегружая первый экран.

По официальной карточке Wauki поддерживает многоуровневое меню, кастомизацию кнопки открытия, поиск, дополнительную кнопку закрытия, footer menu, фоновые изображения и цвета, стилизованную полосу прокрутки, отдельные мобильные настройки и несколько служебных режимов показа. Это не универсальный mega menu для карточек товаров и не конструктор сложных выпадающих панелей. Его сильная сторона - fullscreen navigation, где посетитель сначала открывает меню, а затем получает крупный, хорошо читаемый навигационный слой.

Если на сайте уже есть удачная навигация, Wauki может использоваться как акцентный режим: например, только на определённом диапазоне ширины экрана, только для вошедших пользователей или как дополнительная навигация через собственный элемент открытия. Если же основная проблема сайта - плохая структура разделов, слишком много одинаковых страниц или непонятные названия пунктов, сначала стоит исправить меню WordPress. Плагин делает навигацию заметнее, но не исправляет слабую информационную архитектуру.

Кому Wauki подходит, а когда лучше выбрать другой тип меню

Плагин особенно полезен владельцу сайта или вебмастеру, который хочет добавить выразительное меню без переписывания темы. Он подойдёт для портфолио, креативной студии, малого бизнеса, сайта услуги, персонального блога, промо-страницы и проекта, где навигация должна выглядеть как самостоятельный экран. Wauki также может быть удобен разработчику, которому нужно быстро показать клиенту более эффектный сценарий открытия меню, не строя custom overlay вручную.

Для редактора контента преимущество в том, что базовая структура меню остаётся в стандартных инструментах WordPress. WordPress позволяет создавать меню, добавлять страницы, записи, рубрики и произвольные ссылки, а также делать вложенные уровни через перетаскивание. Поэтому перед настройкой Wauki редактор может работать с привычной логикой меню, а вебмастер отдельно доведёт внешний вид overlay.

Но есть ситуации, где Wauki может быть лишним. Если сайт строится на современной блочной теме и вся навигация управляется через Site Editor и Navigation block, заранее проверьте, как тема выводит меню и не будет ли конфликтовать отдельный overlay. Если нужен большой каталог с виджетами, товарами, колонками, иконками, рекламными плитками и сложной сеткой, лучше смотреть в сторону mega menu. Если нужен только компактный мобильный hamburger без полноэкранного слоя, отдельный mobile menu plugin может быть проще.

Практическое правило: выбирайте Wauki, когда нужно сделать навигацию крупной, атмосферной и управляемой через один открывающий элемент. Не выбирайте его только ради того, чтобы скрыть проблемы структуры меню.

Отдельно оцените тон сайта. Полноэкранное меню привлекает внимание, поэтому оно хорошо работает там, где дизайн допускает паузу между контентом и навигацией. На сайтах с быстрым транзакционным сценарием, например в магазине с корзиной и фильтрами, такой слой нужно проверять осторожно: посетителю может быть важнее быстрый доступ к категориям, поиску и корзине, чем эффектный переход.

Что проверить перед установкой на рабочий сайт

Перед установкой Wauki полезно сделать короткую техническую подготовку. Она экономит время на диагностике, потому что проблемы с меню часто выглядят одинаково: пункт не появляется, вложенность не раскрывается, кнопка перекрывает header, поиск не виден, после закрытия меню страница прокручивается странно. Часть этих симптомов связана не с самим плагином, а с темой, кешем, CSS и структурой WordPress-меню.

Проверьте структуру меню WordPress

Начните с меню, которое Wauki должен показывать. В классических темах обычно используется путь Appearance -> Menus. В новых блочных темах управление может идти через редактор сайта и блок навигации, поэтому не удивляйтесь, если привычный экран меню недоступен или работает иначе. WordPress-документация отдельно предупреждает, что классический экран Appearance -> Menus не является основным способом управления меню в новых версиях с блочной навигацией.

Для Wauki важно, чтобы меню было не просто создано, а логически очищено:

  • Верхний уровень содержит только самые важные разделы, а не весь сайт подряд.
  • Вложенные пункты имеют понятных родителей и не уходят на слишком глубокий уровень без необходимости.
  • Произвольные ссылки проверены вручную и не ведут на временные адреса.
  • Пункты с якорями работают на странице, где меню будет использоваться.
  • Названия пунктов короткие, потому что крупное fullscreen-меню сильнее подчёркивает длинные подписи.

Проверьте тему, кеш и права администратора

Убедитесь, что вы можете устанавливать плагины, редактировать меню и добавлять CSS через штатный интерфейс WordPress. Если сайт обслуживает клиент или команда, лучше сначала протестировать Wauki на копии сайта. Полноэкранное меню затрагивает публичную часть, поэтому даже маленькая ошибка в позиционировании кнопки может испортить первый экран.

Если на сайте включены кеширование, оптимизация JavaScript или объединение CSS, запланируйте проверку с очисткой кеша. Меню-плагины часто зависят от скриптов, стилей и состояния body при открытии overlay. Поэтому после активации не оценивайте результат только в админке. Откройте публичную страницу в режиме инкогнито, проверьте поведение на другом устройстве или хотя бы в адаптивном режиме браузера.

Сделайте контрольную точку отката

Перед установкой сохраните текущие настройки темы и меню. Не нужно делать сложную миграцию ради одного плагина, но нужен понятный откат: деактивировать Wauki, вернуть показ меню темы, удалить временный CSS, очистить кеш. Не правьте файлы темы и плагина напрямую. Если нужна небольшая визуальная правка, используйте Additional CSS, дочернюю тему или проверенный plugin для сниппетов.

Установка и первая проверка после активации

Wauki распространяется как коммерческий плагин, поэтому типовой сценарий установки - загрузка ZIP-архива через админ-панель WordPress. В официальной документации WordPress такой способ описан как штатный вариант для плагинов, которые у вас уже есть в виде файла. В этом руководстве не рассматриваются покупка, активация лицензии или получение платной версии. Нас интересует только безопасная настройка уже имеющегося продукта.

  1. Откройте Plugins -> Add New в админ-панели WordPress.
  2. Выберите загрузку ZIP-архива и установите файл плагина.
  3. Активируйте плагин через Activate.
  4. Найдите страницу настроек Wauki в админ-панели. Если точный пункт отличается, проверьте разделы Settings, Appearance и список активных плагинов.
  5. Выберите или свяжите меню WordPress, которое должно отображаться в полноэкранном режиме, если такая настройка присутствует в вашей сборке.
  6. Сохраните изменения и откройте публичную страницу сайта в новом окне.

Первая проверка должна быть максимально простой. Не меняйте сразу цвета, фон, поиск, мобильные параметры и скрытие меню темы. Сначала убедитесь, что кнопка появляется, меню открывается, вложенные пункты читаются, overlay закрывается, страница не ломается и пользователь может вернуться к контенту. Только после этого переходите к дизайну.

Путь первой настройки CodeCanyon Wauki после установки в WordPress
Схема помогает не смешивать установку, выбор меню, проверку overlay и визуальную настройку в один хаотичный этап.

Мини-чек после первого сохранения

Откройте главную страницу, одну внутреннюю страницу и страницу с длинным контентом. Для каждой страницы проверьте четыре действия: открыть меню, перейти по пункту, вернуться назад, закрыть меню без перехода. Если какой-то шаг не работает, не настраивайте дизайн дальше. Сначала найдите причину, потому что визуальные параметры не исправят конфликт скрипта или неправильную структуру меню.

Проверка результата: корректная первая установка - это не красивый фон, а предсказуемое поведение кнопки открытия и закрытия на нескольких страницах сайта.

Настройка кнопки открытия, закрытия и поведения overlay

Кнопка открытия - самый заметный элемент Wauki до того, как посетитель увидит само меню. По официальному описанию плагин позволяет менять цвет, округление, положение, отображение над или под fullscreen menu, добавлять текстовую подпись, выбирать фиксированное или абсолютное позиционирование, скрывать кнопку и использовать custom activator class для открытия меню из собственного элемента сайта. Это один из самых важных наборов параметров, потому что кнопка должна быть заметной, но не мешать header, cookie banner, плавающим кнопкам и контенту.

Позиция кнопки и конфликт с header

Для типового сайта начните с фиксированной позиции в одном из углов или в центре верхней зоны, если дизайн это допускает. Фиксированная кнопка остаётся доступной при прокрутке, но может конфликтовать с липким header. Абсолютная позиция менее навязчива, зато кнопка может исчезнуть после прокрутки. Выбор зависит от сценария: для портфолио и презентационного сайта фиксированная кнопка обычно удобнее, для контентного сайта с длинными статьями её лучше сделать менее агрессивной.

После выбора позиции проверьте:

  • Кнопка не перекрывает логотип, корзину, поиск, кнопку обратной связи и системные уведомления.
  • Кнопка видна на светлом и тёмном фоне, если header меняет цвет при прокрутке.
  • Область клика достаточно удобна на мобильном экране.
  • Анимация превращения в кнопку закрытия не конфликтует с отдельной secondary close button.

Когда использовать собственный элемент открытия

Возможность открыть Wauki через custom activator class полезна, когда кнопка плагина не должна быть отдельным элементом. Например, у темы уже есть аккуратная кнопка Menu в header, и вы хотите, чтобы именно она открывала fullscreen overlay. В таком сценарии не нужно держать две кнопки. В настройках Wauki можно скрыть стандартную кнопку и использовать класс существующего элемента, если ваша версия плагина поддерживает этот режим.

Работайте с этим аккуратно. Сначала найдите CSS-класс нужной кнопки через инструменты браузера, затем внесите его в настройку плагина, сохраните и проверьте на публичной странице. Если после изменения меню перестало открываться, верните стандартную кнопку Wauki и проверьте, правильно ли указан selector. Не используйте случайный класс, который повторяется в нескольких местах сайта, иначе меню может открываться из неожиданных элементов.

Закрытие меню и блокировка прокрутки

Wauki заявляет режим lock body scroll when menu open. Его стоит включать, если под overlay остаётся длинная страница и пользователь случайно прокручивает фон вместо меню. Но у этой настройки есть нюанс: некоторые темы и плагины тоже управляют прокруткой body для попапов, корзины, боковых панелей или cookie banner. Если после включения блокировки страница перестала нормально прокручиваться после закрытия меню, временно отключите этот режим и проверьте конфликт.

Secondary close button нужен не для красоты, а для доступности сценария выхода. Если основная кнопка открытия превращается в close button, дополнительная кнопка может быть лишней. Если кнопка открытия скрыта или находится нестандартно, отдельная кнопка закрытия помогает пользователю быстро выйти из overlay. Не прячьте все способы закрытия одновременно, даже если визуально хочется максимально чистого экрана.

Главное меню, поиск и footer menu: как собрать понятную структуру

Главное меню в Wauki поддерживает многоуровневую структуру, настройки размера шрифта, расстояния между пунктами, использование шрифта темы, выравнивание, цвета и hover effects. Для читателя это означает не просто «можно настроить дизайн», а необходимость выбрать масштаб. В fullscreen-меню слишком мелкий шрифт выглядит как обычный список, а слишком крупный быстро ломает вложенность и мобильную версию.

Многоуровневое меню без перегруза

WordPress позволяет создавать вложенные пункты через drag-and-drop. Но Wauki делает меню крупнее и заметнее, поэтому слабая вложенность сразу бросается в глаза. Для первого запуска используйте не больше двух осмысленных уровней, если сайт не требует большего. Верхний уровень должен отвечать на вопрос «куда посетителю идти дальше», а второй уровень - уточнять направление.

Хорошая структура для бизнес-сайта может выглядеть так:

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

Если в меню есть длинные названия, сначала сократите их в WordPress. Не пытайтесь компенсировать длинные подписи только уменьшением шрифта в Wauki. Мелкий шрифт ухудшит чтение на мобильном экране, а fullscreen-меню потеряет смысл.

Поиск как быстрый выход из глубокого меню

По официальной карточке Wauki включает search function с настройкой выравнивания, цветов и возможностью скрытия. Поиск полезен на контентных сайтах, блогах, каталогах статей и проектах с большим количеством страниц. Для простого лендинга или портфолио поиск может только отвлекать. Поэтому задайте себе вопрос: посетитель реально будет искать материалы по сайту или ему достаточно 5-7 пунктов меню?

Если поиск включён, проверьте placeholder. В changelog Wauki отдельно указано добавление опции для пользовательского placeholder search field. Значит, в вашей версии может быть настройка текста внутри поля. Используйте короткую и понятную фразу. Для русского сайта это может быть «Поиск по сайту», если интерфейс позволяет задать строку. Если перевод или placeholder не настраивается в вашей сборке, не правьте файл плагина. Лучше оставить нейтральный английский UI или проверить штатную локализацию.

Footer menu для социальных ссылок и служебных переходов

Footer menu в полноэкранном overlay удобно использовать для ссылок, которые не должны конкурировать с главным меню: социальные сети, политика конфиденциальности, быстрый контакт, карта сайта, служебная страница. Не помещайте туда второй набор основных разделов. Footer menu должен помогать, а не создавать ощущение двух параллельных навигаций.

Проверьте footer menu отдельно на мобильном экране. Если главное меню занимает много места, footer links могут уйти ниже видимой области, а пользователь не поймёт, что overlay прокручивается. В этом случае уменьшите количество служебных ссылок, включите стилизованную полосу прокрутки, если она нужна, или перенесите часть ссылок обратно в основное меню.

Фон, размеры и мобильная адаптация полноэкранного слоя

Визуальная сила Wauki во многом связана с фоном. Плагин позволяет задавать background color и background image для main menu background, менять opacity изображения, настраивать width, height и расстояние от краёв экрана. Также отдельно заявлены fullscreen background color, background image и opacities. Эти параметры легко сделать красивыми на одном экране и неудобными на другом, поэтому настройка фона должна идти вместе с проверкой читабельности.

Карта настроек Wauki для кнопки, меню, поиска, фона и мобильного режима
Карта показывает, какие группы настроек Wauki влияют на внешний вид, поведение и проверку результата.

Как выбрать фон без потери читаемости

Если используете фоновое изображение, оно должно поддерживать меню, а не спорить с пунктами. Слишком контрастная фотография за крупным текстом быстро превращает navigation overlay в декоративный постер. Начните с однотонного фона или изображения с пониженной opacity. Затем проверьте белый, чёрный и акцентный цвет пунктов меню на нескольких страницах сайта.

Для типового сайта безопаснее такая последовательность:

  1. Сначала включите фоновый цвет без изображения и настройте контраст текста.
  2. Добавьте изображение только после того, как меню уже читается.
  3. Уменьшите opacity изображения, если пункты теряются.
  4. Проверьте hover effects, чтобы активное состояние было видно на фоне.
  5. Откройте меню на мобильном экране и убедитесь, что фон не делает текст мелким или шумным.

Desktop и mobile layout должны решать разные задачи

Wauki позволяет задавать custom resolution, при котором дизайн переключается на мобильный layout, и отдельно менять мобильное выравнивание, размер шрифта, spacing и footer menu align. Не копируйте desktop-настройки на мобильный режим без проверки. На широком экране меню может быть центрированным и крупным, а на мобильном лучше работать левым выравниванием и более плотным расстоянием между пунктами.

Точку переключения выбирайте по поведению конкретной темы. Если header темы уже ломается на определённой ширине, Wauki может включаться раньше или позже, но это нужно проверять глазами. Откройте адаптивный режим браузера и найдите диапазон, где стандартное меню темы становится неудобным. Затем настройте Wauki так, чтобы overlay появлялся там, где он действительно помогает.

Стилизованная прокрутка и длинные меню

Styled scrollbar стоит включать, если внутри overlay много пунктов или footer menu уходит ниже первого экрана. Но сама полоса прокрутки не решает проблему перегруженной структуры. Если меню требует активной прокрутки на большинстве устройств, пересмотрите количество пунктов верхнего уровня. Полноэкранный формат лучше работает как ясная карта сайта, а не как склад всех ссылок.

Скрытие меню темы и режимы показа без конфликтов

Одна из практических функций Wauki - возможность скрыть theme menu по class или ID. Это важно, потому что два меню одновременно часто выглядят как ошибка: посетитель видит обычный header и отдельную кнопку fullscreen overlay, но не понимает, какая навигация главная. При этом скрывать меню темы нужно аккуратно, потому что header может содержать логотип, поиск, корзину, переключатель языка или кнопку входа.

Когда скрывать меню темы

Скрытие уместно, если Wauki становится основным способом навигации. Например, вы оставляете в header только логотип и кнопку открытия fullscreen menu. Если тема выводит меню в нескольких местах, скрывайте только конкретный selector навигации, а не весь header. Сначала проверьте структуру через инструменты разработчика, найдите class или ID именно у блока меню и только потом добавляйте selector в настройку плагина.

Если Wauki используется как дополнительный слой, стандартное меню темы можно оставить. Такой подход подходит для сайтов, где основная навигация нужна всегда, а fullscreen overlay содержит расширенную карту разделов. В этом случае убедитесь, что подпись кнопки Wauki не дублирует обычную кнопку меню темы и не вводит посетителя в заблуждение.

Показ по разрешению и для вошедших пользователей

Wauki заявляет show menu at specified resolution range only и show to logged in users only. Первый режим помогает разделить desktop и mobile сценарии. Например, на desktop оставить обычный header, а на узких экранах включить Wauki как более удобный overlay. Второй режим может быть полезен для закрытых разделов, учебных сайтов, клиентских кабинетов или внутренних страниц, где меню нужно только авторизованным пользователям.

Проверяйте такие правила в разных состояниях. Откройте сайт как администратор, как обычный пользователь и как гость. Если меню показывается только вошедшим, убедитесь, что гость всё равно может попасть в нужные публичные разделы через обычную навигацию темы. Если Wauki показывается только на определённой ширине, проверьте промежуточные размеры, где обе навигации могут пересечься.

Безопасный CSS, если штатного скрытия недостаточно

Если встроенное скрытие по selector не решает частный конфликт, можно добавить небольшой CSS через Appearance -> Customize -> Additional CSS или другое штатное место вашей темы. Этот пример не использует внутренние классы Wauki и не правит файлы плагина. Замените selector на реальный класс меню вашей темы.

/* Скрывает только меню темы на узких экранах, когда Wauki используется как мобильная навигация */
@media (max-width: 900px) {
  .site-header .main-navigation {
    display: none;
  }
}

После добавления CSS очистите кеш и проверьте сайт как гость. Если исчез логотип, корзина или другая важная часть header, selector выбран слишком широко. Откат простой: удалите правило из Additional CSS и сохраните настройки. Не используйте CSS для скрытия ошибок, которые лучше решить настройками Wauki или темы.

Практический пример: fullscreen-меню для портфолио или сайта услуг

Рассмотрим предметный сценарий. Есть сайт студии или специалиста с разделами «Работы», «Услуги», «Процесс», «Отзывы», «Блог» и «Контакты». Обычный header перегружает первый экран, потому что рядом с логотипом не помещается всё меню. Цель - оставить верх сайта чистым, добавить заметную кнопку открытия и показать посетителю полноэкранную карту разделов.

Цель и подготовка

Нужно получить меню, которое открывается поверх страницы, показывает 5-6 крупных пунктов, содержит вложенные услуги, даёт быстрый поиск по блогу и оставляет служебные ссылки в footer menu. Перед настройкой подготовьте обычное WordPress-меню с понятной вложенностью. Не начинайте с фона и анимаций, пока структура не готова.

Шаги настройки

  1. Создайте или выберите меню WordPress для Wauki и оставьте в верхнем уровне только главные разделы.
  2. В настройках Wauki включите основное fullscreen menu и выберите нужное меню, если ваша версия предлагает выбор источника.
  3. Настройте main menu button: выберите позицию, цвет, округление и при необходимости короткую подпись.
  4. Настройте внешний вид главного меню: размер шрифта, spacing, выравнивание и цвет активных состояний.
  5. Включите поиск, если блог или база материалов действительно важны для посетителя.
  6. Добавьте footer menu для социальных ссылок или служебных страниц, но не дублируйте основные пункты.
  7. Настройте фон: сначала цвет, затем изображение с аккуратной opacity, если оно нужно.
  8. Проверьте mobile layout и при необходимости задайте отдельный размер шрифта и выравнивание.

Ожидаемый результат и проверка

На публичной странице должна остаться чистая верхняя зона: логотип, возможно короткий header и кнопка Wauki. При клике открывается fullscreen overlay, где посетитель видит крупные направления сайта. Вложенные пункты не должны ломать чтение. Поиск не должен перекрывать пункты меню. Footer menu должен быть виден или доступен через понятную прокрутку.

Проверьте результат по цепочке кнопка -> overlay -> вложенный пункт -> переход -> возврат -> закрытие. Затем повторите проверку на узком экране. Если в мобильном режиме overlay становится слишком длинным, уменьшите footer menu, сократите названия пунктов или измените spacing. Если кнопка мешает контенту, поменяйте позицию или используйте custom activator class на уже существующей кнопке темы.

Пример использования Wauki для портфолио, сайта услуг и контентного проекта
Мини-сценарии показывают, как один и тот же fullscreen overlay можно адаптировать под портфолио, сайт услуг и контентный проект.

Как проверить результат на сайте и не пропустить мелкие сбои

После настройки Wauki не ограничивайтесь просмотром главной страницы в авторизованном браузере. Администратор часто видит сайт в состоянии, которое отличается от посетителя: сверху есть admin bar, кеш может быть отключён, часть скриптов загружается иначе. Для честной проверки откройте сайт как гость, в отдельном браузере или режиме инкогнито.

Функциональная проверка

Сначала проверьте поведение, а не красоту. Откройте несколько типов страниц: главную, страницу услуги, запись блога, страницу с формой и длинную статью. Для каждой страницы убедитесь, что кнопка Wauki есть там, где нужна, меню открывается без задержки, overlay закрывается, переход по пунктам работает, а после закрытия можно прокручивать страницу.

Адаптивная проверка

Затем проверьте ширину экрана. Особое внимание - промежуточным размерам, где тема уже может переключаться в мобильный режим, а Wauki ещё работает как desktop overlay или наоборот. Если меню показывается только в заданном диапазоне разрешений, протестируйте границы этого диапазона. Иногда проблема проявляется не на «мобильном» и не на «desktop», а ровно между ними.

Проверка читаемости и доступности

Оцените контраст, размер шрифта, расстояние между пунктами и понятность закрытия. Полноэкранное меню должно быстро отвечать на вопрос «куда идти дальше». Если посетитель вынужден рассматривать фон, искать крестик или угадывать, какие пункты вложены, настройка требует упрощения. Красивый overlay без ясного пути хуже простого меню, которое работает без вопросов.

SEO и аналитика без завышенных ожиданий

Wauki не стоит воспринимать как SEO-плагин. Он влияет на пользовательскую навигацию и может улучшить восприятие сайта, если меню стало понятнее, но не гарантирует рост позиций. После запуска проверьте, что важные ссылки доступны в HTML, страницы не закрыты случайно, а поисковая форма не стала единственным способом найти контент. Если у вас подключена аналитика, смотрите на поведение пользователей: клики по меню, глубину просмотра, возвраты и выходы после открытия overlay.

Если Wauki не отображается, перекрывает сайт или ведёт себя нестабильно

Диагностику лучше вести от простого к сложному. Не меняйте сразу десять параметров: так сложно понять, что именно исправило проблему. Ниже собраны типичные симптомы для fullscreen menu plugin и безопасный порядок проверки.

Диагностическая схема ошибок Wauki для WordPress меню
Диагностическая карта связывает симптом, вероятную причину, проверку и безопасный откат настройки.

Кнопка открытия не появляется на странице

Симптом: плагин активен, но на публичной странице нет кнопки Wauki. Возможные причины - меню скрыто по диапазону разрешения, включён показ только для вошедших пользователей, кнопка скрыта в настройках, selector custom activator указан неверно или кеш отдаёт старую версию страницы.

Что проверить

  • Откройте сайт как администратор и как гость, чтобы проверить режим показа для разных пользователей.
  • Измените ширину браузера и посмотрите, не включается ли меню только в другом диапазоне.
  • Верните стандартную кнопку Wauki, если до этого использовали custom activator class.
  • Очистите кеш сайта, кеш оптимизатора и кеш браузера.

Если после возврата стандартной кнопки меню появилось, проблема почти наверняка в selector собственного элемента. Уточните class или ID и проверьте, что элемент реально присутствует на тех страницах, где должен открывать меню.

Открывается два меню или header выглядит перегруженным

Симптом: на странице видны и меню темы, и кнопка fullscreen overlay, а на мобильном экране они конкурируют. Причина обычно в том, что Wauki добавлен поверх темы, но стандартное меню не скрыто или скрыт слишком широкий блок.

Исправление зависит от роли Wauki. Если он должен заменить меню темы, используйте настройку hide theme menu by class/ID или аккуратный CSS для конкретного selector. Если он является дополнительным меню, оставьте оба варианта, но сделайте подписи и расположение понятными. Откатывать нужно сразу, если вместе с меню исчезают логотип, корзина, форма поиска или переключатель языка.

Меню открывается, но страница перестаёт прокручиваться после закрытия

Симптом: после закрытия overlay фон страницы остаётся «заблокированным» или прокрутка ведёт себя странно. Возможные причины - конфликт режима lock body scroll with menu open с темой, попапом, cookie banner, корзиной или оптимизацией JavaScript.

Проверьте сначала настройку блокировки прокрутки в Wauki. Временно отключите её, очистите кеш и повторите тест. Если проблема исчезла, решите, нужна ли блокировка в вашем сценарии. Для короткого меню её можно не включать. Для длинного меню лучше оставить, но тогда нужно проверить конфликт с другими overlay-элементами сайта.

Стили не применились или фон выглядит иначе, чем в админке

Симптом: в настройках выбран цвет, фон или spacing, но на публичной странице результат другой. Частые причины - кеш, минификация CSS, приоритет стилей темы или слишком общий пользовательский CSS. Сначала отключите агрессивную оптимизацию на время теста или очистите кеш. Затем проверьте страницу в режиме инкогнито.

Если используется фоновое изображение, убедитесь, что оно доступно по правильному URL и не блокируется правилами безопасности. Если пользовательский CSS перекрывает Wauki, временно уберите последние правила из Additional CSS. Когда причина найдена, возвращайте только нужные стили, а не весь набор изменений.

На мобильном меню слишком длинное или не помещается

Симптом: пункты уходят ниже экрана, footer menu теряется, посетитель не видит закрытие или поиск. Начните не с уменьшения всего интерфейса, а с структуры. Сократите верхний уровень, уберите лишние footer links, настройте мобильный font size и item spacing, проверьте align menu items и footer menu align.

Если меню всё равно длинное, включите или настройте styled scrollbar, чтобы пользователь видел, что слой прокручивается. Но не используйте scrollbar как оправдание для чрезмерного количества ссылок. Для fullscreen-формата краткость важнее полного каталога.

Ограничения и аккуратные улучшения без правки файлов плагина

У Wauki достаточно визуальных настроек, но не стоит ожидать, что он заменит все функции меню-конструктора. Не добавляйте неподтверждённые возможности вроде сложных товарных карточек, динамических виджетов или правил показа по страницам, если их нет в вашей версии. Лучше честно держать Wauki в его сильной зоне: полноэкранное меню, кнопка, поиск, footer menu, фон, мобильная адаптация и режимы показа.

Безопасное улучшение обычно не требует PHP. Для такого плагина чаще достаточно трёх типов работы: очистить структуру WordPress-меню, настроить режимы показа и добавить маленький CSS для темы. PHP-snippets без официальных hooks лучше не использовать, потому что публичной документации по extension points Wauki не найдено. Любая правка файлов плагина будет потеряна при обновлении и усложнит поддержку.

Если нужно адаптировать подписи или перевод, сначала ищите штатные настройки Wauki и файлы локализации в пакете. В changelog упомянуты обновления translation strings, но это не означает, что любую строку можно безопасно менять в коде. Для placeholder поиска используйте настройку плагина, если она есть. Если её нет, лучше записать ограничение и не ломать обновляемость продукта.

Для визуальной полировки держите правило: один маленький CSS-блок - одна задача. Например, скрыть конкретное меню темы на мобильной ширине, поправить расстояние вокруг кнопки или убрать конфликт с липким header. После каждого изменения делайте проверку как гость и очищайте кеш. Если CSS начинает превращаться в длинную таблицу исключений, возможно, выбранный режим Wauki не подходит текущей теме.

Вопросы по настройке и проверке Wauki

Можно ли использовать Wauki вместе с меню темы?

Да, если это осмысленный сценарий. Например, обычное меню темы остаётся на desktop, а Wauki включается только на узких экранах или используется как расширенная карта сайта. Если два меню одновременно мешают друг другу, используйте скрытие theme menu по class/ID или аккуратный CSS для конкретного диапазона.

Нужно ли создавать отдельное WordPress-меню специально для Wauki?

Часто это лучший вариант. Отдельное меню позволяет сократить подписи, убрать лишние служебные ссылки и подобрать структуру именно под fullscreen overlay. Если использовать главное меню темы без изменений, оно может оказаться слишком длинным или плохо читаться в крупном формате.

Почему настройка по разрешению важна?

Потому что тема и плагин могут переключаться в разные моменты. Если Wauki появляется слишком рано, он может дублировать нормальное desktop-меню. Если слишком поздно, пользователь увидит неудобную мобильную навигацию темы. Проверяйте промежуточные ширины, а не только один размер телефона.

Влияет ли Wauki на SEO?

Wauki не является SEO-инструментом и не должен рассматриваться как способ гарантированно улучшить позиции. Его влияние косвенное: меню может улучшить навигацию и поведение пользователя, если ссылки понятны и доступны. Важнее проверить, что ключевые страницы остаются доступными, ссылки не спрятаны только за поиском, а overlay не мешает просмотру контента.

Что делать, если поиск в overlay не нужен?

Отключите его, если ваша версия Wauki позволяет это сделать. Поиск полезен для блогов и контентных проектов, но на коротком сайте услуг он может отвлекать. Лучше простое меню из понятных разделов, чем лишний элемент, которым никто не пользуется.

Можно ли менять файлы плагина для доработки внешнего вида?

Не стоит. Правки файлов плагина потеряются при обновлении и усложнят поддержку. Используйте настройки Wauki, настройки темы, Additional CSS, дочернюю тему или безопасный сниппет только тогда, когда есть понятное место вставки и план отката.

Почему Wauki может не подойти интернет-магазину?

Он может подойти магазину как визуальное меню, но не заменяет сложный каталог, фильтры, корзину и быстрый доступ к категориям. Если покупатель должен быстро переходить между разделами товаров, полноценный mega menu или меню темы может быть удобнее, чем эффектный fullscreen overlay.

Когда CodeCanyon Wauki будет удачным выбором

Wauki стоит использовать, если вам нужен выразительный fullscreen overlay, который можно добавить к существующей теме WordPress без переписывания навигации с нуля. Перед запуском важно подготовить обычное меню WordPress, настроить кнопку открытия, проверить фон и мобильный режим, решить вопрос с меню темы и пройти диагностику как гость. Тогда плагин будет работать как понятная навигационная надстройка, а не как декоративный слой поверх нерешённых проблем.

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

Если же вам нужен mega menu с колонками, сложный mobile-only plugin или навигация с большим количеством интерактивных блоков, лучше сразу сравнить альтернативы. Wauki раскрывается там, где полноэкранное меню действительно помогает сайту выглядеть собраннее и понятнее, а не просто добавляет ещё один эффект.

Автор: Редакция JoomFox.org

Вы не зарегистрированы, чтобы оставлять комментарии.