Нов ъпдейт на WordPress 5.0 и редактора Gutenberg

Както вероятно вече сте разбрали, през декември WordPress пусна нова версия на – WordPress 5.0 Bebo (вижте подробности тук).Ако все още не сте актуализирали, може дори да не знаете, че с новата версия на WordPress подходът за писане и редактиране на статии се е променил глобално. Присъствието на редактора Gutenberg промени всичко.
Да живеят drag&drop конструкторите на страници!
Ще трябва да се справим с новия редактор и едновременно с това да променим навиците си, за да се наслаждаваме на живота. В тази статия ще ви разкажа и ще ви покажа как да използвате новия редактор на Гутенберг в WordPress. И вие сами ще решите дали да го използвате или не.
gutenberg
Между другото, WP все още няма потребителско ръководство за Gutenberg. За разработчиците , както и за дизайнерите има, но за обикновените хора – не.Има само раздел, наречен Наръчник на потребителя, но за сега той е празен (връзка).
Така че, ние сме първите!:)

Какво е редактора Гутенберг?

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

Искате текста  около изображението? Не е проблем!
Преместете снимката на правилното място на страницата и настройте .
Искате ли да промените цвета на заглавието? Лесно!
Искате ли да вградите видео от YouTube или друг източник? Просто! И така е всичко.

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

Как се използва редакторът Гутенберг. Първи стъпки

Отидете в административния панел и в раздела „Публикации“ и кликнете върху „Добавяне на нова“. Първото нещо, което ще видите е много лаконичен работен плот, където има само прозорец за заглавието и поканата „Започнете на пишете / за да изберете блок“. Просто мечтата на минималиста.
Когато отваряте за първи път новия редактор, ще трябва да преминете през няколко съвета.Ето първия:

„Добре дошли в прекрасния свят на блоковете! Натиснете бутона „+“ („Добавяне на блок“), за да добавите нов блок. Има блокове за всички видове съдържание: можете да добавите текст, заглавия, изображения, списъци и много други!“


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

Следващия съвет е:

„Още настройки на страниците и блоковете можете да намерите в страничната лента. Натиснете „Настройки“, за да я отворите.“

Минаваме нататък, кликайки върху „виж следващ съвет“ и виждаме:

„Натиснете „Предварителен преглед“, за да видите страницата, преди да я публикувате и да сте сигурни, че сте доволни от вашите блокове.“
Последното е:

„Приключихте с писането? Страхотно! А сега да го публикуваме. Просто изберете „Публикуване“ и сте готови.“
Натискаме „Ясно!“
Все още нищо сложно.Вие просто добавяте елементите, които са ви необходими, към страницата и ги редактирате.Нека първо напишем заглавие и един абзац от текст:

Забележка: когато сте в някакъв блок (с изключение на заглавието на публикацията), разделът „Блок“ се включва автоматично отдясно в страничната лента. Тук можете да персонализирате външния вид на текущия блок. Например, запълване на фон или цвят на шрифта. Там можете да включите опцията „Уголемена първа буква“, която е много удобна и изглежда красива, както в стара книга.


Страничната лента е разделена на два раздела: „Документ“ и „Блок“. В раздела „Документ“ се намира страницата с настройки. Разделът „Блок“ съдържа настройките за текущия блок. Страничната лента може да бъде скрита, като кликнете върху зъбното колело.

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

Тук можете да:

  • Скривате / показвате на опциите за блок. Ако натиснете „Скрий“, страничната лента вдясно просто ще се изключи, освобождавайки място на екрана (особено удобно на мобилни устройства).
  • Дублиране. Кликнете върху него и точно под блока ще се появи точно същият блок със същото съдържание.
  • Постави преди / Постави след. Добавя блок над или под текущия.
  • Редактирайте като HTML. Превключва текущия блок в режим на редактиране на HTML, което понякога е доста удобно.
  • Добавяне към „Моите блокове“. Много полезна функция! Създавате съдържанието и го запазвате за повторно използване на сайта. Актуализирайте блока и промените ще възникнат, където и да се използват.
  • Премахвате блок.

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

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

Как да добавите подзаглавия в Gutenberg?

Да добавим сега подзаглавия. За да направите това, можете да кликнете върху иконата + или върху иконата с буквата T. Блока с подзаглавие има свой собствен набор от инструменти. Можете да изберете нивото на заглавието (от H1 до H6), подравняването, както и да добавите HTML Anchor, което ви позволява директно да се свържете с раздела на страницата (за да направите това, кликнете върху раздела „Допълнителни“ в страничната лента).подзаглавия в Gutenberg

Как да добавяте изображения към Gutenberg?

Сега да добавим снимка към публикацията. За да направите това, кликнете върху иконата + или върху иконата с картинка. В този раздел можете да добавите изображение от компютъра си, от библиотеката с вече качени файлове или да изтеглите от друг уеб ресурс чрез връзка.изображения към Gutenberg
Можете да настроите изображението по свое усмотрение. Отдясно и долу ще видите сини точки, за които картината може да бъде разтегната или смалена, за да се приспособи към оформлението на вашата статия. Под снимката можете да добавите надпис.
Освен това в страничната лента можете да добавите алтернативен текст към изображението (alt attribute = „“), изберете размера на изображението (няколко опции), добавете връзка.

Забележка: В раздела „Документ“ в страничната лента има раздел „Картинка за публикацията“. Можете да го използвате, за да добавите т.н. featured image, точно както в стария редактор.

Но не е само това!В редактора на Гутенберг можете да зададете истинско изображение-обложка за статията със заглавие. По-късно тя ще се използва като Картинка на публикацията, например в „Подобни статии“, или като първа снимка на публикацията за споделяне в социалните мрежи.
За да добавите това изображение-обложка в редактора Gutenberg, кликнете върху него и изберете „Промяна на блока“. След това, кликнете върху надписа „Въведете заглавието …“ и въведете заглавието:
В дясната странична лента ще видите няколко настройки за изображението-обложка. Можете да го настроите като фиксиран фон, да добавите цвят за наслагване или да регулирате прозрачността. Веднага може да видите как ще изглежда. Това е голям плюс за редактора Гутенберг – видимост в реално време.

Как да добавяте видеоклипове в Gutenberg?

За да добавите видео в редактора на Гутенберг, кликнете върху иконата +, отидете в секцията „Основни блокове“ и кликнете върху бутона „Видео“. Тук можете също да добавите видеофайл от компютъра си или от изтеглени в библиотеката или от сайт (Редакторa Гутенберг разпознава 34 различни услуги на трети страни)
Нека добавим видеоклип от YouTube. Кликнете върху бутона „Постави от сайта“ и добавете връзка от YouTube. След като добавите, щракнете върху бутона „Приложи“ (стрелка, както на бутона Enter на клавиатурата). Тук можете също да добавите надпис под видеоклипа.

Забележка: Редакторът на Гутенберг може да се „учи“ и постепенно да премества най-често използваните блокове в най-горната част, която се нарича „Често използван“. Съгласeте се, че е много удобно. Няма нужда отново да търсите къде се крие този бутон или обложка.

Как да добавяте текстови колони към Гутенберг

Тук феновете на текстовете в колони тип списание или вестник просто ще се развихрят. Преди това такова удобство не съществуваше. Е, в специални или премиум теми от тип „журнал“ на WordPress, а дори и тогава само условно.

Сега вече можете в етапа на написването на статията да го разделите в отделни колони. Яко, а? 🙂

Да добавим колони в редактора на Гутенберг. За да направите това, кликнете върху иконата +, отидете в секцията „Структурни елементи“ и кликнете върху бутона „Колони“. Резултатът е блок с две колони отвътре. Във всеки можете да добавите текст:

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

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

Нека добавим към нашите колони още няколко мини колони:

Още полезни настройки на редактора Гутенберг

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

Горна лента с инструменти.Достъпване на всички блокове и инструменти на едно място.
Режим на представяне.Фокусиране върху блоковете един по един.
Режим на цял екран.Скрива цялата навигация.
Визуален редактор/Редактор на код.Същите функции, както в стария редактор.
Освен това, ако сте привързани към класическия редактор, можете да го изберете. Кликнете върху иконата +, отидете в раздела „Форматиране“ и кликнете върху бутона „Класически“. Ще се покаже блок с лента с инструменти в горната част, като в класическия редактор.
полезни настройки на редактора Гутенберг

Защо да преминем на Gutenberg?

И още няколко думи в защита на новия редактор. Гутенберг все още не е много популярен. Освен това, когато беше просто плъгин, той получи много ниски оценки от потребителите. Всички единодушно се бяха съгласили: неудобно е!

Разбира се, със всичко ново трябва да свикне. Друг е въпроса – струва ли си? За да си отговорите, трябва да разберете и приемете, че времето на обикновените блогове отминава. Сега никой, освен самите собственици, почти не се интересува.

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

Ето защо не е изненадващо, че разработчиците на WordPress са погледнали напред и са създали блоков редактор, както и в други модерни сайт конструктори. И това е добре! Скоро първоначалното неудобство ще бъде забравено, хората ще свикнат с новия редактор и ще се радват да го използват.
Разбира се, никой не може да налага насила, каквото и да е на който и да е.

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

Как да върнем стария редактор на WordPress (деактивирайте Gutenberg чрез код или плъгин)

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

Деактивиране на редактора Gutenberg с код

Деактивиране на редактора позволява т.н. hook use_block_editor_for_post_type.
Дали този редактор се използва за посочения тип пост, може да се провери с функцията use_block_editor_for_post_type($post_type).
„Куката“ use_block_editor_for_post_type сработва в края на тази функция и ви позволява да активирате или деактивирате редактора на Gutenberg за определен тип публикация или за всички типове публикации едновременно.

1.Напълно деактивиране на Gutenberg на сайта

Поставете следния код във файла functions.php или някъде другаде:

$use_block_editor (true/false)
– Дали трябва да използвате редактора на Гутенберг за типа публикация.
По подразбиране: true
$post_type (низ)
– Типът запис, за който се проверява използването на блоковия редактор Гутенберг.

2.Изключване на Gutenberg само за определен тип публикации

 

Classic Editor — плъгин, деактивиращ редактора Гутенберг.

Ако трябва да оставите възможността да използвате Гутенберг на сайта (за да можете да редактирате някои статии в новия редактор, a други в класическия), тогава изключването на Гутенберг чрез код не е добра опция. В този случай разработчиците на WordPress препоръчват инсталиране на плъгина Classic Editor.

След като инсталирате и активирате плъгина, трябва да отидете на страницата с настройки: Настройки > Публикуване и да изберете кой редактор ще се използва по подразбиране, както и да активирате / деактивирате опцията за избор на редактора за потребители.

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

Как да използваме редактора Gutenberg?
4.8 (95%) 32 votes

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

Затвори