Начиная с WordPress 5.0, пользователи этой системы CMS имеют новый редактор для создания веб-контента. При создании сайта используется так называемый блоки. Отдельные блоки можно редактировать. В следующем уроке мы поговорим о том, как использовать редактор Gutenberg для создания контента веб-сайта.
Что такое Гутенберг?
Gutenberg — новый редактор по умолчанию для WordPress . Он работает по другому принципу, чем редактор TinyMCE, использовавшийся до сих пор. Он предлагает совершенно новый опыт веб-дизайна, создавая блоки с использованием блоков. В отдельных блоках можно работать с текстом как в текстовом редакторе.
Блоки можно перемещать и группировать на странице в соответствии с конкретными идеями пользователя. Благодаря Гутенбергу у пользователя есть возможность лучше настроить внешний вид и макет страницы.
Что такое блок?
Блоки — это фрагменты контента на странице . Вы можете создать блок для текста, виджетов, изображений, видео, цитат и тому подобного. С каждым блоком можно продолжить работу. Преимуществом создания веб-сайта является функция перетаскивания , с помощью которой можно легко перемещать блоки.
Как создать страницу в редакторе Gutenberg
Чтобы создать новую страницу, перейдите в Страницы ›Добавить новую в администрировании страницы. Откроется следующая страница:
Напишите заголовок в отображаемом блоке. Вы также найдете возможность редактировать сервис сайта . Вы можете отредактировать слаг в любое время, нажав на заголовок. Просто нажмите кнопку «Изменить» рядом с URL-адресом страницы.
Создание блоков
После ввода заголовка вы можете добавить дополнительный текст в предустановленный блок ввода текста или вставить свой собственный блок. Для этого нажмите на значок плюса:
. Здесь вы можете выбрать тип контента, который хотите добавить.
В моем примере я решил добавить абзац. В блоке абзаца вы найдете параметры шрифта, выравнивание и значок для вставки ссылки. В конце панели инструментов редактирования блока вы найдете кнопку для дополнительных параметров редактирования.
. Например, вы можете использовать его, чтобы скрыть настройки блока, дублировать, редактировать как HTML, добавлять в повторно используемые блоки и удалять блок.
Вы можете найти больше вариантов текста в правой части экрана . Доступны настройки шрифта. Вы можете выбрать размер шрифта из нескольких предустановленных вариантов или установить свой собственный. Вы также можете выбрать цвет фона, цвет текста или установить собственные дополнительные настройки.
Возможности редактирования блоков непосредственно над блоком, а также в правой части экрана различаются в зависимости от отдельных типов блоков.
Изменить тип блока
Вы можете изменить тип блока в любой момент при создании страницы. Вы делаете это, нажав на первую кнопку над активным блоком. Здесь всегда отображается символ активного типа блока. После нажатия появится список блоков, из которых можно выбрать.
Типы блоков
При создании страниц доступно несколько типов блоков. Они расположены в виде четкого списка, который разделен на несколько частей:
Наиболее используемые — здесь отображаются наиболее часто используемые типы блоков, такие как абзац, изображение, галерея и т.п.
Прямые элементы — есть блок прямого изображения.
Общие блоки — здесь вы найдете блоки для изображений, видео, файлов, списков, ссылок и других часто используемых частей страницы.
Форматирование — позволяет добавлять форматированный контент, такой как таблица, код, пользовательский HTML, а также блок в классическом текстовом редакторе WordPress.
Элементы макета — здесь вы найдете блоки для разрывов страниц, кнопок, столбцов или блок с заранее созданным макетом для мультимедиа и текста.
Виджеты — благодаря доступным опциям вы можете добавлять шорткоды, категории, список последних комментариев и тому подобное.
Встроенный — позволяет встраивать внешний контент, такой как YouTube, Twitter, Instagram, Facebook и другой контент.
Как создать базовый макет на странице
Начнем с простой страницы. Достаточно, если у него есть заголовок, текст, изображение, маркированный список и галерея изображений.
Добавить текст
После ввода названия просто начните писать в предустановленном блоке. Гутенберг создает отдельный блок для каждого абзаца. Вам не нужно каждый раз добавлять его на страницу. Все, что вам нужно сделать, это нажать Enter. Новый блок абзаца создается сам по себе.
Добавить изображение
Чтобы добавить изображение, выберите соответствующий блок из списка блоков. Список блоков отображается при нажатии на изображение значка плюса в левом верхнем углу экрана. Вы можете выбрать изображение из медиатеки или загрузить его на страницу.
Он появится в макете страницы, как только будет загружен. В правой части экрана задайте размер изображения, заполните альтернативный текст или вставьте ссылку.
Добавить маркированный список
Выберите нужный блок из списка. При редактировании текста у вас также есть возможность выбрать нумерованный список, вставить ссылку и т. д.
Добавить галерею изображений
Выберите блок для галереи из списка блоков. Затем загрузите фотографии. В блоке галереи можно настроить выравнивание, вставить или удалить изображение. В правой части экрана вы найдете функции для установки количества колонок и обрезки изображений в галерее.
Как перемещать блоки
Отдельные блоки можно перемещать по странице. Необходимые кнопки появляются при наведении курсора на блок, который нужно переместить. Есть две стрелки вверх и вниз для перемещения. Они всегда перемещают выбранный блок на одну позицию выше или ниже. Между стрелками вы найдете значок функции перетаскивания.
. При наведении на него мышки появится рука, которой можно просто зажать блок и переместить его в нужное место.
Как повторно использовать созданные блоки
Если вы создали блок, который хотите использовать позже, щелкните значок «Дополнительные параметры». Вы найдете его в меню функций в верхней части блока. Выберите здесь «Добавить в повторно используемые блоки ».
Таким образом, вы будете иметь доступ к созданным блокам каждый раз, когда будете создавать новый пост. Сохраненные блоки отображаются в списке типов блоков в разделе Многоразовые . Ими тоже можно управлять. Вы можете преобразовать их обратно в обычный блок или удалить из меню.
Дополнительные возможности
Есть еще несколько удобных функций для создания страниц или статей. Во-первых, давайте посмотрим на кнопки в верхней части страницы.
О первой из икон я уже упоминал. Используется для добавления блока на страницу.
Стрелки назад и вперед изображать не нужно — они перенесут вас на один шаг вперед или назад.
i — здесь вы можете увидеть структуру контента.
Интересную функцию предлагает последняя кнопка- блок навигации . Помимо отображения порядка отдельных блоков, он также используется для быстрого перехода к выбранному блоку.
Дополнительные функции вы найдете в правой части страницы. Возможно, вы уже знаете некоторые из предыдущих работ с WordPress. Другие новые.
Документ — позволяет получить доступ к настройкам документа, таким как редактирование URL-адреса страницы, добавление иллюстративного изображения и включение комментариев. Присвоение категорий и тегов также доступно на странице публикации. Вы также можете добавить текст для резюме.
Блок — о некоторых функциях этой кнопки я уже упоминал выше в разделе Создание блоков. Они различаются в зависимости от выбранного типа блока.
Предварительный просмотр — кнопка предварительного просмотра отображает предварительный просмотр страницы или сообщения в реальном времени.
Опубликовать — используйте эту кнопку, чтобы опубликовать страницу. Если вы редактируете существующую страницу, вместо кнопки «Опубликовать» появляется кнопка «Обновить».
Постоянная ссылка — отредактируйте здесь текстовую часть URL-адреса.
Свойства страницы — используются для настройки шаблона страницы и назначения родительской страницы.
Показать больше инструментов и параметров — последняя кнопка в правом верхнем углу страницы Показать больше инструментов и параметров . Вот некоторые функции, такие как режим прожектора, которые помогут вам сосредоточиться на содержимом определенного блока при создании страницы.
Вы также найдете переключение между визуальным редактором и редактором кода, а также полноэкранный режим. Кроме того, вы найдете сочетания клавиш, возможность управлять повторно используемыми блоками и другие параметры настройки страницы.
Расширенные советы
Также упомяну еще несколько продвинутых функций редактора:
Быстрое создание блока
Вы можете облегчить себе работу, чтобы вам не приходилось постоянно искать определенный блок в списке. Все, что вам нужно сделать, это ввести косую черту и первые буквы имени блока в предустановленном блоке :
/názov bloku
Как только вы начнете печатать, вы увидите список подходящих вариантов.
Редактирование исходного кода
Вы можете редактировать исходный код страницы на каждом этапе ее создания. Вы можете сделать это, нажав на иконку . Ищите вариант редактора кода здесь.
Активировать полноэкранный режим
В редакторе Гутенберга можно работать, не отвлекаясь на лишнее, предлагая меню страниц. Прокрутите страницу в правый верхний угол и нажмите . Здесь вы найдете функцию полноэкранного режима. Вы также можете выбрать режим Spotlight, чтобы еще лучше сфокусироваться на определенном блоке.
Использование сочетаний клавиш
Gutenberg позволяет использовать множество специальных сочетаний клавиш в дополнение к обычным сочетаниям клавиш. Например:
- Показать или скрыть настройки боковой панели Ctrl + Shift +
- отменить последние изменения Ctrl + Z
- повторно внести отмененные изменения Ctrl + Shift + Z
Используйте Ctrl + Shift + H, чтобы открыть список ярлыков.
Расширение возможностей с помощью плагинов
Чтобы расширить возможности дизайна, установите один из плагинов Gutenberg. Плагин Stackable , например, предлагает набор заранее подготовленных блоков. Вы создадите интересные главные страницы. Otter Blocks также является отличным плагином. Создавайте блоки, такие как цены, карты Google и многое другое.
Вот несколько ответов на часто задаваемые вопросы
Что, если я не хочу использовать Гутенберг?
Некоторые пользователи спрашивают, позволяет ли WordPress использовать предыдущий редактор TinyMCE. Да, это возможно. В этом случае Гутенберг можно деактивировать. Все, что вам нужно сделать, это установить плагин WordPress Classic Editor .
Изменится ли старый контент?
Весь контент, который у вас уже есть на сайте, останется без изменений. Гутенберг помещает определенную страницу или статью в один блок. Гутенберг доступен для этой цели так называемый классический блок. Это позволяет работать с исходным контентом, как в классическом редакторе TinyMCE.
Вы можете просто редактировать исходный контент в классическом блоке или преобразовать его в блоки . Вы найдете нужную функцию под значком «Дополнительные параметры». . Вы также можете работать с контентом, как если бы вы создали его в блочном редакторе.
