Менюта и навигация

Модул 4: Създаване на съдържание · Време за четене: 7 минути

Учебна цел: След този урок ще можете да създадете ясно меню, както в блок тема, така и в класическа тема, и ще знаете какво прави едно меню добро.

Ключови понятия: навигационен блок, Редактор на сайта, Изглед > Menu's, местоположение на менюто, подменю, персонализирана връзка, мобилно меню, меню във футъра, текст на връзка, достъпност

Два начина, в зависимост от Вашата тема

Къде създавате менюто зависи от Вашата тема (урок 5.1):

• Блок тема: менюто е навигационен блок в заглавната част на сайта. Редактирате го в Редактора на сайта (Изглед > Editor > Навигация, или в шаблонната част Заглавна част).
• Класическа тема: създавате менюто в Изглед > Menu's и там избирате местоположение на менюто, което темата предлага, като „Основно меню“ или „Футър“.

Не виждате Menu's в Изглед, а само Editor? Тогава използвате блок тема. Това е честа причина за объркване след смяна на тема: „моето меню изчезна“. Старото меню все още съществува (то се съхранява в базата данни като списък с елементи на менюто), но новата тема гледа на друго място. В Редактора на сайта можете при навигационния блок да импортирате съществуващо класическо меню.

Какво може да съдържа

Елемент от менюто може да бъде:

• страница или публикация от Вашия сайт;
• категория (тогава води до архива на тази категория);
• персонализирана връзка: всякакъв адрес, включително към друг сайт, или котва в рамките на страница (/diensten/#prijzen);
• в блок тема също други блокове в навигацията, като поле за търсене, икони за социални мрежи или бутон „Запазване на час“.

Елементите на менюто можете да подредите един под друг като подменю: в класическа тема, като ги плъзнете леко надясно, в навигационния блок с „Добави подменю“ или като плъзнете един елемент върху друг.

Елемент от менюто води до страница, но има собствен етикет. Ако по-късно промените заглавието на страницата, етикетът в менюто не се променя автоматично (в класическо меню никога, в навигационния блок зависи от начина, по който сте добавили елемента). Затова след промяна на заглавие проверете и менюто.

Добро меню

Менюто не е съдържание на целия Ви сайт. То е пътепоказател към няколкото места, към които повечето посетители искат да стигнат. Няколко насоки:

• Малко основни елементи: около пет до седем. Повече не се побира добре на телефон и посетителите така или иначе не ги четат.
• Най-много едно ниво подменю. Подменю в подменю е трудно за използване на телефон и объркващо за екранни четци.
• Заглавието на подменю също е връзка. В много теми кликването върху „Услуги“ отваря подменюто, но „Услуги“ само по себе си също е страница. Уверете се, че тази страница съществува и показва нещо смислено, или че елементът е ясно само заглавие.
• Обикновени думи, които посетителите биха използвали: „Цени“, а не „Нашите инвестиционни възможности“.
• Контакти и най-важното действие (запазване на час, поръчка) винаги достъпни, често вдясно в менюто или като бутон.
• Юридически връзки (политика за поверителност, общи условия, настройки на бисквитки) принадлежат на меню във футъра, не в основното меню. Но винаги трябва да са достъпни, на всяка страница (урок 9.3).

Мобилно и достъпно

На телефон менюто обикновено се свива до бутон с три чертички (т.нар. „хамбургер меню“). При навигационния блок настройвате кога това се случва (винаги или само на малки екрани). Винаги тествайте на истински телефон:

• Можете ли да докоснете всеки елемент с палец, без случайно да докоснете съседния?
• Отварят ли се подменютата с докосване и затварят ли се отново?
• Затваря ли се менюто, когато изберете елемент?

За достъпност (посетители с екранен четец или такива, които използват само клавиатура) обърнете внимание на:

• Ясни текстове на връзките. „Прочетете повече“ или „Кликнете тук“ не казват нищо, ако екранен четец изчита всички връзки една след друга. „Прочетете повече за нашето работно време“ е по-добре.
• Управление с клавиатура: с Tab през менюто, с Enter за отваряне на елемент. Повечето теми и навигационният блок правят това добре; саморъчно направени менюта със скриптове често не.
• Връзка към друг сайт за предпочитане се отваря в същия прозорец. Ако трябва да се отвори в нов прозорец, споменете това изрично.

Друга навигация

Освен основното меню, тези елементи помагат на посетителите да намерят пътя си:

• поле за търсене (блокът за търсене), особено при сайт с много публикации;
• трохи от хляб („Home > Услуги > Уеб дизайн“), често предоставени от SEO разширение или темата;
• вътрешни връзки във Вашите текстове към други страници (добро и за видимост в търсачките, урок 9.2);
• страница 404, която помага: с поле за търсене и връзки към най-важните страници, вместо само „не е намерено“. При блок тема я редактирате като шаблон „404“ в Редактора на сайта.

На практика: ето как изглежда в панел

В Табло на WordPress:

• Блок тема: Изглед > Editor > Навигация. Изберете менюто, добавете елементи с плюса, плъзнете ги в правилния ред, и в настройките на навигационния блок изберете кога се появява мобилното меню.
• Класическа тема: Изглед > Menu's. Създайте меню, отметнете страници отляво и кликнете върху Добавяне в меню, плъзнете реда, и отдолу отметнете местоположението на менюто. Запазване.

Обобщение

• В блок тема създавате менюто с навигационния блок в Редактора на сайта; в класическа тема в Изглед > Menu's с местоположение на менюто.
• Менюто показва пътя към няколко важни места: малко елементи, най-много едно ниво подменю.
• Юридическите връзки принадлежат на меню във футъра, винаги достъпни.
• Тествайте мобилното меню на истински телефон и използвайте текстове на връзки, които сами по себе си казват нещо.
• Поле за търсене, вътрешни връзки и полезна страница 404 допълват менюто.

Тест

Задача

Задача D4.3: Меню, което работи. Създайте (или подобрете) основното меню на Вашия сайт с най-много седем основни елемента, едно подменю и една персонализирана връзка, и меню във футъра с Вашата политика за поверителност. Тествайте мобилното меню на Вашия телефон и само с клавиатура (Tab и Enter). Отметнете какво работи и запишете: какъв вид тема имате (блок или класическа), къде създадохте менюто, и кой текст на връзка подобрихте и как?

Допълнително четене

За работата в самия WordPress все още нямаме собствени статии; официалната документация на WordPress е обширна.

• Навигационен блок (wordpress.org, на английски): https://wordpress.org/documentation/article/navigation-block/
• Менюта в класически теми (wordpress.org, на английски): https://wordpress.org/documentation/article/appearance-menus-screen/
• Редактор на сайта (wordpress.org, на английски): https://wordpress.org/documentation/article/site-editor/