Осваиваем Гутенберг WordPress — новый редактор страниц

Вместе с WordPress 5.0 мы получили новый визуальный редактор контента — Гутенберг WordPress. Теперь мы будем работать с блоками текста и редактировать их отдельно.

Что такое Гутенберг WordPress

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

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

Перейдите в админ-панель сайта и выберите пункт Записи. Затем переходим к пункту Добавить новую. Вы увидите такой экран:

Добавить-запись

В видимом блоке введите заголовок.

Создание блоков

После ввода заголовка мы можем добавить текст. Для этого есть значок "плюс". Здесь мы выберем тип контента, который хотим добавить.

выбираем блок абзац гутенберг

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

Дополнительные параметры текста находятся на правой стороне экрана. Настройки шрифта также находятся здесь. Доступен размер шрифта из предустановленных параметров.

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

Изменить тип блока

Мы можем изменить тип блока при создании страницы. Для этого нажмём первую кнопку над активным блоком. Выберем тип блока.

Типы блоков

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

типы блоков в гутенберге

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

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

Форматирование — позволяет добавлять форматированный контент, такой как таблица, код, пользовательский HTML-код, а также блок в классическом текстовом редакторе WordPress.

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

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

Вставки — позволяют встраивать внешний контент, такой как YouTube, Twitter, Instagram, Facebook и другой контент.

Как создать базовый макет страницы

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

Добавим текст

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

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

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

вставляем картинку в гутенберг

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

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

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

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

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

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

 

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

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

Таким образом, мы имеем доступ к созданным блокам при создании новой записи. Сохраненные блоки отображаются в списке типов блоков в разделе « Управление всеми моими блоками». Им также можно управлять. Есть возможность преобразовать их обратно в обычный блок или удалить их из меню.

Ещё больше функций есть справа. Некоторые из них знакомы по предыдущей версии WordPress. Другие из них являются новыми.

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

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

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

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

Постоянная ссылка - отредактируйте текстовую часть URL здесь.

Свойства страницы - Установите шаблон страницы и назначьте родительскую страницу.

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

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

Советы для продвинутых

Я также перечислю некоторые более продвинутые функции редактора:

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

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

/ заголовок блока.

Включить полноэкранный режим

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

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

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

  • отменить последние изменения — комбинация клавиш Ctrl + Z
  • отменить изменения снова — сочетания Ctrl + Shift + Z
  • список ярлыков — открывает комбинации клавиш Ctrl + Shift + H.

 

Расширение возможностей с помощью плагинов

Установите плагин Stackable. Он предлагает набор готовых блоков и создает интересные домашние страницы.

Stackable- плагин

Плагин возможно бесплатно скачать на официальном сайте WordPress.org

Как включить старый редактор

Некоторые пользователи задаются вопросом, позволяет ли WordPress использовать предыдущий редактор TinyMCE. Да, это возможно. В этом случае Гутенберг можно отключить. Просто установите плагин WordPress Classic Editor. Старый редактор появится в Чтение

Изменится ли старый контент в новом редакторе

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

Заключение

Редактор Гутенберг WordPress всё равно полностью вытеснит старый через 2-3 года. Поэтому надо начинать пользоваться Гутенбергом уже прямо сегодня. Тем более, что он превосходит старый редактор  по функциональности

 

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

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

Читайте ранее:
блог
Блог что это такое и для чего он нужен

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

Закрыть
«Copyright © 2020 год by Mikhailov S. Все права защищены в Seneschal.ru. Запрещено любое копирование материалов сайта без письменного согласия владельца – Mikhailov S»