Встроенный в WordPress визуальный редактор сайта называется Gutenberg. В нём вы будете создавать из блоков страницы, статьи и виджеты. В статье рассказываем, как устроен Gutenberg и как в нём работать.
Базовые действия с публикацией
Прежде, чем начать работать с блоками, следует научиться выполнять базовые действия с публикацией: сохранять изменения, восстанавливать предыдущие версии, открывать предварительный просмотр и другие глобально важные вещи.
Вход/выход из редактора
Чтобы войти в редактор блоков, перейдите в раздел «Страницы» или «Записи», наведите курсор на любую публикацию и выберите «Редактировать».
Чтобы выйти из редактора блоков и вернуться в консоль, нажмите в левом верхнем углу на иконку сайта или логотип WordPress (если вы ещё не загружали иконку).
Сохранение изменений
Чтобы сохранить изменения, в верхнем правом углу есть кнопка «Обновить» (или «Опубликовать», пока страница/запись еще не опубликована). При нажатии этой кнопки изменения увидят все посетители сайта. До этого они будут видны только вам в редакторе.
Предварительный просмотр сайта
Слева от кнопки «Обновить» расположена кнопка в виде ноутбука. Это версии сайта для разных устройств. По умолчанию будет активна версия для компьютеров, есть также версия для планшетов и смартфонов. Полезный режим, чтобы проверить, как сайт выглядит на разных экранах, прежде чем публиковать изменения.
Кнопка «Предварительный просмотр в новой вкладке» позволяет просмотреть изменения непосредственно глазами посетителя. Это более реалистичный просмотр, чем в редакторе. Иногда в редакторе контент не помещается из-за небольших полей по бокам, хотя непосредственно на сайте всё выглядит нормально.
Боковые панели
Также слева от кнопки «Обновить» расположены переключатели боковых панелей. Сначала здесь будет только одна панель, но разные плагины или темы могут добавлять дополнительные.
Главная боковая панель редактора имеет квадратную иконку. На этой панели находятся основные настройки. Вкладка «Страница» — основные параметры публикации, вкладка «Блок» — параметры любого блока, который вы выберите в рабочей зоне.
Боковая панель с иконкой «A» — это боковая панель темы «Astra». На ней можно изменить некоторые глобальные настройки только для выбранной публикации: выбрать другой макет, включить или выключить боковую колонку, выключить шапку или подвал.
Тема Astra — одна из самых популярных в WordPress. У нее более миллиона активных установок и активные разработчики, давно развивающие этот продукт и даже выпускающие для него различные расширения.
Статья на тему 👀
Обзор темы «Astra»
Боковая панель с иконкой «S» на скриншоте — это боковая панель плагина «Specta». На ней можно сохранить CSS-код, который будет распространяться только на выбранную публикацию.
Плагин «Spectra» — это инструмент от разработчиков темы «Astra», который добавляет в редактор WordPress более 30 дополнительных блоков, очень расширяющих возможности по созданию сайта.
Статья на тему 👀
Обзор плагина «Specta Legacy»
Предыдущие версии публикации
Одна из важнейших опций на главной боковой панели — «Редакции». Это предварительные версии вашей страницы. Каждый раз при нажатии кнопки «Сохранить» сохраняется новая редакция.
Чтобы восстановить предыдущую редакцию, найдите её на шкале сверху и нажмите «Восстановить». Под шкалой отображается, что было удалено и добавлено в той или иной редакции. Когда закончите, выйти отсюда можно с помощью кнопки «Перейти в редактор» вверху.
Ещё у WordPress есть автоматическое сохранение изменений. Оно происходит раз в минуту. Если проследить за кнопкой «Обновить», вы заметите, что раз в минуту она становится серой и не кликабельной. Это и есть момент автосохранения.
Если обновить вкладку после автосохранения, сверху появится жёлтая подсказка, которая ведёт в раздел с редакциями, чтобы восстановить автоматически сохранённые изменения.
URL-адрес публикации
Ещё одна важная опция на главной боковой панели WordPress — «Ссылка». Она позволяет изменить часть ссылки на страницу, которая идёт после домена. Обычно после создания новой публикации в этой опции будут являться цифры или слова из заголовка. Чтобы это изменить, кликните на текущий URL и укажите свой вариант, например blog или contact.
Опция «Ссылка» будет некликабельной для главной страницы сайта, потому что URL этой страницы всегда чисто домен, без дополнительных символов.
Главную страницу нужно назначать отдельно в настройках платформы. Это делается в разделе «Настройки – Чтение». Первая же опция в этом разделе — «Ваша домашняя страница отображает». Выберите вариант «Статическая страница», а затем необходимую страницу из выпадающего списка.
Базовые действия с блоками
В редакторе боков есть три зоны, с помощью которых вы будете взаимодействовать с наполнением ваших страниц: на верхней панели, на главной боковой панели справа и на всплывающей панели над выбранным блоком.
Сначала рассмотрим первую зону — верхнюю панель. В ней можно добавить новый блок, восстановить или повторить действие и просмотреть все блоки на странице в виде списка.
Добавление нового блока
Чтобы добавить новый блок, нужно нажать кнопку с плюсом в левом верхнем углу верхней панели. После этого откроется боковая панель с блоками. С нее можно вручную перетаскивать блоки на нужное место, а можно нажать на нужный блок, после чего он прибавится под блоком, который будет выбран в редакторе в этот момент.
Также кнопка для добавления блоков будет отображаться прямо в рабочей зоне редактора. Если на нее нажать, появится более компактная панель с часто используемыми блоками. При нажатии кнопки «Просмотреть все» откроется полная боковая панель.
Отмена/повторение действий
Стрелка назад отменяет действие, стрелка вперед – повторяет. Также работают стандартные комбинации клавиш Ctrl+Z и Ctrl+Shift+Z.
По умолчанию WordPress запоминает 100 действий. Если нужно вернуться более чем на 100 действий назад, нужно возобновлять предыдущую редакцию.
Обзор документа
Это боковая панель со списком всех блоков на странице и их иерархией. Супер полезная опция, чтобы быстро найти нужный блок, удалить его, переместить, дублировать или просто выбрать для редактирования. Такая потребность может возникнуть, потому что каждая секция обычно состоит из множества блоков и выбрать нужный блок мышкой не всегда бывает удобно.
Чтобы находить блоки было легче, вы можете переименовать контейнеры, чтобы они имели название соответствующей секции. Например, «Титульный баннер», «Блок с преимуществами», «Отзывы» и т.д. Для этого нажмите у нужного блока три точки и выберите из списка «Переименовать».
Параметры блоков
Редактирование блоков происходит во второй зоне редактора – на основной боковой панели WordPress. Она работает так: вы выбираете любой блок в рабочей зоне, после чего на боковой панели отображаются его параметры.
Параметры блоков будут расположены на одной или двух вкладках (в зависимости от блока). Например, в простых текстовых блоках, таких как заголовок, параграф или список, все опции размещаются на одной вкладке. У некоторых других блоков опций будет больше, поэтому они будут присутствовать на двух вкладках: «Настройки» и «Стили».
Некоторые настройки со старта могут быть скрыты. Чтобы их включить, нажмите на три точки рядом с названием раздела и увидите список всех имеющихся опций. При нажатии на опцию она добавляется на боковую панель.
К примеру, в разделе «Цвет» по умолчанию есть две опции: «Текст» и «Фон». Но есть также скрытая опция – «Ссылка».
Большинство реально полезных опций всегда отображается сразу. Единственное исключение — это отступы. Они обычно скрыты и находятся в разделе «Размеры».
По умолчанию отступы указываются с помощью бегунков. Но если нажать иконку с настройками, появится поле, в котором можно вручную ввести цифру с нужным размером.
Остаётся рассмотреть третью зону для работы с блоками — всплывающую панель над выбранным вами блоком. На ней можно найти различные общие служебные опции типа изменить ширину блока, переместить, скопировать, дублировать, удалить и т.д.
Перемещение блоков
С помощью стрелок можно легко сдвинуть блок на один уровень выше или ниже. К примеру, так можно двигать целые секции. Или двигать местами колонки.
Также есть альтернативный вариант для перемещения блоков — точки. За них можно взять блок мышкой и перетащить в нужное место. То, куда он приземлится, отличается синей линией.
Изменение ширины блоков
Если вам понадобится изменить ширину блока — например, растянуть его во весь экран — это делается с помощью опции «Выровнять» верхней панели. Она будет не у всех блоков, но у большинства.
Удаление/дублирование/копирование блоков
Все подобные служебные действия находятся в меню скорых действий с блоками. Чтобы открыть его, нажмите три точки на всплывающей панели справа. После этого появится список доступных опций.
Лайфхаки для работы в Gutenberg
В этой главе будет несколько советов, которые помогут использовать редактор WordPress на более высоком уровне.
1. Используйте / для быстрого добавления новых блоков.
Так вам не придется каждый раз открывать панель с блоками и прокручивать ее, чтобы найти нужный. Просто введите с новой строки косу риска/ и начните вводить название блока. По ходу ввода во всплывающем окне будут появляться варианты. Когда вы увидите нужный, выберите его с помощью стрелок на клавиатуре и нажмите «Enter».
2. Закрепите всплывающую панель с параметрами блока
Иногда всплывающая панель перекрывает содержимое в вышестоящем блоке. Если вам это не нравится, ее можно закрепить на отдельной строчке под верхней панелью Gutenberg. Для этого нажмите на верхней панели справа троеточие и щелкните по первой же опции «Верхняя панель инструментов».
3. Используйте редактор кода для редактирования содержимого в формате HTML
Так вы сможете отредактировать HTML атрибуты блока, предоставить свой CSS-класс или написать для блока встроенный код. Чтобы перейти в такой режим, выберите блок, щелкните три точки на всплывающей панели справа и выберите опцию «Редактировать как HTML».
Также можно включить редактор кода сразу для всех блоков. Для этого щелкните по тройке на верхней панели Gutenberg вправо и выберите опцию «Редактор кода».
4. Добавьте якорную ссылку на любой блок
Так вы сможете создать оглавление в статье, верхнее меню на лендинге или просто ссылку на конкретное место в любой публикации. Просто выберите нужный блок и заполните опцию «HTML-якорь» на боковой панели в разделе «Дополнительно».
Заполнять лучше латинскими буквами. После этого, HTML-якорь нужно добавить к ссылке со знаком #. К примеру, https://vashdomen.com/#vidguky .
5. Быстро найдите нужный блок с помощью содержания
Это удобно, если у вас в публикации есть секции, в которых много вложенных блоков и не получается выбрать нужный, например колонку таблицы. В этом случае нажмите на верхней панели Gutenberg влево кнопку с тремя горизонтальными полосками и выберите нужный блок в содержимом, который появится на боковой панели.
6. Перетаскивайте изображение в редактор прямо с компьютера
Так вам не придется каждый раз добавлять блок «Изображение» и нажимать дополнительные кнопки. А синяя линия поможет разместить картинку сразу в нужном месте.
7. Используйте горячие клавиши
Работать в редакторе записей WordPress станет гораздо проще, если вы запомните простые комбинации клавиш для популярных действий:
- Ctrl+S – сохранить публикацию;
- Ctrl+Z – отменить действие;
- Ctrl+Shift+Z — повторить отмененное действие;
- Ctrl+K — вставить ссылку на выделенный текст;
- Ctrl+Shift+K — Удалить ссылку;
- Ctrl+Shift+D — дублировать выбранный блок;
- Ctrl + Shift + , — показать/скрыть боковую панель;
- Ctrl+Alt+T — добавить новый блок перед выбранным блоком;
- Ctrl+Alt+Y — добавление нового блока после выбранного блока.
Если у вас Mac, замените Ctrl на Command(⌘), а Alt на Option(⌥).
Также вы откроете полный список горячих клавиш, если вы нажмете следующую комбинацию:
- Shift + Alt + H – для Windows;
- Control (⌃) Option (⌥) + H для Mac.
Альтернативный способ открыть список горячих клавиш – нажать на тройку на верхней панели Gutenberg и во всплывающем окне выбрать опцию «Горячие клавиши».
Что дальше
Надеемся, что эта статья помогла вам разобраться с тем, как работает редактор блоков WordPress. Если у вас остаются вопросы, задайте их в комментариях к этой статье и мы постараемся ответить.
Следующим шагом после знакомства с редактором будет создание первых секций или страниц. У нас есть отдельная статья на эту тему, где процесс описан через простой, но эффективный принцип построения секций, который мы называем «Принцип 3К».
Статья на тему 👀
Как создавать секции в WordPress