Как использовать Gutenberg в WordPress: полное руководство для начинающих

Опубликовано: 2023-12-11

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

Но зачем откатываться, если новый более всеобъемлющий? Гутенберг, также известный как «Редактор блоков», представляет новый блочный подход к созданию контента, более гибкий и простой.

Поэтому вам необходимо иметь базовое или продвинутое понимание редактора блоков Гутенберга. И этот блог облегчит вам задачу.

Из этого руководства вы узнаете основы использования Gutenberg в WordPress, а также некоторые сложные приемы, такие как повторно используемые блоки и шаблоны.

Содержание скрыть
Что такое редактор блоков Gutenberg WordPress?
Понимание блоков и шаблонов
Как использовать Гутенберг в WordPress?
Как работает редактор блоков Гутенберга в WordPress?
Шаг 1: Как добавить блок в Гутенберге
Шаг 2. Добавьте контент в блок.
Шаг 3. Настройте стили блоков
Сохранение и повторное использование блоков в Гутенберге
Заворачивать

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

Одним предложением можно сказать, что Гутенберг — сравнительно новый редактор WordPress, который использует блоки для создания веб-страниц и публикаций. Редактор блоков был представлен с учетом простоты и гибкости. В Гутенберге каждый контент представляет собой отдельный блок.

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

Понимание блоков и шаблонов

Чтобы узнать, как работает редактор блоков Гутенберга, вам необходимо ознакомиться с парой новых терминов. Блоки WordPress и шаблоны блоков — это два термина, которые мы будем использовать чаще всего при описании Гутенберга. Итак, давайте сначала разберемся в них.

Блоки:

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

Аналогичным образом, в редакторе блоков WordPress есть такие блоки, как заголовки, галереи, списки, цитаты, встроенные медиафайлы (например, видео или твиты) и многое другое.

Помимо блоков по умолчанию, многие плагины добавляются в список блоков редактора Гутенберга.

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

Узоры:

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

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

Шаблоны блоков Гутенберга

Как использовать Гутенберг в WordPress?

Использовать Гутенберг просто и легко. Выберите блок, добавьте контент, настройте его — и ваша веб-страница готова! Но это еще не все. Давайте подробно выясним, как использовать Гутенберг в WordPress.

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

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

Как использовать Гутенберг в WordPress — Добавить новую страницу

Шаг 1: Как добавить блок в Гутенберге

Добавление блока в Gutenberg, редакторе блоков WordPress по умолчанию, представляет собой простой процесс. Сначала введите заголовок страницы.

Теперь, чтобы добавить блок,

  • Откройте поле для добавления блока: нажмите значок «+» в редакторе или нажмите / на клавиатуре. Откроется средство вставки блоков.
  • Просмотрите и выберите блок. Вы можете выполнить поиск блока, введя его имя, или пролистать доступные блоки. Выберите один и нажмите на блок, который хотите добавить.

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

Как использовать Гутенберг в WordPress — добавить блок

Шаг 2. Добавьте контент в блок.

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

Например, если вы хотите создать галерею изображений, 1. выберите блок галереи, 2. Загрузите или выберите изображения из медиа-библиотеки, и на страницу будет добавлена ​​галерея.

Аналогично, если вы хотите добавить заголовок, просто выберите блок заголовка и добавьте текст заголовка.

Шаг 3. Настройте стили блоков

Самое удивительное в редакторе блоков WordPress то, что вы можете настроить каждый блок по-разному. Например, два блока абзацев могут иметь разные цвета текста и типографику.

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

Настройте стили блоков Гутенберга

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

Многоразовые блоки, теперь называемые «Синхронизированные шаблоны», — это одна из удобных для пользователя функций, представленных в Гутенберге. Редактор блоков WordPress позволяет вам сохранить блок или группу блоков с собственными стилями и повторно использовать их позже на других страницах или в сообщениях. Это в значительной степени экономит время и усилия.

Чтобы сделать блок Гутенберга многоразовым,

  1. Выберите блок или группу.
  2. Нажмите на значок трех точек (⋮).
  3. Найдите «Создать шаблон/блок многократного использования».
  4. Введите имя.
  5. Включите переключатель «Синхронизировано», чтобы сделать его многоразовым.
  6. Наконец, нажмите кнопку «Создать».
Сохранение и повторное использование блоков в Гутенберге

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

  1. Откройте редактор WordPress для записи или страницы, на которую вы хотите добавить повторно используемый блок.
  2. Нажмите на значок «+», чтобы добавить новый блок.
  3. На вкладке «Многократное использование» вы увидите созданные вами повторно используемые блоки. Нажмите на тот, который хотите вставить.
Используйте многоразовые блоки в Гутенберге

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

Заворачивать

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

Итак, знание того, как использовать Gutenberg в WordPress, является фундаментальным требованием для любого, кто использует WordPress CMS в целом. Поняв работу блочного редактора и его множество функций, вы теперь обладаете инструментами для создания визуально привлекательных макетов, мультимедийного контента и удобных для пользователя веб-сайтов.