Как да използвате новия редактор на WordPress Block – Вашето ръководство за WordPress Gutenberg

От изданието на WordPress 5.0 на 6 декември 2018 г. WordPress има нов редактор на съдържание по подразбиране. Наречен редактор на WordPress Gutenberg, докато е в процес на разработка, "Гутенберг" сега е само "WordPress редактор" или "блок редактор" ако искате да бъдете по-конкретни.


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

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

Ръководство за WordPress Gutenberg

Contents

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

Gutenberg е името на проекта за новия редактор на блокове WordPress, който замени редактора на WordPress TinyMCE като редактор на WordPress по подразбиране в WordPress 5.0.

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

Като бързо опресняване, ето как изглежда старият редактор на WordPress TinyMCE. Този редактор вече се нарича класически редактор:

оригинален редактор на wordpress tinymce

И ето как изглеждат нещата в новата WordPress блок редактор, AKA Gutenberg:

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

Това обаче е повече от естетическа актуализация. Гутенберг променя изцяло редактирането чрез преминаване към блоков подход към съдържанието (повече за това какви точно блокове са за секунда!).

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

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

Гутенберг е част от WordPress?

Gutenberg беше официално освободен като част от WordPress 5.0 на 6 декември 2018 г.. Ако сте актуализирали сайта си до WordPress 5.0, сега трябва да видите новия редактор на блокове по подразбиране.

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

Как работи редакторът на WordPress Gutenberg

Преди секунда ви казах, че Гутенберг е блоков редактор. Беше грубо да те оставиш да висиш, защото ако си като повечето хора, може би не знаеш какво означава това.

Така че ето редактирането на блокове 101:

По същество Гутенберг заменя единичното поле за редактиране на текущия редактор на WordPress TinyMCE с много индивидуални "блокове".

След това тези блокове ви позволяват да изградите по-сложни дизайни от разрешените в стария класически редактор на WordPress.

Какво е блок?

Е, един блок може да бъде почти всичко. Например, можете да имате блокове за:

  • Редовен текст
  • Снимки
  • Вграждане на видео
  • Бутони
  • Джаджи (да, същите тези джунджурии, които използвате в страничната си лента)
  • Маси
  • И т.н..

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

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

  • 2 текстови блока
  • 1 изображение блок

Гледайте колко лесно мога да пренаредя тези блокове само като ги влача и пускам:

Гутенберг плъзгане и пускане

И защото всеки блок е "отделен", можете също да добавите неща като персонализирани фонове само за конкретни блокове.

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

Значи Гутенберг е създател на страници, нали?

Е, не съвсем. Поне не в сегашния си вид.

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

Само на повърхностно ниво Гутенберг вече липсва две основни неща:

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

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

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

Например, в нашето сравнение между Elementor срещу Divi Builder срещу Beaver Builder, можете да видите как строителите на горната страница предлагат неща като:

  • Редактиране с плъзгане и пускане в свободна форма
  • Истинска поддръжка на много колони, в която можете да създадете произволен брой колони, за да преместите отделни елементи
  • Тонове предварително направени шаблони
  • Разширени възможности за стайлинг, с петна за персонализирани полета / подплънки и много други
  • Отзивчиви настройки на дизайна

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

Трябва ли да използвате новия редактор на блокове? Можете ли да запазите предишния редактор на WordPress?

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

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

Имате ли нужда от специална тема, за да използвате новия редактор на блокове на Гутенберг?

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

Първо, темите могат да предлагат вграден стил за всички тези нови блокове. Още по-добре, темите могат действително да заредят тези стилове в редактора. Това означава, че можете да видите истинския стил за вашите блокове, докато изграждате съдържанието си за по-добро WYSIWYG изживяване (вижте основна версия на това в действие тук)

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

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

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

  • фирн – Neve е нашата нова тема, която е създадена специално за работа с редактора на блокове в Гутенберг.
  • Zakra – приятен лек вариант от ThemeGrill.
  • Hestia Lite – гъвкава тема, която следва принципите на материалния дизайн.

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

Изграждане на първото ви оформление с редактора на блокове на Gutenberg WordPress

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

По този начин ще сте готови да извлечете максимума от WordPress 5.0 и новия редактор.

Бърза обиколка на интерфейсния редактор на блок WordPress

Преди да започнете да добавяте някои блокове, нека да преминем бързо на елементи на интерфейса на главния редактор на блокове:

Интерфейсът на редактора на блоковете на gutenberg

  • (А) – ви позволява да добавяте нови блокове.
  • (В) – бутони за отмяна / повтор
  • (° С) – ви дава достъп до настройките на документа, обхващащи неща като категории & тагове, представени изображения и т.н. Това е подобно на текущата странична лента в редактора на WordPress
  • (Д) – когато имате избран индивидуален блок, това ви дава достъп до настройки, специфични за този блок
  • (Е) – ви позволява да получите достъп до преглед на живо на публикацията си или да публикувате / актуализирате публикацията си
  • (F) – след като добавите някои блокове, това е мястото, където всъщност ще работите със съдържанието на публикацията си

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

Както обсъдих в интрото, ще използвате отделно "блокове" за да създадете вашите оформления с новия редактор.

За да добавите нов блок, всичко, което трябва да направите, е да щракнете върху +плюс и изберете типа съдържание, което искате да добавите:

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

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

видове блокове

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

видове блокове

  • Вградени елементи – съдържа само един блок за вградено изображение.
  • Общи блокове – съдържа основни градивни елементи като изображения, абзаци (обикновен текст), заглавия, цитати и т.н..
  • Форматирането – да ви позволи да добавите още форматирано съдържание като издърпване на цитати, таблици или класическия текстов редактор на WordPress
  • Елементи на оформлението– ще ви позволи да разделите текст на две колони, да включва бутони, разделители или "| Повече ▼" свободен край
  • Widgets – да ви позволи да добавяте къси кодове, последни публикации или категории. Възможно е дори да се показват джаджи на страничната лента направо в Гутенберг.
  • вгражданията – да ви помогне да вграждате съдържание от външни източници като Twitter, YouTube, Facebook, Instagram и др.
  • за многократна употреба – след като получите обекта на неща, можете да запишете групи от блокове като шаблони за многократна употреба и да ги покажете тук. Тази зона няма да се появи, докато не запазите първия си шаблон за многократна употреба, който ще ви покажем как да направите по-късно в тази публикация.

Изграждане на основно оформление с Гутенберг

Нека започнем просто. Кажете, че просто искате да създадете основно оформление на блог, което включва:

  • Редовен текст
  • Изображение
  • Цитат
  • Вградено видео в YouTube

Ето как се справите с Гутенберг:

Първо, вие ще напишете цялата си публикация в редактора. Или, ако сте като мен и предпочитате пишете в Google Документи, можете да го поставите всичко и тогава Гутенберг автоматично ще го преобразува в блокове.

Добавяне на нетекстовите блокове

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

изображение блок

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

вмъкване на изображение

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

вградено изображение

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

поставете цитат

След това ще видите новия си блок за изтегляне на оферти. За да създадете вашата оферта, всичко, което трябва да направите, е да кликнете в блока и да напишете:

въведете оферта

За да вмъкнете видеоклип в YouTube, можете да добавите ново YouTube блок от вгражданията раздел. За да вмъкнете видеоклип, всичко, което трябва да направите, е да въведете URL адреса и да кликнете закрепвам:

Ютуб блок

По желание – създаване на различни колони

Искате ли да станете още по-креативни? Gutenberg вече включва функция за експериментални колони, която ви позволява бързо да създавате множество колони. Всичко, което трябва да направите, е да добавите Колони (бета) блок от Елементи на оформлението секция. След това можете да поставите други блокове вътре в него:

Гутенберг колони

След като приключите, всичко, което трябва да направите, е да кликнете върху публикувам бутон:

публикуване на публикация

И ще имате своя форматирана публикация в блога в предния край.

Как да персонализирате отделни блокове

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

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

По принцип вие контролирате съдържание в действителното тяло на редактора:

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

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

стилизиране на блок

А за по-усъвършенствания стил обикновено ще стилизирате блока в блок раздел с настройки.

За достъп до този раздел, изберете блока, който искате да редактирате, и прегледайте до блок раздел:

персонализиране на блок

Как да пренаредите отделни блокове

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

преместете блокове Гутенберг

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

Гутенберг плъзгане и пускане

Поставяме всичко заедно

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

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

Но след като стигнете до закачането на нещата – трябва да се движите през изграждането на оформления. А с по-напредналите блокове, с които Гутенберг идва, ще имате по-голяма гъвкавост от редактора на TinyMCE WordPress.

Някои спретнати, но по-напреднали трикове на Гутенберг

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

Бързо създайте нов блок с въвеждане

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

/ BLOCK-NAME

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

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

Доста удобен и голям спестител на време!

преки път към блок

Редактирайте изходния код директно

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

редактиране на код в gutenberg

Активирайте режим на цял екран, фиксирана лента с инструменти и т.н..

Новият редактор на блокове включва няколко различни режима, които ви позволяват да промените опита на редактиране. Можеш:

  • Добавете фиксирана лента с инструменти като редактора на TinyMCE
  • Отидете на цял екран
  • Поставете a "прожектор" на активния блок

За да ги използвате "Прегледи", щракнете върху три точки икона в горния десен ъгъл.

Гютенберг гледки

Използвайте клавишните комбинации на Гутенберг, за да спестите време

Освен стандартните преки пътища за форматиране, редакторът на блокове има редица специални клавишни комбинации, които могат да ви помогнат:

  • Поставете нови блокове над или под избрания блок
  • Изтрийте блок
  • Дублиране на блок
  • И т.н..

За да отворите пълния списък с клавишни комбинации, използвайте Shift + Alt + H пряк път.

Клавишни комбинации на Гутенберг

Създайте шаблони за многократна употреба

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

За да създадете вашия шаблон:

  • Изберете блоковете, които искате да включите
  • Щракнете върху три точки икона
  • Изберете Добавяне към блокове за многократна употреба

Блок шаблони за многократна употреба на Gutenberg

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

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

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

За да редактирате блок за многократна употреба, превъртете до за многократна употреба секция в блоковата вложка и щракнете върху Управлявайте всички блокове за многократна употреба бутон. Или можете да посетите tvojeite.com/wp-admin/edit.php?post_type=wp_block (не забравяйте да замените tvojeite.com с вашия истински URL).

Редактирайте WordPress блокове за многократна употреба

Разширете редактора на блокове с приставки

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

Видра блокове е добър вариант да започнете. Той ви дава допълнителни блокове за неща като цени, препоръки, Google Maps, икони за споделяне, "щракнете, за да туитвате" бутони и други.


Гутенберг блокове и библиотека с шаблони от Otter Гутенберг блокове и библиотека с шаблони от Otter

Автор (и): ThemeIsle

Текуща версия: 1.5.4

Последна актуализация: 26 май 2020 г.

otter-blocks.zip


98% Ratings


60000 + инсталирания


WP 5.2 + Изисква

Контролирайте струпването с Block Manager

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

За да използвате Мениджъра на блокове:

  • Щракнете върху три точки икона в горния десен ъгъл
  • Изберете Блок мениджър
  • Използвайте квадратчетата за отметка, за да деактивирате блокове, ако е необходимо

WordPress Block Manager

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

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

За да помогнете, редакторът на блокове включва a Блокиране на навигацията инструмент, който можете да отворите, като щракнете върху лентата с инструменти или използвате Shift + Alt + O клавишна комбинация.

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

Функция за блокиране на навигацията

Превключване между режимите за редактиране и избор

С WordPress 5.4 получавате достъп до два различни режима, които можете да превключвате между горната лента с инструменти:

  • редактиране – това е, което ще работите през повечето време. Тя ви позволява да редактирате съдържанието на всичките си блокове. Това е режимът на редактор по подразбиране.
  • Изберете – това улеснява избора на конкретни блокове, особено при работа с вложени блокове (например блокове вътре в колона). След като щракнете върху блок, автоматично ще се върнете към редактиране вид.

Режим за избор на редактор на WordPress блок

Експериментирайте с нови функции за редактор на блокове

Откакто блок редакторът е обединен в ядрото, всъщност има две версии на редактора на блокове:

  1. Народната версия в основния софтуер на WordPress (това вероятно е това, което използвате)
  2. Плъгинът Гутенберг

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


Гутенберг Гутенберг

Автор (и): Екипът на Гутенберг

Текуща версия: 8.2.1

Последна актуализация: 28 май 2020 г.

gutenberg.8.2.1.zip


40% Ratings


200000 + инсталирания


5.3.0Requires

Какво се случва с цялото ви старо съдържание?

Преди да завърша нещата, позволете ми бързо да разгледам какво ще се случи с цялото ви старо съдържание, след като го актуализирате до WordPress 5.0 (ако още не сте го направили).

Не се притеснявайте – няма да изчезне! Но опитът е малко по-различен:

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

Класически блок на Гутенберг

За да работите със старото си съдържание, можете:

  • Оставете го в класическия блок и го редактирайте точно както бихте направили със стария редактор на WordPress
  • Използвай три точки и изберете и изберете Преобразуване в блокове. Това ще разбие всичко на отделни блокове. След това можете да работите със съдържанието си така, сякаш първоначално сте го създали с редактора на блокове в Гутенберг.

Преобразуване в блокове

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

Въпреки че редакторът на блокове вече е официално част от ядрото (благодарение на пускането на WordPress 5.0), екипът на WordPress далеч не е завършил с проекта Gutenberg.

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

Въпреки че тези функции все още не са налице, те са на път. Поради тази причина ще плати да започнете да изучавате интерфейса на блоковия редактор ASAP!

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

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

Сега, ние ще се радваме да чуем от вас. Сигурен съм, че много от вас имат сериозни мисли за новия редактор на блокове в Гутенберг – така че ни уведомете за това в коментарите!

Не забравяйте да се присъедините към нашия крах курс за ускоряване на вашия сайт WordPress. С някои прости поправки можете да намалите времето за зареждане дори с 50-80%:

Оформление, презентация и редакция от Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map