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

3 min


В WordPress 5.0 классический редактор контента был заменен совершенно новым блочным редактором, известным как Гутенберг. С тех пор несколько наших читателей попросили нас создать всеобъемлющее руководство по использованию блочного редактора Гутенберга в WordPress.

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

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

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

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

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

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

Если вы обновитесь до WordPress 5.0, то вот так выглядит новый редактор блоков:

Новый редактор блоков WordPress, также известный как Гутенберг

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

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

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

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

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

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

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

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

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

Блок таблицы

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

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

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

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

Вот что мы рассмотрим в этом уроке Гутенберга:

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

Готовы? Давайте погрузимся в.

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

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

Давайте начнем с рассмотрения основных вещей, которые вы делали в классическом редакторе, и как они выполняются в редакторе блоков.

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

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

Добавление нового поста

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

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

Первым блоком каждого поста или страницы является заголовок.

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

Добавление заголовка сообщения в Гутенберге

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

Однако, если вы хотите добавить что-то другое, вы можете нажать кнопку «Добавить новый блок» в верхнем левом углу редактора, под существующим блоком или с левой стороны блока.

Кнопка Добавить новый блок

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

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

Поиск и добавление блоков в Гутенберге

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

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

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

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

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

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

Блокировка настроек

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

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

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

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

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

Сохранение блока для повторного использования позже

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

Присваивание имени многократно используемому блоку

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

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

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

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

Вставьте многоразовый блок

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

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

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

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

Импорт экспорта многоразовых блоков в WordPress

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

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

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

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

Параметры плагинов в Гутенберге

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

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

Блок WPForms в новом редакторе Гутенберга

Вот как Yoast SEO позволяет редактировать настройки SEO в новом редакторе:

Настройки SEO Yoast в новом редакторе Gutenberg

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

Блок продуктов WooCommerce

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

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

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

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

Блок изображения в новом редакторе WordPress

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

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

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

2. Добавление ссылки в новый блок Editor.

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

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

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

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

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

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

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

4. Добавление шорткодов в посты WordPress с помощью Гутенберга

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

Добавление блока шорткода

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

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

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

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

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

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

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

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

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

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

Добавление блока кнопок в Гутенберге

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

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

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

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

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

Блок изображения обложки в редакторе Гутенберга

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

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

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

Блок таблицы

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

5. Создание мультиколоночного контента

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

Мультиколоночный контент

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

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

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

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

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

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

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

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

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

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

2. Используйте сочетания клавиш

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

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

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

Запустить сочетания клавиш

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

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

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

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

Перетащите блок галереи в новый редактор WordPress

4. Добавление YouTube, Twitter, Facebook, Vimeo и других вставок

Гутенберг вводит новые блоки для встраивания в редактор блоков. Существует блок для всех поддерживаемых типов встраивания, включая YouTube, Twitter, Facebook и другие.

Вставить блоки

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

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

YouTube для встраивания

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

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

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

1. Продвинутый Гутенберг

Продвинутый Гутенберг

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

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

2. Стекируемые — блоки Гутенберга

Стекируемые - блоки Гутенберга

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

3. Блоки редактора

Редактор блоков для Гутенберга

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

Часто задаваемые вопросы о Гутенберге — новый редактор блоков в WordPress

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

1. Что происходит с моими старыми постами и страницами? Могу ли я их редактировать?

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

Редактирование старых статей в новом редакторе WordPress

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

2. Могу ли я продолжать использовать старый редактор?

Да, вы все еще можете использовать старый редактор. Просто установите и активируйте плагин Classic Editor.

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

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

3. Что делать, если новый редактор не работает с плагином или темой, которую я использую?

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

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

4. Как узнать больше советов и хитростей Гутенберга?

WPBeginner — лучшее место, чтобы узнать о новом редакторе блоков в WordPress. Мы являемся крупнейшим ресурсом WordPress в Интернете.

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

Между тем, если у вас есть какие-либо вопросы, не стесняйтесь обращаться к нам, оставив комментарий или воспользовавшись контактной формой на нашем сайте.

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


One Comment

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

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