Начало > Помощен център > Апликации > WordPress > Изграждане на one-page WordPress сайт

Изграждане на one-page WordPress сайт

Помощен център

Изграждане на one-page WordPress сайт

Вероятно сте забелязали сайтове с особена функционалност, при които кликането на линк в менюто не отваря нова страница, а скролва текущата страница до следваща тематична секция.

One-page сайтовете притежават някои особености, които желаем да споделим накратко, за да прецените дали този тип сайт най-добре подхожда за изграждане на вашия проект или на част от него.

  • структурата на сайта държи посетителя ангажиран тъй като няма много информация за четене, а секциите са кратки и динамични;
  • може да бъде начална страница на комплексен сайт и да се комбинира с допълнителни страници и блог;
  • подхожда най-вече за сайт тип брошура, онлайн визитка или промоция (landing page) за единичен продукт или услуга;

В статията ще създадем one-page сайт като използваме секции от бизнес сайта https://austin.icn-demo.com, чието изграждане проследихме в поредица от статии.

За целта създаваме нова страница Onepage и поради настройките в Settings > Permalinks > Post name нашия one-page сайт ще се зарежда на адрес https://austin.icn-demo.com/onepage/.

Завършената структура на сайта виждате на следващото изображение:

Структура на one-page сайта

На следващото изображение показваме настройките Page settings на страницата Onepage в WordPress:

Настройки в панела Page settings

Ако сте създали бизнес сайта или част от него, следвайки информацията в нашата поредица от статии, вие сте запознати с начина на работа на програмата за създаване на сайтове SiteOrigin Page Builder.

Сега само ще копираме редове (секции) от бизнес сайта и ще ги поставим в структурата на one-page сайта по следния начин.

Отиваме в началната страница на бизнес сайта Home Page --- Front Page, SiteOrigin Page Builder, кликаме с десен бутон върху иконата със символ две вертикални стрелки и в менюто кликаме линка Copy Row:

Копиране на ред в SiteOrigin

Връщаме се в страницата Onepage, кликаме в панела SiteOrigin с десен бутон или създаваме нов празен ред, маркираме реда и кликаме в него с десен бутон, в менюто кликаме линка Paste Row:

Поставяме (paste) на ред в SiteOrigin

И редът Hero се появява в структурата на нашия one-page сайт.

По абсолютно същия начин копираме всички редове (Copy Row) от началната и допълнителните страници на бизнес сайта и ги поставяме (Paste Row) в структурата на one-page сайта.

Може да прочетете как създадохме бизнес сайта в поредицата от статии Създаване на бизнес сайт в WordPress, линкове към които ще намерите в края на тази статия.

Може би забелязвате, че някои секции в one-page сайта (portfolio, clients) се различават малко от съответните страници в бизнес сайта - направихме малки корекции за да направим one-page сайта по-компактен.

Сега трябва да се справим със следните два проблема:

-- при кликане на линк в менюто на one-page сайта искаме да се зарежда съответна секция, а не страница от бизнес сайта;\ - трябва да намерим начин да свържем секциите от сайта с линковете в менюто;

След като примерния сайт работи коректно явно сме намерили решение на проблемите и сега, разбира се, ще го споделим.

Ще ползваме допълнителен плъгин Conditional Menus, който зарежда персонализирано меню в зависимост от зададен параметър - т.е. ние може да посочим в настройките на плъгина да зарежда различно меню когато зареждаме страницата Onepage. В статията WordPress плъгини - Conditional Menus разглеждаме подробно настройките и възможностите на плъгина. Сега само трябва да го инсталираме/активираме в бизнес сайта и да създадем ново меню за one-page сайта.

За да свържем отделните секции от one-page сайта с линковете в менюто трябва на всяка секция, която искаме да достъпваме през линк, да създадем персонален идентификатор ID, който ще използваме при създаването на менюто. Звучи малко сложно, но ще се убедите, че изпълнението е изключително елементарно.

Отваряме секциите (редовете), които искаме да достъпваме през линк в менюто, и в панела Row Styles кликаме лентата Attributes. В полето Row ID въвеждаме име на идентификатора, което трябва да е уникално между класовете и идентификаторите в целия сайт - в примера поставяме префикс op (за да ни подсеща за one-page).

На Hero секцията поставяме идентификатор ophome:

Идентификатор на Hero секция

На секцията Services поставяме идентификатор opservice:

Идентификатор на Services секция

Продължаваме по същия начин като внимаваме да не прекалим с броя на линковете и менюто да започне да се зарежда на два реда, което ще повреди дизайна на хедъра.

След като всички секции имат коректно въведен идентификатор може да създадем менюто за one-page сайта. Влизаме в Appearance > Menus и кликаме линка create a new menu. Въвеждаме име onepage и започваме да създаваме линковете в панела Custom Links както е показано на изображението:

Създаване на Custom Links в меню

За URL въвеждаме наклонена черта '/', знак диез '#' и името на идентификатора като внимаваме да не допуснем грешка при писане. В полето Link Text въвеждаме името на линка, както желаем да се изписва в менюто - HOME. Кликаме бутона Add to Menu и линка се създава в десния панел Menu structure със същите параметри:

Линк HOME в панела Menu structure

По абсолютно същия начин създаваме линкове към всички секции с идентификатори:

Линк SERVICES в панела Menu structure

Накрая запазваме менюто като кликаме линка Save Menu и *не маркираме* опциите в секция Menu Settings:

Запазване на новото меню

Следващите няколко стъпки описват конфигурирането на плъгина Conditional Menus{: target="_blank"} (линк към статия с подробна информация за плъгина) да зарежда менюто onepage на страницата Onepage.

В раздела Manage Location, секция Primary Menu, избираме от падащия списък onepage и кликаме линка +Conditions:

Конфигуриране на плъгина Conditional Menus

В панела Condition кликаме раздела Pages и маркираме страницата Onepage:

Маркиране на страница Onepage в раздела Pages

Запазваме избора с Save, в панела Manage Location кликаме бутона Save Changes.

Зареждаме сайта и при кликане на линк от менюто страницата плавно скролва до съответната секция и в двете посоки:

Зареждане на Onepage сайта със собственото меню