1. Начало
  2. WordPress
  3. Изграждане на WordPress сайт и създаване на съдържание
  4. Създаване на WordPress сайт (тема Flash, билдър SiteOrigin)

Създаване на WordPress сайт (тема Flash, билдър SiteOrigin)

В статията ще създадем персонализиран WordPress блог, като следваме следните стъпки:

  • Инсталиране на подходяща WordPress тема;
  • Персонализиране структурата на примерния сайт;
  • Персонализиране дизайна на примерния сайт.

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

Също така в статията няма да разглеждаме теми като:

  • Какво е блог?
  • Каква е разликата между блог, бизнес сайт и електронен магазин?
  • Какво е SEO оптимизация?
  • Как се създава оптимизирано съдържание?
  • Актуализиране, архивиране, сигурност, кеширане… на WordPress сайт.

Примерният WordPress сайт е инсталиран и работи на WordPress хостинг. При тази хостинг услуга WordPress системата е инсталирана автоматично и от нас се изисква единствено да започнем работа по новия ни сайт.

Избор на WordPress тема

Общото между огромната част от безплатните теми за WordPress е, че те служат като реклама за платени Pro версии, които се продават на сайтовете на разработчиците. В много голяма част от случаите, за предварителен преглед (demo preview) се предоставя Pro версията и когато инсталирате безплатната версия, откривате огромна разлика – повечето теми не предлагат примерно съдържание, някои имат оскъдна (или никаква) документация, опциите за персонализиране в Customizer се броят на пръсти.

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

В примера ще използваме безплатната WordPress тема Flash, която избрахме по следните причини:

  • Включва в безплатната версия готови шаблонни сайтове (6), които лесно се персонализират чрез замяна на примерното съдържание;
  • Автоматично инсталира необходимите плъгини за персонализиране на шаблонните сайтове;
  • Предоставя огромен, в сравнение с други разработчици, набор от опции за персонализиране в WordPress Customizer, които ще използваме;
  • Предоставя и безплатната програма за създаване на сайтове SiteOrigin, чрез която може да променяме структурата на шаблонния сайт.

Инсталиране на WordPress тема Flash

Инсталираме и активираме темата Flash по стандартния за WordPress начин – Appearance » Themes » Add New.

Инсталиране и активиране на WordPress тема Flash
Инсталиране и активиране на WordPress тема Flash.

Кликаме бутона Get started with Flash, за да инсталираме и активираме плъгина за импортиране на примерно съдържание.

Плъгин за импортиране на примерно съдържание.
Плъгин за импортиране на примерно съдържание.

През линка в главното меню Appearance » Demo Importer имаме достъп до всички шаблонни сайтове. При посочване на сайт се визуализират двата бутона Import и Preview. Логично е да прегледаме сайта преди да го импортираме, затова кликаме линка Preview.

В нов прозорец на браузъра се зарежда demo версия на сайта. За да скрием менюто и да разгледаме сайта на цял екран, кликаме бутона Collapse в долния десен ъгъл на екрана. Flash Default е шаблонния сайт, който ще персонализираме, затова кликаме бутона Import Demo.

Импорт на примерно съдържание за сайта.
Импорт на примерно съдържание за сайта.

Зарежда се прозорец с информация за предстоящото импортиране, в който натискаме бутона Confirm.

При импорта ще се инсталират и нужните плъгини, с които е направено примерното съдържание.

при импорта се инсталират нужните плъгини

Припомняме, че нашата цел е да създадем безплатен WordPress блог от шаблонна тема само с безплатни графични инструменти, без да пишем дори един ред PHP, HTML, CSS или JS код.

Примерният Flash сайт може да видите на адрес https://themegrilldemos.com/flash/.

Приготвяне на изображения

За промяната на изображенията са необходими познания за работа с графичен редактор главно с функциите Image resize и Crop. Ние ползваме GIMP, който има версии за Linux, OS X и Windows (https://www.gimp.org/downloads/), но има десетки безплатни редактори, които също поддържат тези функции.

В SuperSite блога използваме общо 30 изображения:

  • Лого 175 Х 40 px;
  • Favicon 512 X 512 px;
  • Carousel (5 изображения) 1920 Х 700 px;
  • Статии (6 изображения) – не трябва да са по-малки от 1280 Х 680 px, WordPress – изрязва автоматично изображенията до зададени в functions.php размери.
  • CTA (call to action) банер – 1920 X 320 px;
  • Банер в Sidebar – 320 X 320 px;
  • Страница About – 1920 px;
  • Портфолио (6 изображения) 800 Х 800 px;
  • Бизнес лого (4 изображения) 180 Х 180 px;
  • Икони на социални медии (4 изображения) 60 Х 60 px.

След изтегляне и редактиране на изображенията ги качваме в Media » Library в администрацията на WordPress.

Най-популярните сайтове за безплатни изображения са pixabay.com и unsplash.com – за изображения (медия), изтеглени от тези сайтове, не трябва да поставяме линкове към източника, нито към акаунта на автора.

Много полезни изображения, графика, икони има на сайтовете freepik.com и flaticon.com – може да закупите продукти от тези сайтове. Може също да ползваме ресурсите безплатно, но за всеки продукт трябва да поставим линк към акаунта на автора.

Първи стъпки

Може да започнем изграждането на нашия нов блог, защото вече имаме всичко необходимо – намерихме подходяща безплатна тема, инсталирахме я успешно заедно с плъгините, импортирахме примерния сайт и приготвихме новите изображения.

Последно уточнение – това е нашето виждане за блог и не желаем по никакъв начин да влизаме в спорове какви елементи трябва или не трябва да има в един блог.

В процесът на работа вие може да промените структурата или съдържанието напълно според вашето желание и разбиране. Нашата цел е да ви покажем как да създадете безплатен и качествен собствен сайт, за да започнете вашето собствено интернет пътешествие.

Персонализиране на примерен сайт в WordPress

За да заредим примерния сайт заедно с панела Customizer, в главното меню кликаме Appearance » Customize.

отваряне на Customize за промяна на дизайна

Може също да кликнем линка Flash » Visit Site в горния десен ъгъл на екрана и в хоризонталната лента над сайта да кликнем линка Customize.

отваряне на Customize за промяна на дизайна

Секция Site Identity

В тази секция променяме логото на сайта, иконата и заглавието в таба на браузъра.

В секция Logo кликаме бутона Remove, за да премахнем примерното лого и през бутона Change logo избираме от Media Library нашето ново лого.

В секция Site Title въвеждаме името на нашия сайт SuperSite, полето Tagline оставяме празно.

секция Site Title

В секция Site Icon кликаме бутона Remove за да премахнем съществуващата икона, след това кликаме бутона Change image за да изберем от Media Library новата икона.

Промените са видими в реално време, за да ги виждаме на цял екран може да скриваме и показваме менюто от бутона Hide Controls в долния ляв ъгъл на екрана. Когато искаме да запазим промените кликаме бутона Publish в горния десен ъгъл на екрана.

Секция Colors

Променяме основния цвят по подразбиране за да съответства на темата на нашия нов сайт. От падащото меню Base Color Scheme може да тествате няколко предефинирани цвята. Ние избрахме темата с акцент на червения цвят, който подхожда на нашия SuperSite блог.

промяна на цветовете на темата

Запазваме промяната като кликаме бутона Publish.

Секция Header Media

В тази секция не правим никакви промени, тъй като нашите хедър елементи се зареждат от плъгини в SiteOrigin, който ще редактираме по-късно в статията.

Секция Background Image

Нашата тема не ползва (background) изображение за фон, затова не правим никакви промени в тази секция.

Секция Menus

Нашият блог ползва едно главно навигационно меню Primary. Меню Social е програмирано да зарежда икони на социални медии в хоризонталната лента.

секция Menus

Основното меню сме го изчистили от някои демо елементи и сме оставили само Home, Blog, Page и Contact.

елементи в менюто

Секция Flash Theme Options

General Settings

Наличните настройки в панела Site Layout.

Маркираме опцията Wide Layout, за да заема нашият блог целият екран на монитора. Ако изберем Boxed Layout, сайтът ще се зарежда в кутия (box) с точно определена ширина.

секция Layout

Маркиране на опцията Disable Preloader? ще премахне анимацията, докато се зарежда сайта.

Маркиране на опцията Disable Back to Top Button? ще премахне бутона за връщане в началото на страницата.

Top Header Settings

Настройките в този панел управляват най-горната лента на сайта, в която отляво се зарежда контактна информация, а в дясната част – икони към социални медии.

настройка на хедъра

В нашия демо сайт изключваме цялата лента през радио бутона Enable Top Header.

Header Settings

През панела Header Settings управляваме следните настройки:

настройка на хедъра
  • Logo and Menu Position – предлага избор между три вида структура на хедър секцията.
  • Remove Header Search Box – премахва иконата за достъп до поле за търсене от навигационната лента.
  • Remove Header Cart Icon – премахва иконата на пазарната количка от навигационната лента.
  • Sticky Header – залепва менюто за горния край на екрана и при скролиране посетителя винаги има достъп до главната навигация в блога.

Page Header Settings

Както вече споменахме, хедър секцията се управлява от SiteOrigin, затова не променяме нищо в този панел.

Archive Page Settings

В този панел има важни настройки за структурата на сайта и мета информацията в линковете.

Blog Style – избираме структура на блог страниците с дясна навигационна лента (sidebar).

Archive Page Layout – избираме структура на архивните страници.

настройка на структурата за архивните страници
  • Remove date from post meta – премахва датата от линковете.
  • Remove author from post meta – премахва името на автора на публикацията от линковете.
  • Remove comment count from post meta – премахва информация за коментарите към статията.
  • Remove category from post meta – премахва категорията на статията от линковете.
  • Remove tag from post meta – премахва маркерите на статията от линковете.

Post Settings

секция Post Settings
  • Single Post Layout – избираме структура на единична блог статия.
  • Enable Related Posts – активираме показване на свързани статии.
  • Display Related Posts By: – избираме дали свързаните статии да съответстват на – категориите или на маркерите на основната статия.
  • Remove Author Bio from post – премахва информация за автора от публикацията.
  • Remove next/previous link from post – премахва линковете към предишна и – следващата статия:

Page Settings

В секция Page Layout избираме структура за показване на единична страница – запазваме дясната навигационна лента (sidebar).

секция Page Settings

Footer Settings

В секция Footer Widget Area посочваме колко зони за widgets да има в нашата footer секция на сайта.

настройки на футъра

Google Font Settings

В секция Body Typography избираме главният шрифт на сайта (Font Family) от Google Fonts. От падащия списък Variant избираме вида на шрифта – regular.

настройки на шрифтовете

Секция Widgets

Темата предоставя възможност за инсталиране на четири widgets във footer секцията.

В зоната footer поставяме в четирите зони (Footer1, 2, 3 и 4) четири различни раздела – Social, Meta, Important Links и Recent Posts.

секция Widgets

Секция Homepage Settings

Избираме началната страница на нашия блог да бъде статичната страница Home, а за контейнер на публикациите посочваме страницата Blog.

Секция Homepage Settings

С това нашата работа по сайта през WordPress Customizer приключи. Запазваме промените като кликаме бутона Publish, след това кликаме иконата със символ знак X, за да затворим панела.

Персонализиране структурата на сайта през SiteOrigin

За да променим структурата на нашия блог, влизаме в Pages » страница Home (ще забележите, че има добавен надпис Home — Front Page, SiteOrigin Page Builder). С който и редактор да изберете да се редактира (блок-редактор или класическия), ще се зареди SiteOrigin редакторът.

Примерният сайт съдържа в Home — Front Page, SiteOrigin Page Builder 10 секции, докато персонализираната начална страница съдържа само 6, които може да видите на следващото изображение:

Персонализиране структурата на сайта през SiteOrigin

Внимателно изтриваме следните четири секции:

  • FT: Animated Number Counter;
  • FT: Testimonial;
  • FT: Layout Builder;

Важно: Не бързайте да кликате бутона Update за да запазите промените на страницата. Ако допуснете грешка, кликнете който и да е линк от менюто (напр. Dashboard) за да излезете от страницата Home. След това се върнете в Pages » Home — Front Page, SiteOrigin Page Builder и извършете изтриването отново.

Изтриваме панел като посочим иконата със символ гаечен ключ, в менюто избираме Delete Row и втори път кликаме за потвърждение същия ред, но вече с друг надпис: Are you sure?:

изтриване на ред
потвърждение за изтриване на ред

След това трябва да променим подреждането на секциите. За да променим местоположението на секция кликаме и задържаме с левия бутон на мишката иконата със символ две хоризонтални точки и преместваме секцията нагоре или надолу.

Преместваме FT: Blog над FT: Portfolio.

промяна в подредбата на редовете

Сега започваме персонализиране на информацията в отделните секции на нашия нов блог.

Настройване на секция Slider

Влизаме в Pages » Home — Front Page, SiteOrigin Page Builder и в първата секция FT: Slider кликаме в празното поле или кликаме линка Edit, който се появява след посочване на полето с мишката.

секция Slider

Зареждат се интерфейсите за конфигуриране на всеки отделен елемент от FT: Slider – максималният брой е 5.

настройки в секция Slider

Кликаме в полето на първия елемент и разгъваме интерфейса с полетата за настройки.

настройки в секция Slider

В полето Title въвеждаме име, което ще се вижда като заглавие в изображението – това е първото послание към посетителите на сайта и трябва да бъде добре обмислено.

Ако добавите текст в полето Description, съдържанието ще се зареди под заглавието Title с по-дребен шрифт – ние оставяме полето празно.

Кликаме бутона Select an Image и избираме едно от предварително приготвените изображения с размер 1920 Х 700 px.

Кликаме отново в заглавното поле на панела, за да го затворим.

По същия начин редактираме всички елементи на нашия Slider – не е задължително да бъдат попълнени всичките 5 елемента.

След като завършим редактирането на секцията, кликаме бутона Done в долния десен ъгъл или иконата със символ Х в горния десен ъгъл за да затворим секцията. Кликаме бутона Update, за да запазим направените промени.

Настройване на секция Service

Секция Service съдържа три елемента, които редактираме отделно по същия начин, както редактирахме предишната секция Slider.

Кликаме в полето или посочваме полето с мишката и кликаме линка Edit, за да отворим елемента за редактиране.

секция Service

В полето Title въвеждаме заглавието на елемента.

От падащия списък Icon Type може да избираме типа на иконата – от библиотеката FontAwesome (Icon Picker) или изображение от Media Library (Image Uploader).

Ако изберете Image Uploader ще се заредят две полета за въвеждане на име и бутон за избиране на изображение.

За нашия сайт избираме Icon Picker и от падащото меню FontAwesome Icon избираме конкретната икона.

В полето Text въвеждаме текста, който се зарежда под заглавието.

В полето Read More Text въвеждаме името на линка и URL адреса, към който този линк пренасочва при кликане:

настройки в секция Service

Кликаме бутона Done за да затворим панела и по същия начин редактираме иконата, заглавието, съдържанието и линка на другите два елемента от секцията. Накрая затваряме панела Service и запазваме промените.

Настройване на секция Blog

Секция Blog съдържа два панела – Heading и Blog, които се редактират отделно.

Отваряме Heading по познатия начин.

секция Blog

В полето Heading въвеждаме заглавието на секцията от сайта.

настройки в секция Blog

В полето Sub Heading въвеждаме описание, което се зарежда под заглавието с по-дребен шрифт. Не е задължително полето да се попълва ако не желаем да добавяме описание.

Затваряме панела Heading и отваряме панел Blog.

В полето Number of Posts посочваме колко публикации да се зареждат в елемента – ние избираме 6.

В падащото меню Blog Posts Source имаме избор между опциите последни публикации (Latest Posts) и определена категория (Specific Category). Ние избираме опцията Latest Posts.

настройки в секция Blog

Ако кликнем в раздела Styling имаме възможност за избор в структурата на зареждане на публикациите – първата опция подрежда публикациите шахматно, другата опция предлага класическо подреждане.

настройки в секция Blog

Затваряме панела Blog и запазваме промените.

Настройване на секция CTA банер

Отваряме панела CTA за редактиране:

секция CTA банер

Въвеждаме заглавие в полето Call to action Title. В полето Call to Action Subtitle по желание може да въведем подзаглавие.

Интерфейсът дава възможност за показване на два бутона, ако искаме само един бутон, оставяме полетата на втория бутон Button 2 празни. В полето Call to Action Button 1 Text въвеждаме текста на бутона, а в полето Call to Action Button 1 Link въвеждаме URL адреса, към който линка пренасочва.

Интерфейс за въвеждане на текст в CTA

За да изберем фон (цвят или изображение) на банера кликаме в полето Design в дясната лента Widget Styles на SiteOrigin. В зависимост от Вашия избор кликате Background Color (за избиране на цвят) или Background Image (за избиране на изображение от Media Library).

настройки в секция CTA банер

В раздела Styling имаме възможност да избираме структурата на банера.

Избиране структура на CTA банера

Затваряме панела CTA и запазваме промените.

Настройване на секция Portfolio

Секция Portfolio съдържа две отделни секции – Heading и Portfolio. Вече показахме как се редактира съдържанието в Heading. Продължаваме с редактиране на информацията в панела Portfolio:

секция Portfolio

В полето Select Project Category избираме категорията на елементите – portfolio. Не се учудвайте, че категорията е различна от онези, които вие създадохте. Portfolio е custom post type съдържание в WordPress, което се създава при инсталиране на темата Flash и чието съдържание се управлява от директория Portfolio в главното меню.

За да завършим настройките на Portfolio, в SiteOrigin въвеждаме броят на продуктите в полето Number (6)

настройки в секция Portfolio

В раздела Styling избираме ефектите при посочване (hover) на изображение в Widget Style и броят на колоните в Columns.

Избиране на ефекти и структура на Portfolio

За да редактираме съдържанието на Portfolio елементите, влизаме в директория Portfolio от главното меню и въвеждаме заглавие и project image за всеки продукт в категорията.

редактираме съдържанието на Portfolio елементите
редактираме съдържанието на Portfolio елементите

Затваряме панела Portfolio и запазваме промените.

Отваряме панела Heading и редактираме съдържанието.

секция Logo

В панела Logo са подредени интерфейсите за настройване на всеки отделен елемент в секцията (максималният брой елементи е 5). Може да разместваме местата на интерфейсите чрез влачене и пускане с мишката (drag’n’drop):

настройки в секция Logo

Въвеждаме заглавие на елемента, което не се зарежда в браузъра. От полето Select an Image избираме изображение от Media Library.

Конфигуриране на елемент в секция Logo

Затваряме панела Logo и запазваме промените.

Настройване на секция Sidebar

Съдържанието на тази секция се управлява с widgets, затова отваряме Appearance » Widgets от главното меню. В настройките на Customizer избрахме структура на сайта с дясна навигационна лента, затова внимаваме за настройките в Right Sidebar.

Widgets в дясната навигационна лента Right Sidebar

През widget Image показваме рекламна графика, която може да пренасочва към страница на афилиейт продукт или страница за абониране за бюлетин.

Рекламен банер в Sidebar

Настройване на формуляр за контакт Everest Forms

Темата включва автоматично инсталиране на плъгина Everest Forms за създаване на формуляр за контакт. Влизаме в панела на плъгина през линка Everest Forms в главното меню.

формуляр за контакт Everest Forms

Създаваме контактната форма с произволен брой полета и я запазваме с кликане на бутона Save. Може да се използват предварително създадените темплейти за форми.

настройки на формуляр за контакт Everest Forms

Може да създадем произволен брой различни формуляри и да активираме само един или няколко от панела All Forms.

активиране и деактивиране на формуляр

За да добавим формуляра към контактната страница, копирахме краткия код (short code) в текстово поле на редактора.

добавяне на краткия код на формуляра в страницата

Важно е да създадете собствена страница за GDPR политика дори и да не обработвате лични данни на посетителите на сайта.

Специален хостинг за WordPress сайтове
С WordPress хостинг услугата получавате инсталиран WordPress сайт, с основни настройки и възможност веднага да започнете да работите с него, да добавяте съдържание и да настройвате външния му вид.
В хостинг акаунта има специален инструмент за управление на WordPress сайтове – WordPress Manager by SuperHosting. С него можете да възстановявате сайта от архив, да променяте административните му данни, да премествате и копирате инсталации и други.

Обновена: 06.04.2022

Беше ли Ви полезна тази статия?

Вижте още