Научете как да създадете лепкаво меню за основната навигация на вашия уебсайт WordPress! Залепващите менюта помагат за подобряване на потребителското изживяване, като правят менюто на вашия уебсайт по-лесно достъпно за посетителите на сайта. Освен това може да помогне за подобряване на цялостния външен вид на вашия сайт. Да влезем в него!
1. Отидете до редактора на сайта
Първата стъпка в този процес е да отидете до „Редактор на сайт“ в административната област на WordPress. Редакторът на сайта е наличен за „Блокиране на теми“ в WordPress, ако приемем, че използвате WordPress версия 5.9 или по-нова.
За да отидете до редактора на сайта, отидете на Външен вид> Редактор (червена стрелка в изображението по-горе) от основната навигация в зоната за администриране на WP.
Щракнете върху областта на основното съдържание от дясната страна на екрана (очертана в светлосиньо и обозначена със синята стрелка в горното изображение). Това ще ви отведе до редактора на блокове в редактора на сайта.
От дясната страна, под раздела „Страница“, ще видите ред с етикет „Шаблон“ (очертан в синьо на изображението по-горе). Кликнете върху името/връзката на шаблона (червена стрелка). След това щракнете върху „Редактиране на шаблон“ (зелена стрелка – понякога „Редактиране на шаблон“ е малка синя текстова връзка под падащото меню, което показва името на вашия шаблон).
2. Редактирайте своя шаблон
Сега ще бъдете в редактора на шаблони за началната страница на вашия уебсайт. (Ако нямате зададена начална страница за вашия сайт, можете да проверите този урок за настройка на статична начална страница за вашия уебсайт WordPress).
В горната част на шаблона е вашата основна навигация за вашата страница – наричана още „Header“ на вашата уеб страница. Когато задържите курсора на мишката върху този елемент, ще видите лилаво поле, което го очертава (червена стрелка в изображението по-горе). Това показва, че този елемент е a „синхронизиран модел“, което означава, че промяната на един екземпляр на шаблона ще приложи промени във всички екземпляри в целия сайт. Щракнете върху тази област, за да изберете шаблона за синхронизиране на заглавката.
Ако това е основният елемент на заглавката на вашия сайт, сега трябва да видите, че синхронизираният шаблон е означен като „Заглавка“ в лентата с инструменти за блокиране.
3. Добавете своя хедър към група
В лентата с инструменти за блокове за избрания шаблон на заглавка щракнете върху иконата „Опции“ (червена стрелка в горното изображение) и изберете „Групиране“ (зелена стрелка). Това ще вложи синхронизирания модел в групов блок.
Ще забележите, че лентата с инструменти за блокиране вече има иконата за групово блокиране (синя стрелка в изображението по-горе), а контурът около основната зона за навигация вече е син вместо лилав (червена стрелка).
Обърнете внимание, че това може да промени ширината на главното ви навигационно меню. За да регулирате ширината, задръжте курсора на мишката върху шаблона за синхронизиране на заглавката и щракнете, за да го изберете (червена стрелка).
В лентата с инструменти за блокиране за шаблона за синхронизиране на заглавката щракнете върху иконата „Подравняване“ (зелена стрелка) и променете това обратно на желаната ширина (синя стрелка – в моя случай избрах „Широка ширина“).
За да се върнете обратно към груповия блок, щракнете върху иконата „Избор на група“ в лентата с инструменти на хедър блока (розова стрелка).
4. Задайте групата на „Sticky“
С избраната група отидете до раздела „Блокиране“ под страничната лента с настройки от дясната страна на екрана (червена стрелка в горното изображение).
Щракнете върху елемента от менюто с надпис „Позиция“ (зелена стрелка). Тук вече ще видите падащо меню с надпис „По подразбиране“ (розова стрелка). Щракнете върху падащото меню и изберете опцията „Залепващо“ (синя стрелка).
Придвижете се до горната част на редактора и щракнете върху бутона „Запазване“ (червена стрелка), след което щракнете отново върху „Запазване“. Вече ще имате главна навигация на стик меню за вашия уебсайт WordPress!
5. Стилизирайте лепкавото меню
Можете да персонализирате/стилизирате много елементи от новото лепкаво меню, но за този урок просто ще добавя фон зад груповия блок, за да гарантирам, че менюто обхваща цялата ширина на уеб страницата.
За да направя това, с избран групов блок, ще отида до раздела „Стилове“ на страничната лента с настройки (червена стрелка в изображението по-горе).
Под „Цвят“ ще щракна върху опцията „Фон“ (синя стрелка), след което ще избера бялата мостра, за да задам цвета на фона на бяло (зелена стрелка).
Още веднъж ще щракна върху „Запазване“ два пъти, за да запазя промените.
Имайте предвид, че винаги можете да коригирате ширината, височината или разстоянието на заглавката на уебсайта си в секцията „Размери“, като използвате плъзгачите „Подложка“ и „Поле“.
Можете да прегледате сайта си, като щракнете върху иконата на устройството (червена стрелка), след което щракнете върху „Преглед на сайта“ (зелена стрелка).
Можете да превъртате уебсайта си и да гледате как лепкавото меню за навигация остава на мястото си в горната част (зелена стрелка)!
След като приключите с редактирането на вашето лепкаво меню, щракнете върху бутона „Назад“ в горната част на редактора (червена стрелка). Това ще ви върне към вашата уеб страница в страничния редактор.
За да се върнете в зоната за администратор на WP, просто щракнете върху логото в горния ляв ъгъл.
Това е всичко за този урок! Ако ви е харесало, можете научете WordPress с моя задълбочен курс по Udemy. Или можете да разгледате други безплатни WordPress видео уроци намлява Помощни статии за WordPress на моя уебсайт.
