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

Студия меню (Baza Helper > Студия меню) это визуальный редактор меню сайта. Он работает с любой темой. Baza Theme выводит меню собственной разметкой шапки, а любая другая тема может вывести его шорткодом, вызовом PHP или блоком.

Создание меню

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

Панель пункта

Выберите пункт, чтобы редактировать его. Действия это кнопки-значки: добавить дочерний, дублировать, вверх, вниз и удалить. Поля идут по два в строке.

• Названия на разных языках: до трёх языков показываются как метки в строке подписи, а больше превращают подпись в переключатель. Карточки на холсте показывают точки для заполненных языков.
• Иконка, классы и атрибуты (аккордеон): значок (нет, вставленный SVG с живым предпросмотром или изображение из библиотеки), его положение, классы CSS пункта и ссылки, HTML id, заголовок, метка ARIA, значения rel, новая вкладка и собственные атрибуты data-* и aria-*.
• Поля проверяются по мере ввода: идентификаторы CSS, уникальный id и разрешённые атрибуты. Неверное значение объясняется и не сохраняется. SVG, который санитайзер не может восстановить, отклоняется с объяснением.

Редактор также предупреждает о битых ссылках и отсутствующих переводах. Метки на панели инструментов показывают числа.

Мега-панели

Пункт может открывать мега-панель с 1–4 столбцами. Панель состоит из блоков: текст, изображение, группа ссылок и залы (услуги календаря бронирования, если он установлен).

Несколько меню и мест

• Воспользуйтесь панелью над холстом, чтобы переключать меню, Новое меню, Переименовать и Удалить. Главное меню существует всегда и не удаляется. Меню может быть 30.
• Где показывать перечисляет места меню темы флажками. Отмеченное место выводит это меню там, где тема запрашивает это место.
• Импортировать меню WordPress превращает меню, созданное в разделе Внешний вид > Меню, в меню студии. Меню WordPress остаётся нетронутым. Когда открытое меню студии пусто, а на сайте есть меню WordPress, панель импорта появляется сама.

Показ меню на сайте

[baza_menu id="main" class="my-nav" label="Main menu"]

 'main', 'class' => 'my-nav', 'label' => 'Main menu' ) ); ?>

Без id используется главное меню. Результат это nav с вложенными списками, настоящие кнопки для мега-панелей, гамбургер на малых экранах и поддержка клавиатуры (Esc, ArrowDown). Для блочных тем есть блок Baza menu (baza-helper/menu) в разделе Внешний вид > Редактор, а меню выбирается на боковой панели. CSS и JavaScript загружаются только на страницах, выводящих меню. Цвета и размеры это переменные CSS, начинающиеся с --baza-menu-.

Языки

Языки берутся из WPML, Polylang или TranslatePress, а иначе из собственной настройки языка сайта и cookie языка.

Сохранение

Сохраняйте панелью страницы или Ctrl+S. Для сохранения нужно разрешение edit_theme_options. Меню очищается при сохранении: неизвестные типы пунктов отбрасываются, остаются только безопасные классы и атрибуты.