Начало > Помощен център > Апликации > WordPress > Създаване на WordPress бизнес сайт – блог, sidebar & footer

Създаване на WordPress бизнес сайт – блог, sidebar & footer

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

Създаване на WordPress бизнес сайт – блог, sidebar & footer

Настроихме началната страница на нашия сайт да зарежда статична Home Page страница, в която с помощта на SiteOrigin създадохме структура от секции.

По същия начин може да се посочи друга страница, в която WordPress автоматично започва да публикува публикациите (Posts) в обратен хронологичен ред ако не е зададена друга настройка за сортиране.

В нашия сайт искаме да ползваме SiteOrigin widget (Posts Grid), който ще форматира по определен начин публикациите и ще добави функционалност на страницата.

Затова в WordPress Customizer > Homepage Settings (същата опция може да се достъпи и през администрацията в Settings > Reading) оставяме полето в менюто Posts page празно:

Настройки в WordPress Customizer

За да активираме страничната лента на блог страницата, в панела Page settings на WordPress избираме опцията Default от менюто Page Layout:

Настройка Page Layout в WordPress

Създаване на Blog секция

Създаваме нов ред Blog в SiteOrigin (Add Row) и го преместваме 40 пиксела надолу от хедър секцията с настройките в полето Padding (padding-top) в панела Layout:

Настройка на секция в панел Layout

В празния ред добавяме widget Posts Grid с бутона Add Widget:

Достъп до Posts Grid в SiteOrigin

Структура на страница Blog

Отваряме Posts Grid като кликаме линка Edit и въвеждаме заглавие на страницата в полето Title. Може да въведем заглавие и в другото поле Heading for the grid, препоръчаме да тествате и да изберете стила, който ви харесва повече.

Въвеждане на заглавие в Posts Grid

В панела Post query в червеното кръгче се записва броят на всички наши публикации (9). От менюто Post type избираме типа публикации, които искаме widget-a да показва - Posts:

Избиране на Post type за публикуване

Като кликнем в полето Post in се зарежда прозорец, от който може да изберем по ID номер на публикация, която да се зарежда на Blog страницата. За примера избираме всички девет публикации, чиито ID номера се записват в полето автоматично при кликане:

Избиране на публикация по ID в полето Post in

Като кликнем в следващото поле Taxonomies се зарежда подобен прозорец, в който може да изберем публикации по категория или таг. За примера избираме всички публикации от категория Learn:

Избиране на публикация по Taxonomies

Ако направим избор и в двете полета, като посочения на изображението:

Избор на публикации в двете полета

в страницата Blog ще се заредят само публикациите, които присъстват и в двете полета, т.е. само публикациите от категория Learn, въпреки че в полето Post in избрахме публикациите от всички четири категории.

Запазваме избора и зареждаме страницата Blog - зареждат се само двете публикации от категория Learn:

Зареждане на публикации от категория Learn

На следващото изображение показваме допълнителни опции за сортиране на публикациите:

  • Date selection type - публикуване в интервал (специфичен за определен период или относителен спрямо текущата дата) от време;
  • Order by - сортиране по различни признаци от менюто;
  • Order direction - сортиране по възходящ или низходящ ред;

В полето Post per page може да ограничим броя на публикациите на страницата - в примера ще се заредят само пет публикации, въпреки че имаме създадени девет (всички филтрирания от предишните примери са премахнати):

Настройване на филтър Post per page

На страница Blog се зареждат само пет публикации в съответствие с настройката Post per page:

Зареждане на публикации Post per page

В менюто Choose the taxonomy... посочваме дали публикациите да бъдат сортирани по категории или тагове:

Настройване на филтър Choose the taxonomy to display

В панела Settings може да включим филтриране от полето Filterable?, което анимирано сортира публикациите при кликане на категория от филтъра.

От менюто Choose a layout... може да избираме стил на подреждане в ред (Fit Rows) или с различна височина на блоковете (Masonry).

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

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

В панела Post Meta определяме каква мета информация да се зарежда за публикациите - името на автора, дата на публикуване и категория или таг (в зависимост от избора по-горе).

В полето Columns per row избираме колко колони да се зареждат на един ред за десктоп, таблет и смартфон резолюция. Настройката Gutter определя разстоянието между отделните блокове с публикации:

Настройки в панела Post Meta

Запазваме настройките на widget-a и зареждаме страницата Blog. Тестваме дали филтъра коректно сортира публикациите по категории:

Зареждане на публикации в категория Explore

Зареждане на публикации в категория Style

Конфигуриране на страничната лента (Sidebar)

В настройките Page Layout на Blog страницата активирахме показването на страничната лента Sidebar и сега трябва да поставим widget-и в нея от панела Appearance > Widgets:

Контейнер на страничната лента Sidebar

В нашата лента ще поставим четири widget-a - Search, SiteOrigin Image, SiteOrigin Video Player и Testimonials. Всички налични widget-и са разположени в лявото поле. Може да кликнем и плъзнем widget до панела Main Sidebar, но тъй като списъка е дълъг, по-удобно е да кликнем стрелката на widget-a:

SiteOrigin Image в лентата с widgets

в менюто да маркираме Main Sidebar и да кликнем бутона Add Widget:

Бутон Add Widget в меню на widget

Автоматично избраният widget се появява в панела Main Sidebar:

Всички widget-s в контейнера Main Sidebar

Конфигуриране на SiteOrigin Image

Настройване на SiteOrigin Image за Sidebar по нищо не се различава от конфигурирането на същия widget за страница от сайта. Кликаме стрелката за да отворим панела за конфигуриране, избираме изображение от Media Library (Image file) и посочваме най-близкия размер от менюто Image size:

Настройки на изображение в SiteOrigin Image

Въвеждаме заглавие на секцията в полето Title text, избираме позиция на заглавието от менюто Title positioin, въвеждаме Alt text, избираме дали изображението да бъде линк и къде да сочи (Destination URL) и маркираме опцията Bound за не стои изображението в рамките на контейнера:

Настройки на текст в SiteOrigin Image

За да запазим настройките кликаме бутона Save в долния десен ъгъл и затваряме панела като кликнем линка Done в долния ляв ъгъл.

Конфигуриране на SiteOrigin Video Player

Отваряме панела на SiteOrigin Video Player като кликнем стрелката и въвеждаме заглавие на секцията:

Изглед на SiteOrigin Video Player

Избираме опцията за зареждане на локален файл (Self hosted), кликаме лентата Video File и в панела Sources кликаме лентата Item:

Настройване на локален видео файл

Избираме видео файл (Select video) от Media Library и избираме резервно изображение (Select cover image), което да се зарежда ако има проблем със зареждането на видео файла.

Ако желаем да зареждаме файл от външен видео доставчик (YouTube, Vimeo...) избираме опцията Externaly hosted и въвеждаме URL адреса на видео файла в полето Video URL:

Настройване на външен видео файл

В панела Video Playback може да настроим опция за автоматично стартиране на файла:

Опция за автоматично стартиране Video Playback

Запазваме настройките с Save и затваряме панела с Done.

Конфигуриране на Testimonials

Използваме същия widget от страницата Clients. Отваряме панела и въвеждаме заглавие на секцията в полето Title:

Изглед на widget Testimonials

В панела Testimonials кликаме лентата Add ако няма създаден профил или кликаме лентата с името за да редактираме съществуващ профил.

В полето Name въвеждаме име на автора на информацията, в полето Author Details въвеждаме допълнителни детайли за лицето - месторабота, длъжност..., избираме изображение (Image) от Media Library и в редактора въвеждаме текста:

Настройване на профил в Testimonials

В панела Settings указваме на widgeta да покаже само един профил на ред. Внимавайте да има само един профил в widget-a, aко създадете нов профил той ще се зареди под първия в Sidebar, което не е желателно:

Responsive настройки в Testimonials

Както досега, запазваме настройките с Save и затваряме панела с Done.

Зареждаме страницата Blog за да видим как изглежда страничната лента:

Общ изглед на страничната лента Sidebar

Конфигуриране на Footer

Footer секцията се управлява също с widget-и, които добавяме в контейнера Footer Widgets (Appearance > Widgets):

Панел Footer Widgets

От полето с widget-и в лявата част на екрана намираме Layout Builder, кликаме стрелката, избираме Footer Widgets и кликаме бутона Add Widget:

Инсталиране на Layout Builder widget

Отваряме Footer Widgets, кликаме Layout Builder и кликаме бутона Open Builder:

Достъп до Layout Builder

В началният интерфейс на SiteOrigin кликаме бутона Add Row:

Начален интерфейс на SiteOrigin

Конфигурираме реда както е показано на изображението:

Конфигуриране на ред в SiteOrigin

Това е завършената структура на нашата footer секция:

Структура на footer секция

Widget Text

Добавяме widget Text в първата колона вляво, кликаме линка Edit, въвеждаме заглавие на колоната в полето Title и въвеждаме текста в редактора:

Настройване на widget Text

Widget Navigation Menu

В средните две колони използваме един и същ widget Navigation Menu, който само зарежда предварително създадени персонализирани менюта, различни от главното хоризонтално меню на сайта:

Зареждане на персонализирано меню

Отиваме в Appearance > Menus за да създадем необходимите две менюта. Кликаме линка create a new menu:

Линк 'create a new menu'

Въвеждаме име на менюто в полето Menu Name (ftr-services), избираме страници от съседния панел и ги добавяме в менюто с бутона Add to Menu. Важно е да не маркираме двете полета в секция Menu Settings. Запазваме менюто като кликаме бутона Save Menu:

Създаване на меню 'ftr-services' в WordPress

По същия начин създаваме още едно меню - Footer Menu:

Създаване на Footer Menu

Избираме Footer Menu в следващия widget:

Добавяне на 'Footer Menu' в widget Navigation Menu

За създаване на съдържанието в последната колона използваме SiteOrigin Editor и SiteOrigin Social Media Buttons.

В редактора въвеждаме и форматираме текста:

Въвеждане и форматиране на текст в редактор

Създаваме иконите-линкове към социални мрежи в SiteOrigin Social Media Buttons както го направихме при изграждане на страницата Contact:

Създаване на икони-линкове към социални мрежи

Избираме социалната мрежа от менюто, автоматично се добавя URL адреса в полето URL и избираме цвят на иконата и на фона:

Избиране на социална мрежа

В панела Design and Layout посочваме параметрите на бутона - тип (Button theme), размер (Icon size), закръглянето (Rounding), разстояние до границата на бутона (Padding), позициониране (Align & Mobile Align) и разстояние до съседните елементи (Margin):

Настройване дизайна на иконата

Затваряме панела Layout Builder като кликаме бутона Done, запазваме настройките със Save и отново кликаме линка Done за да затворим Layout Builder в Footer Widgets.

Общ изглед на секция 'footer'

Дизайн елементи като разделителя под заглавията, булетите пред линковете, жълтия цвят на наградите се дължи на персонализиран код, който създадохме и въведохме в два интерфейса - в WordPress Customizer > Additional CSS и в SiteOrigin CSS.

Additional CSS

/* removes link underline */
#pgc-16-3-0 h2 a,
#pgc-16-3-1 h2 a,
#pgc-16-3-2 h2 a {text-decoration: none}

/* footer title divider */
#colophon .widgets .widget-title {border-bottom: 1px solid #444444; width:20%; padding-bottom: 9px;}

/* footer bullets */
ul#menu-ftr-services, ul#menu-footer-menu {list-style-type: square; color: #fcd33d}

/* blog pagination links */
.nav-next,.nav-previous a {font-size:18px}
/* blog pagination arrows */
.north-icon-previous::before,
.north-icon-next::before
{font-size:24px}

/* padding sidebar */
.site-content .widget-area {padding-top: 40px;}

/* padding main navigation */
.main-navigation ul>li a,
.main-navigation ul>li a:hover,
.main-navigation ul>li a:focus {
    padding-left: 14px;
    padding-right: 14px;
    font-weight: 500;}

/* email form button */
.so-widget-sow-contact-form-default-cf6b8d992821 .sow-contact-form .sow-submit-styled .sow-submit:disabled {
    color: #fcd33d;
background:#333333;
    border: none;}

/* blog filter nav */
.lsow-portfolio-wrap .lsow-taxonomy-filter .lsow-filter-item.lsow-active::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    border-bottom: 3px solid #fcd33d;
    width: 100%;
}

SiteOrigin Custom CSS

/* email form required text */
#contact-form-d25d.sow-contact-form p em {
  color: #fcd33d;
  font-size: 22px;}

/* footer bullets */
.so-widget-sow-features-default-738d24a060a1 .sow-features-list .sow-features-feature h5 {
  color: #999999;
  font-size: 20px;}

/* desctription text */
.siteorigin-widget-tinymce.textwidget h5 {
  color: #999999;
  font-size: 16px;
  text-transform: uppercase;}

/* footer awards text */
.textwidget p em strong {
  color: #fcd33d;}

/* blog grid heading */
.lsow-portfolio-wrap .lsow-heading {
  color: #999999; font-size: 24px;}

/* blog title */
.panel-grid-cell .widget-title {
  color: #999999;
  font-size: 24px;
  margin-bottom: 30px;}

/* sidebar testimonial name */
.lsow-testimonials .lsow-testimonial-user .lsow-text .lsow-author-name {
  font-size: 12px;
}