wordpress news gutenberg

Руководство по редактору Gutenberg

Gutenberg – редактор блоков, используемый WordPress по умолчанию

Если вы используете WordPress 5.0 и выше, то наверняка сталкивались с новым блочным редактором Gutenberg. С точки зрения функциональности привычный классический редактор и Gutenberg делают одно и то же: помогают создавать контент. Только помните о том, что WordPress перестанет поддерживать классический редактор после 2022 года.

Gutenberg не похож на традиционный текстовый редактор. Он использует блоки контента так же, как и современные конструкторы веб-страниц.

Как создать запись WordPress с помощью редактора Gutenberg

В этом разделе мы создадим новую запись WordPress с помощью редактора Gutenberg. Для этого в панели администрирования перейдите в меню Записи> Добавить запись.

После чего вы попадете в редактор Gutenberg.

Добавление заголовка

Первый блок, который вы увидите — это заголовок, расположенный в верхней части документа. Чтобы создать заголовок записи, введите текст внутри блока.

Нужно отредактировать постоянную ссылку? Для этого в блоке «Заголовок», нажмите кнопку «Изменить».

После добавления заголовка нажмите клавишу Enter, чтобы начать новую строку.

Добавление нового абзаца

Нажатие Enter создает новый блок абзаца. Прежде чем вводить какой-либо текст в блок, задайте несколько параметров.

Примечание. Вы можете:

  1. Преобразовать блок абзаца в блок другого типа.
  2. Добавить изображение.
  3. Изменить блок абзаца на блок заголовка.
  4. Превратить блок абзаца в галерею.

После добавления текста появляется панель инструментов для форматирования.

С помощью панели форматирования можно:

  • Преобразовать абзац в цитату, заголовок, список, код и отформатированный текст.
  • Сделать текст жирнымкурсивом, зачеркнутым и подчеркнутым.
  • Выровнять текст по левому краю, по правому краю, по центру и по обоим краям.
  • Добавить ссылку, открывающуюся в новой вкладке.
  • Вставить встроенное изображение.
  • Скрыть настройки блока.
  • Создать дубликат слоя.
  • Вставить блок до или после текущего блока.
  • Редактировать блок как HTML-код.
  • Добавить текущий блок в коллекцию для последующего использования.
  • Удалить блок.

Дополнительные параметры доступны на вкладке «Блок» в меню боковой панели.

Для этого:

  1. Перейдите на вкладку «Блок», чтобы просмотреть все параметры и настройки блока.
  2. Установите размер шрифта и активируйте параметр «Буквица».
  3. Добавьте цвет фона к абзацу.
  4. Также можно добавить собственный класс.
  5. Синий фон и большая первая буква уже применены в редакторе Gutenberg.

Вкладка «Документ» в боковой панели

В боковом меню доступна вкладка «Документ».

Как работать с этой панелью:

  1. Перейдите на вкладку «Документ».
  2. Здесь вы можете запланировать публикацию, установить видимость и статус записи.
  3. Отредактировать постоянную ссылку.
  4. Выбрать существующую или создать новую категорию.
  5. Добавить метки к записи.
  6. Установить главное изображение.
  7. Создать отрывок.
  8. Разрешить комментирование.

Теперь добавим изображение ниже первого абзаца.

Добавление изображений в редакторе Gutenberg

После нажатия Enter создается новый блок абзаца. Чтобы добавить изображение, кликните по иконке «+».

Все варианты добавления изображений:

  1. С помощью иконки «+».
  2. Добавить обычное изображение.
  3. Добавить галерею.

Нажмите любую из иконок и добавьте изображение.

После чего загрузится блок «Изображение».

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

Обычные настройки мультимедиа…

… и настройки блока «Изображение».

В качестве иллюстрации я добавила текст и кнопку под ним.

Как добавить загружаемые файлы

Редактор Gutenberg позволяет легко добавлять загружаемые файлы в запись или на страницу WordPress. Для этого в новом блоке «Абзац» нажмите на иконку «+», перейдите к «Основным блокам», «Файл».

После чего будет добавлен блок «Файл».

Он позволяет загрузить новый файл или добавить его из медиа библиотеки. После чего Gutenberg автоматически добавляет кнопку «Скачать».

Добавление цитаты в редакторе Gutenberg

Чтобы добавить цитату, на новой строке кликните по иконке «+» и в основных блоках выберите «Цитата».

После этого будет добавлен блок «Цитата».

Чтобы добавить цитату, введите текст внутри этого блока.

Добавление встроенных блоков медиа в редакторе Gutenberg

Редактор Gutenberg поставляется с блоками для встраивания видео и других медиафайлов с более чем 30 различных площадок (YouTube, Vimeo, Facebook, SoundCloud, WordPress, Slideshare и так далее).

Чтобы встроить содержимое, кликните по иконке «+» и выберите пункт «Вставки». В качестве примера я выбрала YouTube.

Затем вставьте URL-адрес YouTube-видео и нажмите кнопку «Вставить».

После чего Gutenberg автоматически преобразует ссылку во встроенное видео.

Как добавить кнопку в редакторе Gutenberg

В новой строке кликните по иконке «+», «Элементы разметки», «Кнопка».

После этого добавится блок «Кнопка».

В нем вы сможете отредактировать текст кнопки и добавить к ней ссылку. А также настроить кнопку через боковое меню справа.

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

Блок «Колонки» доступен в разделе «Элементы разметки».

Редактор Gutenberg по умолчанию добавляет две колонки.

Вот что у меня получилось.

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

Чтобы добавить изображение с текстом, в коллекции блоков «Элементы разметки» выберите элемент «Мультимедиа и текст».

После этого вы должны увидеть в редакторе блок «Мультимедиа и текст».

Затем загрузите изображение или видео. После этого добавьте текст.

Вот что получилось.

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

Редактор Gutenberg поддерживает и блоки сторонних разработчиков. Например, вы можете добавить блоки WooCommerce в запись WordPress. Для этого необходимо установить и активировать плагин WooCommerce. Затем в новой строке кликните по иконке «+», в разделе «WooCommerce» выберите тот блок, который вам необходим.

Другие важные блоки

Вот список других блоков, доступных в Gutenberg:

  • Виджеты— позволяет добавлять контент из виджетов в записи блога.
  • Шорткоды.
  • Классический блок.
  • Больше– это блок, который ранее было принято называть тегом «Читать дальше»
  • Разрыв страницы.
  • HTML-код.
  • Таблица.
  • Галерея.

Быстрые хаки для редактора Gutenberg и сочетания горячих клавиш

Редактор Gutenberg поставляется «в комплекте» с парой хаков и сочетаний горячих клавиш. Например, если вы введете «/» внутри блока абзаца, то появится список доступных блоков.

Вы также можете выбрать конкретный блок, введя его название после обратной косой черты («/»). Например, если ввести «/image», то получите блок изображения.

Для просмотра всех доступных сочетаний горячих клавиш воспользуйтесь клавиатурной комбинацией SHIFT + ALT + H в Windows и OPT + CTRL + H в Mac.

Чтобы просмотреть структуру документа, кликните по иконке «i».

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

0

Автор публикации

не в сети 11 часов

Brama

1 946
Комментарии: 0Публикации: 264Регистрация: 05-12-2019

Оставьте комментарий

Авторизация
*
*



Регистрация
*
*
*
Генерация пароля