Gutenberg наръчник - как да използваме новия редактор на WordPress

Скролни

Gutenberg наръчник – как да използваме новия редактор на WordPress

В WordPress 5.0 класическия редактор на съдържание бе заменен с чисто нов вид, познат като Gutenberg. От тогава получихме няколко молби за разбираем наръчник как да се използва Gutenberg.

Блоковият редактор на WordPress е един изцяло нов вид на създаване на съдържание. В този наръчник ще ви покажем как да го използвате и да създавате визуално изкусни публикации и страници.

Каква е разликата между блоковия редакор (Gutenber) и класическия редактор?

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

Ето как изглежда класическия редактор в WordPress:

Old WordPress editor

Ако обновите до WordPress 5, ето как ще изглежда новия блок редактор:

New WordPress Block Editor also known as Gutenberg

Можете да видите, че това са два напълно различни редактори на съдържание в WordPress.

Старият, класически редактор е текстов редактор с бутони, подобни на Microsoft Word.

Новият редактор използва напълно нов подход, наречен „Блокове“ (и затова блоков редактор).

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

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

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

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

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

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

Table block

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

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

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

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

В този Gutenberg наръчник ще обясним следното:

  1. Използване на Gutenberg – новия блоков редактор на WordPress
  2. Създаване на нова страница или публикация
  3. Как да добавим блок в Gutenberg
  4. Работа с блоковете в новия редактор
  5. Запазване и пре-изполване на блокове в Gutenberg
  6. Публикуване и настройки в Gutenberg
  7. Настройки на добавките в новия редактор
  8. Добавяне на популярни блокове в Gutenberg
  9. Изледване на някои нови блокове в Gutenberg
  10. Бонус идеи за използване на Gutenberg като про
  11. Добавяне на още блокове в Gutenberg
  12. ЧЗВ за Gutenberg

Готови ли сте? Да започваме!

Използване на Gutenberg – новия блоков редактор на WordPress

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

Нека започнем с основните неща, които се правят с класическия редактор и да видим как се правят с блоковия редактор.

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

Създаването на нова страница или публикация е по начина, по който сте свикнали да бъде. Кликнете на Публикации / Страници и на бутона „Добави нов“.

Adding a new post

Това ще стартира блоковия редактор Gutenberg.

Как да добавим блок в Gutenberg

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

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

Adding a post title in Gutenberg

По подразбиране следващия блок е параграф. Това позволява на потребителите да започнат да пишат ведната.

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

Add new block button

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

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

Finding and adding blocks in Gutenberg

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

Работа с блоковете в новия редактор

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

Например, в снимката отдолу се работи върху параграф, който показва основни бутони като: подравняване на текст, bold, italic, добави линк и зачертаване на текста.

Each block comes with its own toolbar

Освен туулбара, всеки блок може да има свои настройки, които ще се появят в колоната в дясно на екрана за редактиране.

Block settings

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

Moving a block up and down

Запазване и пре-изполване на блокове в Gutenberg

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

Просто кликнете на меню бутона в десния ъгъл на всеки туулбар на блока. От това меню изберете „Добави в преизползвани блокове“.

Saving a block to reuse later

Ще бъдете помолени за име на този блок. Въведете име и кликнете на Запази.

Giving a name to reusable block

Блоковият редактор ще запази този блок за използване отново.

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

Редактирайте страницата или публикацията, където искате да добавите този блок. От полето за редактиране кликнете на бутона за добавяне на блок.

Ще намерите запазения блок под таба „За многократна употреба“. Можете да го намерите и чрез написване на името му в полето за търсене.

Insert a reusable block

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

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

Manage your reusable blocks

Това ще отвори страницата за управление на блокове. От тук можете да редактирате или изтривате блоковете за многократна употреба. Можете и да ги експортирате и да ги импортирате в друг WordPress сайт.

Import export reusable blocks in WordPress

Публикуване и настройки в Gutenberg

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

Всички тези опции са поставени в дясната колона на екрана за редактиране.

Document settings in Gutenberg the new WordPress editor

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

WordPress разширенията могат да се интегрират с блоковия редактор.

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

WPForms block in new Gutenberg editor

Ето как Yoast SEO разрешава да редактирате СЕО настройките си в новия редактор:

Yoast SEO settings in new Gutenberg editor

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

WooCommerce products block

Добавяне на популярни блокове в Gutenberg

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

1. Добавяне на изображение в новия редактор на WordPress

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

Image block in new WordPress editor

Можете да провлачите изображение от компютъра си и редактора автоматично ще създаде блок за изображение с него.

След като сте добавили изображение ще можете да видите настройките му в дясно, където да добавите метаданни за alt text, да настроите размера и да добавите линк към изображението.

Image block settings

2. Добавяне на линк в новия блоков редактор

Блоковият редактор идва с няколко блока за добавяне на текст. Най-използваните от тях са параграф, който има бутон за добавяне на линк в туулбара.

Другите (като заглавие или списък) също имат бутон за добавяне на линк в туулбара.

Link button in the list block

Можете да добавите линк и като натиснете клавишна комбинация CTRL + K.

3. Добавяне на галерия със снимки в Gutenberg

Блокът за галерия работи като блокът за избражение. Добавяте го и след това качвате или избирате файлове от библиотеката.

Adding image gallery in new WordPress editor

4. Добавяне на шорткодове в WordPress с Gutenberg

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

Adding a shortcode block

Изледване на някои нови блокове в Gutenberg

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

Ето някои, които считаме за много полезни:

1. Добавяне на изображение до текст в WordPress

Използвайки класическия редактор, много потребители не можеха да сложат изображение до текста (единствено можеше да се подравни изображението в ляво или дясно, но не така, както би трябвало да изглежда). Сега можете да го направите с новия блок „Медия и текст“.

Media and Text block

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

2. Добавяне на бутон в публикация или страница в WordPress 

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

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

Adding a button block in Gutenberg

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

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

Друга полезна функция, която може да искате да пробвате е „Кавър“ блока, който ви позволява да добавите кавърни изображения към вашите публикации и страници.

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

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

The cover image block in Gutenberg editor

4. Създаване на таблици в статиите

Класическият редактор нямаше бутон за добавяне на таблица в WordPress. Трябваше да се инсталира ново разширение, или да създадете таблица посредством HTML и CSS код.

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

Table block

Можете да добавите и данните в таблицата. Винаги можете да добавите още редове или колони, ако има нужда. Има възможност да изберете от два основни стила за таблицата.

5. Създаване на съдържание в колони

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

Multi-column content

Този блок за колони е доста гъвкав. Можете да добавите до 6 колони на ред и да добавите още блокове във всяка колона (не само параграфи).

Бонус идеи за използване на Gutenberg като професионалист

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

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

Много скоро ще осъзнаете колко по-бърз е работния процес с този нов подход.

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

1. Преместване на туулбара на блоковете отгоре 

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

Просто кликнете на бутона с трите точки в горния десен ъгъл на екрана и маркирайте опцията Top Toolbar.

Move the block toolbar to the top of the editor

2. Използвайте клавишни комбинаации

Gutenberg идва с няколко полезни шорткъта, които ще подобрят дори още работния процес. Първият, с който трябва да започнете веднага е /.

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

За повече шорткодове кликнете на менюто от трите точки в горния десен ъгъл и изберете „Клавиатурни комбинации“ (‘Keyboard Shortcuts’).

Launch keyboard shortcuts

Това ще изведе прозорец с всички комбинации, които можете да използвате. Списъкът ще има различни комбинации за Windows и Mac потребители.

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

Gutenberg позволява да провлачите файлове навсякъде на екрана и автоматично ще създаде блок.

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

Drag and drop gallery block in new WordPress editor

4. Добавяне на YouTube, Twitter, Facebook, Vimeo, и други вграждания 

Gutenberg представя нови блокове за граждане. Има блок за всички поддържани типове, включително  YouTube, Twitter, Facebook, и още.

Embed blocks

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

Ако, например, добавите url на YouTube видео – редакторът автоматично ще създаде YouTube блок и ще покаже видеото.

YouTube embed

Добавяне на още блокове в Gutenberg блок редактора в WordPress

Новият блоков редактор в WordPress позволява разработчицие да създадат свои блокове. Има и някои страхотни разпирения, които предлагат блокове за новия редактор.

Ето някои от тях:

1. Advanced Gutenberg

Advanced Gutenberg

Advanced Gutenberg идва с няколко блока за популярно съдържание като слайдер на продукти от WooCommerce, мнения, карти, брояч, табове, акордеони и още.

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

2. Stackable – Gutenberg Blocks

Stackable - Gutenberg Blocks

Stackable – Gutenberg Blocks е колекция от красиви блокове, които можете да ползвате на сайта си. Включва блокове за контейнери, публикации, решетки и други.

3. Editor Blocks

Editor blocks for Gutenberg

Editor Blocks е друга чиста колекция от Gutenberg блокове, които можете да ползвате. Идва с полезни блокове като профил на автора, hero изображение, ценови таблици, брандове и още.

ЧЗВ за Gutenberg – Новия блоков редактор в WordPress

Откакто Gutenberg стана новия редактор в WordPress, сме получили доста въпроси за работата с него. Ето отговорите на най-често задаваните въпроси за Gutenberg.

1. Какво става със старите ми публикации и страници? Мога ли пак да ги редактирам? 

Вашите стари публикации и страници са напълно защитени и неафектирани от Gutenberg. Все още можете да ги редактирате и Gutenberg автоматично ще ги отвори в блок със стария текстови редактор.

Editing older articles in new WordPress editor

Можете да ги редактирате в стария редактор или да ги конвертирате в блокове и да използвате стария редактор.

2. Мога ли да използвам пак стария редактор?

Да, все още можете да използвате стария редактор. Просто инсталирайте и активирайте разширението Classic Editor.

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

Моля, имайте предвид, че класическият редактор ще се поддържа до 2022г.

3. Какво да правя, ако новия редактор не е съвместим с разширение или тема, която ползвам? 

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

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

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

Gutenberg наръчник – как да използваме новия редактор на WordPress
Оценете

Вашият коментар

This site uses Akismet to reduce spam. Learn how your comment data is processed.