Всичко, което трябва да знаете за WordPress блоковете

Имате сайт на WordPress (версия 5.0 или следваща) и вече сте видели блок-редактора за създаване на съдържание? Или може би все още използвате класическия редактор и Ви се струва сложно да преминете към „блоковете“? Ако се чудите какво са WordPress блоковете, какво правят и как можете да ги използвате, в тази статия Ви даваме отговорите.

Ако все още не сте преминали към версиите на WordPress след 5.0, вижте какво ново Ви очаква след ъпгрейда, както и план за действие: 🔗 WordPress 5.0 е тук, както и новият редактор Gutenberg | Blog

Съвсем накратко, блоковете в WordPress са начин за организиране и създаване на съдържанието в блок-редактора. 

Блокът Paragraph (абзац/параграф) в блок-редактора на WordPress.
Блокът Paragraph (абзац/параграф) в блок-редактора на WordPress.

В тази статия ще научите:

Каква е разликата между класическия и настоящия блок-редактор?

Блок-редакторът е разработен като проект под името Gutenberg. В началните фази на разработката, блок-редакторът е бил наличен като плъгин за WordPress. Сега той вече е част от ядрото на WordPress и при нова инсталация той е редакторът на съдържанието по подразбиране. Класическият редактор може да се инсталира допълнително като плъгин.

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

Панелите с опции в блок-редактора

Блок-редакторът в WordPress има няколко зони и панела, които съдържат определени настройки и опции. За да се ориентирате по-добре в инструкциите за работа с блоковете, може да имате предвид местоположението и имената на панелите с опции.

Ето основните панели и зони на блок-редактора:

  1. Горна лента с инструменти.
    Горната лента в редактора съдържа основни опции за управление на документа.
  2. Панел с блокове (библиотека с блокове).
    Този панел се намира в лявата част на редактора и можем да го наричаме библиотека с блокове. В панела има три таба за блокове (Blocks), шаблони (Patterns) и преизползваеми блокове (Reusable). Панелът се отваря с бутона „плюс“ от горната лента.
  3. Панел с настройки (Settings).
    Този панел се намира в дясната част на редактора и съдържа настройки за страницата (таб Post) и блоковете (таб Block). Панелът се показва и скрива с бутон „зъбно колело“ от горната лента.
  4. Зоната за въвеждане на съдържание.
    В тази централна част от редактора се попълва съдържанието на страницата.
  5. Зона за мета данни към съдържанието.
    Някои плъгини използват тази зона, за да показват допълнителни настройки.
  6. Опции за блок-редактора (Options).
    Това е меню, което се отваря с бутон „три точки“ в горната лента. Опциите тук се отнасят за самия блок-редактор.

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

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

В тази статия ще споменаваме предимно следните панели: 1. Горна лента с инструменти, 2. Панел с блокове, 3. Панел с настройки, 6. Опции за блок-редактора, както и блок-панела.

Вижте подробности за опциите, панелите и зоните на редактора: 🔗 Настройки на блок-редактора в WordPress | Help

Какво е блок в WordPress?

Блокът в блок-редактора е структурна единица за съдържанието в страницата. Блоковете са контейнери, в които се съдържат отделните части на цялото съдържание. 

Основният блок в редактора - Paragraph (абзац/параграф). Всеки нов ред е блок-параграф.
Основният блок в редактора – Paragraph (абзац/параграф). Всеки нов ред е блок-параграф.

Както и при класическия редактор, отделните части от съдържанието се представят в код със съответните HTML тагове, например абзац <p>, заглавие <h>, списък <ol> / <ul>, изображение <img> и всички останали. Няма промяна в кодовото представяне на съдържанието в новия блок-редактор. Разликата с класическия редактор е в това, че тези отделни части са оградени във виртуален контейнер, който се нарича блок.

Например абзацът, поставен в контейнер-блока Paragraph, изглежда така:

Така изглежда блокът като код - съдържанието му се намира между два тага.
Така изглежда блокът като код – съдържанието му се намира между два тага.

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

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

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

Например блокът Media & Text съдържа изображение (img) и един или повече блок-абзаци (wp:paragraph).

Блокът Media & Text съдържа едновременно картинка и блок Paragraph.
Блокът Media & Text съдържа едновременно картинка и блок Paragraph.
Кодът на този блок е по-сложен, защото в него се съдържат и много настройки за стила (как точно да се показва картинката и абзацът).
Кодът на този блок е по-сложен, защото в него се съдържат и много настройки за стила (как точно да се показва картинката и абзацът).

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

Да знаете какво представлява блокът като код, може да Ви помогне, когато срещнете някакъв проблем със съдържанието в блок-редактора, например при забили или бъгнати блокове. При проверка на кода в режим Code editor (Options » Code editor) може да проверите дали началният и затварящият таг на проблемния блок са налични. Дори можете да премахвате проблемни блокове, ако създават някакво смущение в представянето на съдържанието в редактора, които не можете да оправите през визуалния му режим. 

Проверката на проблемни блокове или проблемно поведение на блок-редактора понякога може да изисква технически познания. Ако казусът е прекалено сложен, срещате трудности или имате нужда спешно от съдействие, нашите WordPress експерти са на линия. Вижте повече за нашата услуга „Професионална WordPress поддръжка“.

Какви блокове има в WordPress?

За всичките стандартни елементи на съдържанието има блок (абзац, заглавие, списък и т.н.). Блок-редакторът има над 30 блока за текстови данни, медия, оформление, джаджи и вмъкнато съдържание от външен източник. 

Разделени според типа на информацията, която съдържат, и според функционалността им, ето малка част от тях. В скоби след името на някои блокове е поставен HTML тагът, който съдържат. Комплексните блокове съдържат по няколко вида съдържание (HTML тагове).

Текст:

  • Paragraph – Параграф (p). Това е основният блок в блок-редактора. Всеки нов ред автоматично се задава като абзац. От този блок можете да добавяте други блокове.
  • Heading – Заглавие (h). Блок за заглавие, с опции за различните нива (h2, h3, h4..). Блок-заглавие може да се добави и с маркерите на Markdown. Например изписвате в новия абзац ## и натискате Spacebar-а на клавиатурата, това създава автоматично блок-заглавие от ниво 2 (### – h3, #### – h4 и т.н.).
  • List – Списък (ol/ul). Изреждане на текст в списък, номериран или неподреден.
  • Quote – Цитат (blockquote). Блок за цитат.
  • Pullquote – Цитат с акцент (blockquote). Подобно на обикновения цитат, Pullquote може да се използва за цитат, но основната му роля е да добави акцент върху фраза или част от текста, която искаме да изпъкне.
  • Table – Таблица (table). Блок за таблица. 
  • Code – Код (code). Блок за код. 

Медия:

  • Image – Изображение (img).
  • Gallery – Галерия. (ul»li»img). За добавяне на няколко изображения, подредени в колони.
  • Video – Видео (video). В този блок може да се поставя видео клип, който е качен в сайта. За видео от външен източник като YouTube например има отделен блок YouTube.
  • Audio – Аудио (audio). Аудио файлът се качва в сайта. За аудио от външен източник се използва някой от блоковете за Вмъкнато съдържание, например SoundCloud.

Оформление:

  • Columns – Колони (div). Колоните не използват HTML елемента за таблици (table). Вместо това те са изградени чрез CSS стилови правила. Това ги прави респонсив за всякакви размери на екрана. Например при най-малките екрани, колоните ще се подредят една под друга, нещо, което не може да се постигне с колоните на таблицата.
  • Spacer – Разстояние (div).
  • Separator – Разделител (hr).

Джаджи:

  • Shortcode – Кратък-код.
  • Custom HTML – Потребителски HTML код.
  • Social Icons – Социални икони.

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

  • YouTube (iframe).
  • Twitter (iframe).
  • и много други.

Изчерпателен списък с блоковете можете да намерите тук: 🔗 Blocks | wordpress.org

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

Различните блокове имат различни начини за показване на информацията, която се съдържа в тях. Поради това те имат и различни възможности за настройка. Например за блок-картинка (Image) може да се зададе какъв да е размерът на картинката в широчина и височина, докато за блок-параграф (Paragraph) може да се зададе размерът на шрифта.

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

Върху набора и възможностите за настройка на блоковете оказва влияние използваната тема. Например в настройките за цветовете на текста и фона може да са зададени опции, представящи цветовата гама на темата. Също така размерите на текста, заглавията и други са определени от темата.

Някои стандартни настройки са налични за почти всички блокове като например подравняването (ляво, център, дясно), копиране, дублиране, преместване, изтриване, редактиране като HTML код и други.

Всеки блок съдържа определен тип съдържание, върху което може да се приложат специфични настройки (намират се в Панела с настройки вдясно в таб Block).

Блок-панел

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

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

Блок-панелът може да се показва над блока или в горната лента с инструменти. За да преместите блок-панела в горната лента, изберете от Опции (Options) » Top toolbar.

Панел с настройки

Допълнителните настройки на блока се намират в таб Блок (Block) в Панела с настройки (вдясно, който се отваря и скрива с бутон „зъбно колело“).

Допълнителните настройки за блока се съдържат в страничния Панел с настройки, в таб Блок (Block).
Допълнителните настройки за блока се съдържат в страничния Панел с настройки, в таб Блок (Block).

Работа с блоковете

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

При създаването на нова страница или публикация, както досега с класическия редактор, пишете текста и след като завършите с абзаца, натискате Enter на клавиатурата, за да преминете на нов ред. На новия ред изписвате „-“, ако искате да изреждате в списък, поставяте копиран URL адрес, за да създадете препратка или поставяте изображение, което се намира в папка на Вашето устройство. Блоковете сами се появяват след Вашите действия.

Процесът по създаване на съдържание в блок-редактора наподобява този при drag&drop редакторите. След като смените класическия редактор с блок-редактора, след втората страница, която създадете с него, ще усетите огромно облекчение. Ще се убедите колко удобен, безпрепятствен и ненатоварващ е процесът по създаване на съдържание с блок-редактора.

Вижте повече за опциите при 🔗 Създаване на страница или публикация в WordPress | Help

Добавяне на блок

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

Нов блок може да се добави от всеки бутон с „плюс“.
Нов блок може да се добави от всеки бутон с „плюс“.

От главния бутон-плюс в горната лента се отваря библиотеката с блокове (Blocks), шаблони (Patterns) и преизползваеми блокове (Reusable). От този панел с кликване или придърпване можете да добавяте нови блокове.

Вторият начин е чрез използване на команден режим – на нов ред (в нов блок-параграф)  изписвате наклонена на дясно черта „/“, продължавате да изписвате името на блока и ще получите списък, от който да изберете.

Добавяне на нов блок чрез изписване на името му в нов блок-параграф.

Добавянето на нов блок от бутона с плюс е лесно. Понякога обаче се налага да добавим нов блок между други два блока. За да се покаже бутонът плюс, е нужно с курсора на мишката да търсим и нацелим средата вертикално и хоризонтално между двата блока. Вместо това, можем да използваме един друг много по-бърз начин – с клавишна комбинация. 

Докато сте селектирали горния или долния блок, изберете от клавиатурата:

  • Ctrl+Alt+Y – добавяне на нов блок-параграф след избрания блок;
  • Ctrl+Alt+T – добавяне на нов блок-параграф преди избрания блок.

Поставяне на съдържание в редактора

При поставяне на съдържание в редактора, което е копирано друг документ, например MS Word, Google Docs и други, то се подрежда автоматично в подходящите блокове. Част от стиловете на текста ще бъдат запазени като например удебелен и наклонен шрифт, нива на заглавията и други.

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

Разместване

Разместването на блоковете се извършва с помощта на малките стрелкички, налични в блок-панела.

Разместване на блока със стрелките в блок-панела.

Разместването може да се прави и с клавишна комбинация:

  • нагоре Ctrl+Shift+Alt+T;
  • надолу Ctrl+Shift+Alt+Y.

Премахване

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

Можете да изтриете блока от опциите му в блок-панела с Remove block.

Другият начин е, след като даден блок е селектиран, да го премахнете с клавиша Del (Delete) на клавиатурата или с клавишната комбинация Ctrl+Alt+Z.

Селектиране

Селектиране на един блок

Селектирането на един блок става с кликване в областта му, в границите на блока.

Понякога може да е по-трудно да уцелите главния блок, когато той е от комплексните като Columns (Колони) или пък Social buttons (Социални бутони). Докато вътрешните блокове са лесни за селектиране, главният блок, в който се намират, е по-труден за уцелване с мишката.

Три начина за селектиране на един блок.

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

  • А) Изберете от горната лента с опции бутона List View (трите чертички). Веднага ще видите в списък главния блок, както и всички съдържащи се в него вътрешни блокове. От списъка можете лесно да маркирате желания блок.
  • Б) В лентата в левия ъгъл долу в редактора има указател (breadcrumbs) с линкове към блоковете, показващ йерархията им. Селектирането на точния блок измежду няколко вместени е много лесно.
  • В) Третият вариант е да следвате нивата на блоковете чрез блок-панела с появяващите се бутони върху бутона Change block type or style.

Селектиране на няколко блока

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

Селектиране на няколко блока с кликване и придърпване.

Друг вариант за селектиране на няколко блока е да използавате режим Select от горната лента с опции.

Селектиране на няколко блока в режим Select.

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

Комбиниране на блокове

Комбинирането или групирането на блокове е от голяма полза, когато например искате да приложите един стил върху няколко блока или пък да ги преместите/изтриете накуп.

Комбинирането се извършва като селектирате блоковете и изберете от блок-панела опцията Group.

Комбиниране на блокове.

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

От техническата страна на нещата, групирането на блокове е поставянето им в отделен контейнер-блок Group. Съдържанието се намира между блок-таговете <-- /wp:group --> …  <!-- /wp:group -->. По този начин групата от блокове е подобна на другите сложни блокове, които съдържат други блокове.

Ако не успявате с кликване и придърпване да селектирате блоковете, може да опитате с режим Select

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

Преизползваеми блокове

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

Добавяне на блок в Преизползваеми блокове.

Създаването на преизползваем блок става, като изберете желания блок (или група от блокове) и използвате опцията Add to Reusable blocks.

Опцията в блок-панела за добавяне на блок в Преизползваеми блокове.
Опцията в блок-панела за добавяне на блок в Преизползваеми блокове.

Създадените вече преизползваеми блокове се намират в панела-библиотека с блоковете вляво, в таб Reusable. Оттам с кликване или издърпване можете да добавяте блокове.

Списък с преизползваемите блокове можете да достъпите на адрес: 

https://goodexample.eu/wp-admin/edit.php?post_type=wp_block

goodexample.eu – заменете с името на Вашия домейн;

Ако използвате много преизползваеми блокове и извършвате редовно промени по тях, можете да си добавите в отметките адреса на списъка им. Иначе, за да отворите тази страница, трябва да влезете в някоя статия и от опциите в нея да кликнете на Manage all reusable blocks (Options » Manage all reusable blocks или от библиотеката с блокове » таб Reusable » Manage all reusable blocks).

Инсталиране на нови блокове

В някои специфични случаи може да откриете нужда от определен блок, който не е наличен сред стандартните на блок-редактора.

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

Такива специфични блокове може да се инсталират лесно по няколко начина. Първият и най-бърз начин е директно през блок-редактора, докато редактирате някоя страница. От панела с блоковете използвайте полето за търсене. Първо, трябва да сте установили какво точно Ви трябва. Например ако Ви трябва таблица за съдържанието на статията, изпишете в търсачката „toc“. 

Инсталиране на нов блок директно през блок-редактора.

За да добавите блока във Вашата библиотека с блокове, кликнете Add block. Новият блок се инсталира в WordPress като плъгин. Ако блокът не Ви върши работа, можете да деинсталирате плъгина, който ще е със същото име. Ако имате няколко блока с подобни имена, ще можете да ги различите като проверите името на разработчика им. 

Блоковете, които се показват чрез търсачката в блок-редактора, се намират в официалната директория с плъгини и блокове във wordpress.org.

Другият начин за инсталиране на блокове е през страницата за добавяне на нови плъгини в WordPress. Плъгините за блокове предоставят голямо разнообразие от блокове, примерни плъгини: WooCommerce Blocks, Stackable – Page Builder Gutenberg Blocks, Ultimate Blocks – Gutenberg Blocks Plugin и други.

Някои теми и плъгини имат собствени блокове. Например WooCommerce има много блокове за продуктите.

Част от блоковете на WooCommerce.
Част от блоковете на WooCommerce.

Мениджър на блокове

Вградените блокове, които идват с блок-редактора, са над 30 броя. Отделно можем да инсталираме допълнителни блокове. Реално обаче, едва ли ще използваме абсолютно всеки един блок постоянно.
С мениджъра на блокове можете да скриете неупотребяваните блокове от библиотеката с блокове. Скриването и показването е лесно и се извършва през опцията в основното меню Options » Block Manager.

Скриване на определени блокове от библиотеката с блокове.

Деактивирането на блоковете не ги премахва от WordPress, само ги скрива от библиотеката с блокове.

Блоковете, които са вградени в блок-редактора, са много. Ако разчитате на това да кликате върху тях, за да ги добавяте в страницата, намирането на конкретния блок в библиотеката може да отнема много време, докато го намерите, докато го видите, докато го кликнете. В този случай намаляването на броя на блоковете ще ускори намирате и избирането им.

Ако добавяте блоковете чрез изписването на името им в нов блок-параграф, голямата им бройка няма да е толкова проблемна. Докато не се добавят много блокове с почти еднакви имена или отнасящи се за едно и също нещо, тогава ще трябва да избирате от дълъг списък с блокове.

Когато има много блокове с подобно име или отнасящи се за едно и също нещо, изборът е по-труден.

Проблеми с блоковете

Както всеки друг компонент на WordPress, върху блок-редактора и блоковете може да оказват влияние останалите компоненти на системата – плъгините и темата.

Често проблем със зареждането на редактора може да е причинен от некоректната работа или стара версия на някой плъгин.

Ако проблемът е свързан със самите блокове и начинът им на поведение, в редки случаи е възможно причината да е от самия редактор. Затова е нужно редовно да се обновява WordPress версията. В новите версии освен подобрения по самата система са включени и поправки в блок-редактора. Понякога е нужно просто да се изчака излизането на следващата нова версия на WordPress, в която забелязаните проблеми са отстранени.

Съвет от support-а: Когато забележите някакъв проблем с блок-редактора или с поведението на самите блокове, проверете дали причината не е в някой инсталиран плъгин. Разгледайте списъка с плъгини, потърсете тези, които са със стара версия и не са обновявани скоро. Тествайте блок-редактора, след като деактивирате необновения плъгин. Ако проблемът все още се забелязва, погледнете за друг необновен плъгин и го деактивирайте. Ако няма промяна след тестването на всички необновени плъгини, ние сме насреща. По-добре е да ни пишете за съдействие, отколкото да загубите още време в борба с проблема. 

Експертна помощ при казуси с WordPress

Не можете да се справите с блоковете или да качите видео в сайта, получавате грешки след ъпдейт на WordPress, плъгин или тема, имате проблем с публикуването на постове или качването на снимки към тях?

Нашата специална експертна WordPress поддръжка ще Ви спаси точно в такива моменти на трудности. Можете да получите съдействие от нашия екип при работата с основни менюта и функционалности на WordPress, при проблем с достъп до сайта или администрацията, при грешки Internal Server Error и още много други. Спестете време и усилия с професионална WordPress поддръжка за Вашия сайт!

Абонирайте се за СуперБлога, за да научавате първи най-важното и полезното от света на уеб, касаещо Вашия сайт и дигитално развитие.

Мадлена Методиева
Мадлена Методиева
Меган е част от СуперМаркетинг екипа. Мисията ѝ е старателно да попълва е-библиотеката на СуперХостинг.БГ с полезни и помощни статии.
0 0 votes
.
Абониране
Уведоми ме при
guest

0 Коментара
Inline Feedbacks
View all comments
Блог статия - популяризация на съдържание

Написах статия: 9 идеи за повече посетители на Вашия блог

0
Написахте блог статия. Поздравления! А сега накъде? Вижте нашите предложения за успешна популяризация на блог статии. Повече в СуперБлога!
5 причини да изберете домейн .EU ( а защо не и .ЕЮ )

5 причини да изберете домейн .EU (а защо не и .ЕЮ )

0
Домейнът .EU е сравнително нов за пазара на домейни. От края 2016 година е един от най-популярните Top Level домейни.
Пренеси бизнеса си онлайн за няколко часа със собствен сайт

Пренеси бизнеса си онлайн за няколко часа със собствен сайт

0
Дойде моментът на практическите съвети как да пренесете бизнеса си от офлайн към онлайн със собствен сайт. Вижте повече!