Как использовать новый редактор блоков WordPress (Gutenberg)

В этом руководстве мы покажем вам, как использовать редактор блоков WordPress и освоить его для создания визуально потрясающих сообщений и страниц в блогах.

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

В чем разница между редактором блоков (Gutenberg) и классическим редактором?

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

Вот как выглядел классический редактор в WordPress:

Старый редактор WordPress

А вот так выглядит современный блочный редактор WordPress:

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

Как видите, это два совершенно разных редактора для создания контента в WordPress.

Старый классический редактор был текстовым редактором с кнопками форматирования, очень похожими на Microsoft Word.

В новом редакторе используется совершенно другой подход, называемый «Блоки» (отсюда и название «Редактор блоков»).

Блоки — это элементы содержимого, которые вы добавляете на экран редактирования для создания макетов содержимого. Каждый элемент, который вы добавляете в свой пост или страницу, представляет собой блок.

Вы можете добавлять блоки для каждого абзаца, изображений, видео, галерей, аудио, списков и т. д. Есть блоки для всех распространенных элементов контента, и другие могут быть добавлены плагинами WordPress.

Чем редактор блоков WordPress лучше классического редактора?

Редактор блоков WordPress предлагает простой способ добавлять различные типы контента в ваши сообщения и страницы.

Например, раньше, если вы хотели добавить таблицу в свой контент, вам нужен был отдельный плагин таблицы.

С помощью редактора блоков вы можете просто добавить блок таблицы, выбрать столбцы и строки и начать добавлять содержимое.

Блок таблицы в редакторе WordPress

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

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

Это дает огромное преимущество всем новичкам WordPress, которые только начинают свой первый блог или создают бизнес-сайт своими руками .

При этом давайте посмотрим, как профессионально использовать редактор блоков WordPress для создания отличного контента.

Вот что мы рассмотрим в этом руководстве по Gutenberg:

  1. Использование Gutenberg — редактора блоков WordPress
  2. Создание нового сообщения или страницы в блоге
  3. Как добавить блок в Gutenberg
  4. Работа с блоками в новом редакторе
  5. Сохранение и повторное использование блоков в Gutenberg
  6. Публикация и настройки публикации в Gutenberg
  7. Настройки плагина в новом редакторе
  8. Добавление некоторых общих блоков в Gutenberg
  9. Изучение некоторых новых блоков контента в Gutenberg
  10. Бонусные советы по использованию Gutenberg на профессиональном уровне
  11. Добавление дополнительных блоков в редактор блоков Gutenberg
  12. Часто задаваемые вопросы о Gutenberg

Видеоурок

Если вы предпочитаете письменные инструкции, просто продолжайте читать.

Создание нового сообщения или страницы в блоге с помощью редактора блоков

Вы начнете создавать новую запись или страницу в блоге, как обычно. Просто нажмите на меню « Сообщения» »« Добавить » в админке WordPress. Если вы создаете страницу, перейдите в меню Страницы »Добавить новую .

Добавление нового сообщения

Это запустит редактор блоков.

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

Первый блок каждого сообщения или страницы — это заголовок.

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

Добавление заголовка записи в редакторе блоков WordPress

По умолчанию следующий блок — это блок абзаца. Это позволяет пользователям сразу же начать писать.

Однако, если вы хотите добавить что-то другое, вы можете нажать кнопку добавления нового блока (+) в верхнем левом углу редактора, под существующим блоком или справа от блока.

Добавление новой кнопки блока в WordPress

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

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

Поиск и добавление блоков в WordPress

Если вы не хотите использовать мышь для нажатия на кнопку, вы можете использовать сочетание клавиш, набрав / для поиска и добавления блока.

Выбрать и добавить блок во время записи

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

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

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

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

Помимо панели инструментов, каждый блок также может иметь свои собственные настройки блока, которые будут отображаться в правом столбце экрана редактирования.

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

Вы можете перемещать блоки вверх и вниз, просто перетаскивая их или нажимая кнопки вверх и вниз рядом с каждым блоком.

Перемещение блока вверх и вниз

Организация блоков в группы и столбцы

В редакторе блоков есть удобные инструменты для управления и организации макетов вашего контента.

Вы можете выбрать несколько блоков, кликнув по ним, удерживая нажатой клавишу SHIFT на клавиатуре.

Организуйте блоки с группами и столбцами

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

Настройки группового блока

Затем вы можете применить стили ко всему блоку группы, например изменить их выравнивание или интервал.

Редактор блоков также позволяет добавлять пустой блок Group или Columns. После этого вы можете заполнить их другими блоками.

Добавить столбцы

Затем вы можете заполнить каждый столбец блоками любого типа для создания красивых макетов.

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

Сохранение и повторное использование блоков в Gutenberg

Одна из лучших особенностей блоков — это то, что их можно сохранять и использовать повторно. Это особенно полезно для владельцев веб-сайтов и блоггеров, которым часто нужно добавлять определенные фрагменты контента в свои статьи или страницы.

Просто нажмите кнопку меню, расположенную в правом углу панели инструментов каждого блока. В меню выберите опцию «Добавить в блоки многократного использования».

Добавить многоразовый блок

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

Имя многоразового блока

Теперь редактор блоков сохранит блок как повторно используемый.

Теперь, когда вы сохранили блок, давайте посмотрим, как добавить повторно используемый блок в другие сообщения и страницы WordPress на вашем сайте.

Просто отредактируйте сообщение или страницу, на которой вы хотите добавить многоразовый блок. На экране редактирования сообщения нажмите кнопку добавления блока.

Вы найдете свой сохраненный блок на вкладке «Повторное использование». Вы также можете найти его, набрав его название в строке поиска.

Добавить многоразовый блок

Вы можете навести на него указатель мыши, чтобы быстро просмотреть блок. Просто нажмите на блок, чтобы вставить его в свой пост или страницу.

Все повторно используемые блоки хранятся в вашей базе данных WordPress, и вы можете управлять ими, кликнув ссылку «управлять всеми повторно используемыми блоками».

Вы попадете на страницу диспетчера блоков. Отсюда вы можете редактировать или удалять любые повторно используемые блоки. Вы также можете экспортировать многоразовые блоки и использовать их на любом другом сайте WordPress.

Управляйте многоразовыми блоками

Примечание. Вы также можете использовать целые группы и столбцы как блоки многократного использования. Это позволяет сохранять целые разделы и использовать их при необходимости.

Параметры публикации и управления в редакторе блоков Gutenberg

Каждый пост WordPress содержит множество метаданных. Сюда входит такая информация, как дата публикации, категории и теги , избранные изображения и многое другое.

Все эти параметры аккуратно размещены в правом столбце экрана редактора.

Настройки документа в редакторе

Параметры плагина в Gutenberg

Плагины WordPress могут использовать API редактора блоков для интеграции своих собственных настроек в экран редактирования.

Некоторые популярные плагины имеют собственные блоки. Например, WPForms , лучший плагин для создания форм WordPress, позволяет добавлять формы в ваш контент с помощью блока.

Блок WPForms в редакторе WordPress

Вот как All in One SEO для WordPress позволяет редактировать настройки SEO в редакторе блоков:

Все в одном настройках SEO в редакторе блоков

WooCommerce также поставляется с блоками, которые вы можете легко добавить в любые ваши сообщения и страницы WordPress.

Блоки WooCommerce в редакторе блоков

Добавление некоторых общих блоков в новый редактор

По сути, редактор блоков может делать все, что делал классический редактор. Однако вы будете делать вещи быстрее и элегантнее, чем раньше.

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

В редакторе блоков WordPress есть готовый блок изображения. Просто добавьте блок, а затем загрузите файл изображения или выберите его из библиотеки мультимедиа.

Добавление блока изображения в WordPress

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

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

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

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

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

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

Добавление ссылок в блок списка

Вы также можете вставить ссылку с помощью сочетания клавиш: Command + K для Mac и CTRL + K на компьютерах с Windows.

3. Добавление галереи изображений в Gutenberg.

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

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

4. Добавление шорткодов в сообщения WordPress с помощью Gutenberg.

Все ваши шорткоды будут работать так же, как в классическом редакторе. Вы можете просто добавить их в блок абзаца или использовать блок шорткода.

Блок шорткода

Изучение некоторых новых блоков контента в Gutenberg

Редактор Gutenberg обещает решить некоторые давние проблемы с удобством использования в WordPress, введя несколько новых блоков.

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

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

Используя старый редактор, многие наши пользователи не могли разместить изображение рядом с текстом. Теперь вы можете сделать это с помощью блока « Медиа и текст» .

Медиа и текстовый блок

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

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

Добавление кнопки к сообщениям или страницам блога было еще одним раздражителем в старом редакторе. Вам либо приходилось использовать плагин, который создавал шорткод для кнопки, либо вам приходилось переключаться в режим HTML и писать код.

Gutenberg поставляется с блоком кнопок, который позволяет быстро добавить кнопку к любому сообщению или странице.

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

Вы можете добавить ссылку для своей кнопки, изменить цвета и т. д.

3. Добавление красивых обложек в сообщения блога и на целевые страницы.

Еще одна интересная функция, которую вы, возможно, захотите попробовать, — это блок «Обложка», который позволяет вам добавлять изображения обложек или цветную фоновую обложку к вашим сообщениям и страницам.

Обложка — это более широкое изображение, которое часто используется в качестве обложки для нового раздела на странице или в начале рассказа. Они выглядят красиво и позволяют создавать привлекательные макеты контента.

Просто добавьте блок обложки, а затем загрузите изображение, которое хотите использовать. Вы можете выбрать цвет наложения для обложки или сделать его фиксированным фоновым изображением, чтобы создать эффект параллакса, когда пользователи прокручивают страницу вниз.

Блок крышки

4. Создание таблиц внутри статей.

В классическом редакторе не было кнопки для добавления таблиц в ваши сообщения WordPress. Вам нужно было использовать плагин или создать таблицу, написав собственный CSS и HTML.

Редактор Gutenberg поставляется с блоком таблиц по умолчанию, который упрощает добавление таблиц в ваши сообщения и страницы. Просто добавьте блок, а затем выберите количество столбцов и строк, которые вы хотите вставить.

Блок таблицы в редакторе WordPress

Теперь вы можете продолжить и начать добавлять данные в строки таблицы. При необходимости вы всегда можете добавить больше строк и столбцов. Также доступны два основных стиля.

5. Создание содержимого из нескольких столбцов.

Создание содержимого из нескольких столбцов было еще одной проблемой, с которой классический редактор вообще не справлялся. Редактор блоков позволяет вам добавить блок Columns, который в основном добавляет два столбца блоков абзаца.

Содержимое нескольких столбцов

Этот блок столбцов довольно гибкий. Вы можете добавить до 6 столбцов подряд и даже использовать другие блоки внутри каждого столбца.

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

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

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

Довольно скоро вы поймете, насколько ускорится ваш рабочий процесс при таком подходе.

Для опытных пользователей вот несколько дополнительных советов, которые помогут вам работать с редактором блоков WordPress еще быстрее.

1. Переместите панель инструментов блока вверх.

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

Просто нажмите кнопку с тремя точками в правом верхнем углу экрана, а затем выберите параметр «Верхняя панель инструментов».

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

2. Используйте быстрые клавиши.

У Gutenberg есть несколько удобных ярлыков, которые сделают ваш рабочий процесс еще лучше. Первый, который вы должны начать использовать прямо сейчас, — это /.

Просто введите /, а затем начните вводить, и он покажет вам подходящие блоки, которые вы можете мгновенно добавить.

Чтобы просмотреть дополнительные сочетания клавиш, щелкните меню с тремя точками в правом верхнем углу экрана и выберите «Сочетания клавиш».

Запуск меню быстрых клавиш

Появится всплывающее окно со списком всех сочетаний клавиш, которые вы можете использовать. В списке будут разные ярлыки для пользователей Windows и Mac.

3. Перетащите медиафайлы, чтобы автоматически создавать медиаблоки.

Gutenberg позволяет вам просто перетаскивать файлы в любое место на экране, и он автоматически создает для вас блок.

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

Перетащите медиа

4. Добавление YouTube, Twitter, Vimeo и других встраиваемых файлов.

Редактор блоков упрощает встраивание стороннего контента в ваш контент WordPress. Есть блоки для всех популярных сторонних сервисов.

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

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

YouTube встраивать

Добавление дополнительных блоков в редактор блоков Gutenberg в WordPress

Редактор блоков в WordPress позволяет разработчикам создавать свои собственные блоки. Есть несколько замечательных плагинов WordPress, предлагающих пакеты блоков для нового редактора.

Вот несколько из них:

1. Ultimate Addons для Gutenberg

Ultimate аддоны для Gutenberg

Ultimate Addons for Gutenberg — это библиотека блоков, которая содержит множество расширенных блоков, которые помогут вам добавить больше элементов дизайна в ваш контент.

Созданные людьми, стоящими за популярной темой Astra WordPress, Ultimate Addons помогут вам создавать красивые дизайны без написания кода.

2. Публикация блоков прессы

PublishPress блоки

PublishPress Blocks — еще одна мощная библиотека блоков, которая поставляется с дополнительными блоками для расширения редактора блоков Gutenberg.

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

3. Stackable — Gutenberg Blocks.

Штабелируемые - блоки Gutenberg

Stackable — Gutenberg Blocks — это набор красиво оформленных блоков Gutenberg, которые вы можете использовать на своем веб-сайте. Он включает блоки для контейнера, сообщения, сетку функций, аккордеон, поле изображения, список значков, призыв к действию и многое другое.

Похожие записи

Один комментарий

  1. В настройках редактора блоков можно выделить галочками что выводить:
    Постоянная ссылка, Рубрики, Метки, Изображение записи, Отрывок и т.д.
    Эти настройки сохраняются, но на следующий день захожу в редактор и настройки все стандартные, слетели.
    Как сохранить там настройки на постоянно, а не до первой чистки кэша браузера?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *