Навигация сайта WordPress
У «Веб-мастерской» есть страницы о проекте, способе обучения и контактах, а также три учебные записи. Теперь посетителю нужен понятный путь между ними. Составим навигацию, которая отвечает задачам читателя: познакомиться с программой, выбрать порядок работы и найти способ задать вопрос. Результат урока — небольшое меню с проверенными назначениями ссылок, а не максимально полный список всех сущностей базы.
Навигация и структура хранения связаны, но не совпадают. Страница может иметь родителя, запись — рубрику, однако из этого не следует единственно правильное меню. В WordPress с блочной темой навигация редактируется блоком Navigation; расположение и доступность редактора зависят от темы и прав пользователя. Его возможности описаны в документации блока Navigation. В этом уроке выбираем модель меню, которую позже подключим к общей части хедера собственной темы.
Задачи вместо списка таблиц
Для первого варианта выберем три ссылки: «Как учиться», «О мастерской», «Контакты». Главная страница будет доступна через название сайта. Рубрики «Основы веба» и «Практика» можно показать отдельным списком в содержимом главной, когда подготовлены их описания. Не добавляйте в верхнюю строку все три записи, четыре будущих курса и каждый архив. Такой хедер быстро перестанет помещаться и потребует постоянного редактирования после каждой публикации.
Рассмотрим задачу нового посетителя. Он понимает тему сайта, но не знает, какой курс выбрать. Ссылка «Как учиться» объясняет порядок и предпосылки. Человеку, который уже читает статью, важнее соседний урок и оглавление серии; верхнее меню не должно подменять эту локальную учебную навигацию. Для автора, желающего уточнить сведения, полезны «Контакты». Поэтому порядок ссылок определяется частотой и значимостью задач, а не датой создания страниц или их внутренним ID.
В редакторе навигации добавляйте существующие страницы через поиск, когда такой выбор доступен. Это помогает связать подпись с нужным объектом. Ручная ссылка уместна для внешнего ресурса или заранее согласованного адреса. В нашем стенде страницы пока могут иметь технические URL с параметрами; после настройки постоянных ссылок проверьте реальные назначения пунктов. Не предполагаем, что любая ручная строка автоматически перепишется вслед за изменением слага страницы.
Зафиксируем полный контракт первого меню:
| Позиция | Подпись | Объект | Ожидаемый адрес после урока 8 |
|---|---|---|---|
| 1 | Как учиться | страница study | /study/ |
| 2 | О мастерской | страница about | /about/ |
| 3 | Контакты | страница contacts | /contacts/ |
В таблице нет ID меню. WordPress может хранить навигацию как отдельную редактируемую сущность, а её числовой идентификатор назначается в конкретной базе. Когда наша тема позже использует явные ссылки без ref, это будет другой, файловый источник начального содержимого. Мы отдельно разберём переход от файла к изменённому в редакторе состоянию. Не смешивайте обе версии так, будто они обязательно синхронизируются без участия редактора.
Понятные подписи и состояния
Название пункта должно обозначать результат перехода. «Подробнее» рядом с другими такими же пунктами не помогает понять, куда вы попадёте. «Как учиться» объясняет назначение лучше, чем «Информация», а «Контакты» — лучше, чем «Обратная связь», если страницы с формой пока нет. Подпись можно сократить относительно полного заголовка документа. Это изменение текста ссылки, а не переименование самой страницы и не повод менять её URL.
На странице study меню должно позволять понять, какой пункт соответствует текущему месту. В выводе выбранной темы проверьте визуальное состояние и, где предусмотрено, aria-current. Цвет — лишь один сигнал. Подчёркивание или иной устойчивый признак полезен людям, которым сложно различать оттенки. Не назначайте активным пункт «О мастерской» на любой странице только потому, что он находится в том же разделительном контейнере. Текущее состояние определяется действительным назначением ссылки.
Не включайте открытие новой вкладки у всех внутренних пунктов. Читатель ожидает обычный переход и возможность вернуться средствами браузера. Новое окно оправдано конкретным сценарием, а не стремлением удержать посетителя на сайте. Внешняя ссылка тоже не обязана открываться отдельно. Если такое поведение требуется, оно должно быть понятно из контекста, особенно при работе с клавиатурой или программой чтения с экрана. Главное меню нашей мастерской остаётся обычной внутренней навигацией.
Узкий экран и длинная подпись
Проверьте меню при ширине телефона и при увеличенном тексте. Блочная навигация может показывать кнопку открытия адаптивного меню; конкретное поведение задаёт её конфигурация и тема. Нужно проверить доступность кнопки, возможность закрыть панель и порядок фокуса. Наличие иконки из трёх полос не доказывает, что меню работает. Если после открытия нельзя перейти к первой ссылке или закрыть панель, посетитель теряет доступ к остальной странице.
В качестве изменения примера временно переименуйте пункт «Как учиться» в «Как выбрать первый учебный маршрут». Адрес должен остаться прежним, а компоновка — выдержать более длинную подпись. Это проверка устойчивости, а не окончательное название. Если строка ломает хедер, определите правило переноса или адаптивное поведение. Уменьшение текста до едва читаемого размера ради одной горизонтальной строки не решает навигационную задачу и делает все остальные страницы неудобными.
Ошибка назначения ссылки заметна даже при красивом меню. Пункт может вести на предварительный просмотр черновика, доступный только администратору, или на старый технический адрес другого стенда. Поэтому проверяйте переход анонимно и сравнивайте страницу назначения с таблицей. Если материал ещё не опубликован на закрытом стенде, зафиксируйте ожидаемую недоступность; не выдавайте панель администратора за публичный маршрут. В учебной серии публикация означает состояние отдельного стенда, не выпуск ProfessorWeb.
Ожидаемый результат — три осмысленных пункта, переход на главную через название сайта и отдельное место для будущего каталога. Просмотры, открытие адаптивной панели и проверка фокуса здесь не выполнялись. Матрица назначения ссылок находится среди редакционных материалов архива и позволяет читателю записать собственные наблюдения. Следующий урок распределит права: обычный автор сможет готовить статьи, но изменение общего меню будет доверено человеку, который отвечает за структуру сайта целиком.