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

Създаване на блог с WordPress

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

Създаване на блог с WordPress

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

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

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

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

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

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

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

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

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

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

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

Инсталираме и активираме темата Flash по стандартният за WordPress начин:

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

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

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

Инсталираме необходимите плъгини за работата на темата като кликнем линка Begin installing plugins:

Инсталиране плъгините на темата

Инсталираните плъгини в WordPress

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

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

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

Импортиране на шаблонния сайт

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

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

Примерният Flash сайт може да видите на адрес https://demo.themegrill.com/flash/, а персонализирания Golf Masters блог може да видите на https://golf.icn-demo.com/.

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

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

В Golf Masters блога използваме общо 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;

Автоматично форматиране на изображения в WordPress

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

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

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

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

Първи стъпки

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

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

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

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

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

Линк Appearance - Customize

Може също да кликнем линка Flash > Visit Site в горния десен ъгъл на екрана:

Линк Flash - Visit Site

и в хоризонталната лента над сайта да кликнем линка Customize:

Линк Customize в хоризонталната лента

Зареждане на сайта с панела Customizer

Секция Site Identity

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

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

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

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

Секция Site Identity

Зареждане на промените в браузър

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

Секция Colors

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

Секция Colors в Customizer

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

Секция Header Media

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

Секция Background Image

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

Секция Menus

Нашият блог ползва едно главно навигационно меню Primary, а три допълнителни менюта се зареждат във footer секцията като widgets. Петото меню (Social) е програмирано да зарежда икони на социални медии в хоризонталната лента, която малко по-рано деактивирахме.

Списък с менюта в Customizer

Създаваме линковете в Primary менюто от категории, затова преди да създадем менюто трябва да създадем категории в Posts > Categories:

Меню Primary

Менюто Footer1 е кратка версия на главното меню Primary и малко по-късно ще го добавим като widget във footer секцията:

Меню Footer1

Менюто Footer3 съдържа линкове към помощни страници, които имат значение за работата на сайта и в които, честно казано, си личи до голяма степен професионализма на разработчика:

Меню Footer3

Менюто Footer4 съдържа линкове към социални медии, които създадохме като custom link без да добавяме икони:

Меню Footer4

Секция Flash Theme Options

General Settings

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

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

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

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

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

Top Header Settings

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

Header Settings

През панела 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

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

Структурни настройки в 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 секция на сайта:

Настройки на Footer Widget Area

Google Font Settings

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

Настройки на шрифт Google Font Settings

Секция Widgets

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

Footer Sidebar 1 - инсталираме widget Navigation Menu, въвеждаме заглавие Categories и избираме меню Footer1:

Widget Footer Sidebar 1

Footer Sidebar 2 - инсталираме widget Tag Cloud и въвеждаме заглавие Tags:

Widget Footer Sidebar 2

Footer Sidebar 3 - инсталираме widget Navigation Menu, въвеждаме заглавие Important Links и избираме меню Footer3:

Widget Footer Sidebar 3

Footer Sidebar 4 - инсталираме widget Navigation Menu, въвеждаме заглавие Social Links и избираме меню Footer4:

Widget Footer Sidebar 4

Секция Homepage Settings

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

Избиране на начална страница Homepage Settings

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

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

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

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

Секции в началната страница

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

  • FT: CTA (има две секции с това име - изтриваме само едната, една трябва да остане).
  • FT: Animated Number Counter;
  • FT: Testimonial;
  • FT: Layout Builder;

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

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

Изтриване на панел в SiteOrigin

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

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

На изображението преместваме FT: Blog над FT: Portfolio:

Преместване на панел в SiteOrigin

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

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

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

Секция Slider в SiteOrigin

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

Интерфейси за конфигуриране на елементи в Slider

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

Настройки на елемент в Slider

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

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

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

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

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

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

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

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

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

Секция Service в SiteOrigin

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

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

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

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

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

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

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

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

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

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

Секция Blog в SiteOrigin

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

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

Интерфейс за конфигуриране на заглавие Heading

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

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

Интерфейс за конфигуриране на публикации Latest Posts

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

Конфигуриране на структура Styling

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

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

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

Секция CTA в SiteOrigin

Въвеждаме заглавие в полето 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 банера

След избиране на изображението се появи малка черна лента от двете страни на банера и при проверката на изходния код се оказа, че някой от CSS елементите генерира отстъп от двете страни, широк 34 px. За да разширим показването на банера до пълната ширина от 1920 px, кликаме полето Layout и въвеждаме стойност -34 само в двете полета, както е показано на следващото изображение:

CSS настройки Layout в SiteOrigin

Стойностите в секция Padding посочват разстоянието над заглавието и под бутона в банера.

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

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

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

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

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

Секция Portfolio в SiteOrigin

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

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

Настройки на Portfolio

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

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

Трите различни ефекта в Widget Style може да видим в браузъра ако отворим Pages > Portfolio element — SiteOrigin Page Builder и кликнем бутона Preview Changes в панела Preview.

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

Редактиране на заглавие и project image

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

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

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

Секция Logo в SiteOrigin

В панела 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 в главното меню.

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

Интерфейс за създаване на формуляр в Everest Forms

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

Активиране на формуляр в панела All Forms

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

Формуляр в страница за контакт

(* В Golf Masters сайтa формуляра е заменен с изображение.)

Създадохме допълнителните страници от менюто Important Links. Важно е да създадете собствена страница за GDPR политика дори и да не обработвате лични данни на посетителите на сайта.