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

19 июля, 2020
Не знаете как использовать редактор WordPress? В этом уроке мы расскажем что такое блоки WordPress и как грамотно использовать редактор.
Быстрая навигация по записе

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

Несколько лет назад, в 2018 году, произошли серьёзные изменения в функционале системы управления контентом WordPress. Привычный всем редактор контента исчез, начиная с версии 5.0 , а на его месте появился блочный редактор под названием Гутенберг (Gutenberg). С этого момента к нам поступали многочисленные просьбы о создании полноценного руководства по работе с редактором блоков Гутенберг.

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

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

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

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

Классический редактор контента в WordPress
Классический редактор контента в WordPress

А при использовании CMS версии 5 или выше обновлённый редактор блоков выглядит следующим образом:

Редактор блоков в WordPress 5.0 и выше (Гутенберг)

Из представленных скриншотов становится понятно, что разница существенна.

Пользовательский интерфейс старого редактора очень сильно напоминал инструментарий классического Word от компании Microsoft.

Гутенберг несёт в себе иную логику, в её основе лежат блоки. Новый редактор так и называется – «Редактор блоков».

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

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

Каковы преимущества редактора Гутенберг над классическим решением?

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

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

Теперь достаточно просто добавить необходимый блок «Таблица» (да, так и называется), настроить параметры таблицы и заполнить её информацией.

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

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

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

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

В руководстве затронуты следующие темы:

Готовы? Давайте начинать!

1. Gutenberg – работа с блоками

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

2. Добавление новой страницы или блог-поста

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

Для создания страницы откройте меню «Страницы», выберите «Добавить новую».

Создание новой записи – Блоки WordPress – как правильно использовать редактор
Создание новой записи – Блоки WordPress – как правильно использовать редактор

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

3. Процесс добавления блока в редакторе

Важнейший блок любой страницы сайта или поста в блоге – это заголовок.

Мышкой можно опуститься ниже созданного заголовка, а можно воспользоваться и клавиатурой. Для этого следует нажать «TAB». Вообще, новый редактор блоков Гутенберг позволяет заменить многие манипуляции мышью «горячими» клавишами. Это в значительной степени упрощает работу.

Добро пожаловать в Гутенберг – Блоки WordPress – как правильно использовать редактор
Добро пожаловать в Гутенберг – Блоки WordPress – как правильно использовать редактор

Стандартные настройки редактора предписывают тип следующего блока. Это будет «Абзац». Можно сразу же начинать писать, что очень удобно!

Если набор текста не входит в ваши планы прямо сейчас, то необходимо воспользоваться функцией «Добавить блок». Данная кнопка в левом-верхнем углу редактора.

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

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

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

Меню блоков – Блоки WordPress – как правильно использовать редактор
Меню блоков – Блоки WordPress – как правильно использовать редактор

Если вам неудобно работать с мышью, то применяйте клавиатуру. Например, нажмите «/», чтобы найти и добавить интересующий вас блок.

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

4. Как работать с блоками в редакторе

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

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

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

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

Дополнительные настройки блока – Блоки WordPress – как правильно использовать редактор
Дополнительные настройки блока – Блоки WordPress – как правильно использовать редактор

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

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

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

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

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

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

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

Задаем имя для блока
Задаем имя для блока

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

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

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

Предварительно сохранённый блок можно найти на специальной вкладке «Мои блоки». При желании можно воспользоваться строкой поиска.

Вкладка “Мои Блоки” в меню добавления нового WordPress блока
Вкладка “Мои Блоки” в меню добавления нового WordPress блока

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

Все без исключения сохранённые WordPress блоки содержатся в БД. Управление ими доступно при нажатии кнопки «Управление моими блоками».

6. Публикация записи/страницы и настройка

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

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

Публикация и настройки записей
Публикация и настройки записей

7. Кастомные WordPress блоки различных плагинов

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

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

WooCommerce – Блоки плагинов в редакторе блоков
WooCommerce – Блоки плагинов в редакторе блоков

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

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

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

Пользователю доступен заранее подготовленный блок, так называемого, медийного контента – «Изображение», которые работает с уже существующей библиотекой файлов. Так же, при желании, можно переместить изображение из локальной папки (например с рабочего стола) в рабочую зону редактора. Блок «Изображение» будет создан в автоматическом режиме.

Добави блок вы увидите его дополнительные настройки, для добавления метаданных: «Альтернативный текст», «Размер изображения».

Для того чтобы быстро добавить изображение в тело контента – просто начните печатать/изображение

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

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

При желании можно воспользоваться клавиатурой, нажав следующие клавиши:
«Command + K» для Mac и «CTRL + K» для Windows.

3. Блок галереи изображений

Блок галереи – Блоки WordPress – как правильно использовать редактор
Блок галереи – Блоки WordPress – как правильно использовать редактор

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

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

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

Для быстрого добавления шорткода в тело контента используйте /шорткод или выберите одноименный блок через кнопку «Добавить блок».

9. Знакомство с абсолютно новыми блоками

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

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

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

Меди и Текст – Блоки WordPress – как правильно использовать редактор
Меди и Текст – Блоки WordPress – как правильно использовать редактор

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

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

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

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

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

Как и любой другой блок, блок «Кнопки» доступен через функцию добавления блоков Блоки WordPress - как правильно использовать редактор (пособие по Гутенбергу) а так же через быстрый поиск через  /кнопки.

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

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

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

Блок «Обложка» – Блоки WordPress – как правильно использовать редактор
Блок «Обложка» – Блоки WordPress – как правильно использовать редактор

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

4. Таблицы в теле контента

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

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

Блок Таблица – Блоки WordPress – как правильно использовать редактор Гутенберг
Блок Таблица – Блоки WordPress – как правильно использовать редактор Гутенберг

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

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

Организация нескольких колонок в классическом редакторе была невозможна. Но только не в редакторе блоков Гутенберг! Редактор предоставляет возможность воспользоваться блоком «Колонки» и разместить произвольное количество столбцов один за другим.

Блок «Колонки»
Блок «Колонки»

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

10. Профессиональные рекомендации по работе с редактором блоков

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

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

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

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

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

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

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

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

2. Применяйте сочетания клавиш

Редактор блоков имеет чрезвычайно дружественный интерфейс. Реальным воплощением этого факта является возможность использования символа «/».

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

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

Сразу же появится окно с исчерпывающим списком возможных комбинаций. Причём будут представлены два варианта списков: Для Mac и Windows.

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

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

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

4. YouTube, Twitter, Facebook, Vimeo и другие значимые вставки (Embed)

Редактор блоков Гутенберг даёт возможность интегрировать контент со сторонних ресурсов. Теперь не нужно пользоваться особыми плагинами. Вы можете быстро и легко поделиться видео в своём блоге.

Существует возможность применения простого копирования ссылки вставки в контент (например, YouTube). При этом автоматически создаётся необходимый блок.

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

Вставка эмбедов
Вставка эмбедов

11. Мне мало, как добавить еще больше блоков в редактор WordPress

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

Вот некоторые из них:

1. Gutenberg Blocks

Плагин Gutenberg Blocks
Плагин Gutenberg Blocks

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

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

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

2. Advanced Gutenberg

Плагин Advanced Gutenberg
Плагин Advanced Gutenberg

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

У администратора сайта или блога появляется возможность полноценного контроля за пользователями, которые могут корректировать контент (распределение ролей). Можно решить, кто может работать с теми или иными блоками.

3. Stackable

Плагин Stackable
Плагин Stackable

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

Заключение

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

Как вам работается в редакторе? Нравится или не очень? Дайте нам знать в комментариях ниже.

Спасибо.

  1. Елизавета

    Здраствуйте! Читаешь- вроде всё понятно. Начинаешь делать — мрак… Вопрос: как сделать, чтоб при наведении мышки на картинку и клике на неё — открывалось новое окно с подробной информацией? Как у вас здесь выше в рубрике ЧИТАЙТЕ ТАК ЖЕ?

  2. Дмитрий

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

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

Нужна помощь с WordPress WooCommerce плагинами темой оптимизацией ?

Упрощаем сложное, создаем впечатляющее!
100% без риска
Нет обязательств по найму
Бесплатная оценка
Давайте составим техническое задание!100% без рискаНет обязательств по наймуБесплатная оценка стоимости
Здравствуйте! Я асистент на основе искусственного интеллекта. Вы можете общаться со мной, как с человеком — задавайте вопросы, описывайте свои идеи и требования.

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

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

Поможем вывести Ваш бизнес на новый уровень!

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

Добро пожаловать!

Авторизуйтесь, чтобы продолжить

или

* Если аккунта у Вас еще нет, то он будет создан автоматически