Блочный редактор WordPress иногда называют неудобным те, кто привык к старому текстовому полю с кнопками как в офисном редакторе. Но после пары часов практики большинство наших клиентов признаёт: собирать страницы из блоков быстрее и нагляднее, а результат на сайте совпадает с тем, что видишь в админке. Это руководство написано для владельцев сайтов и контент-менеджеров, которые хотят уверенно редактировать страницы сами, не вызывая разработчика ради каждой новой кнопки.
Главная идея: страница как набор кирпичиков
В блочном редакторе любая страница состоит из отдельных элементов — блоков. Абзац — это блок, заголовок — блок, картинка, кнопка, таблица, цитата, видео тоже блоки. Каждый блок имеет свои настройки, его можно переместить, скопировать, сгруппировать с другими или удалить, не затрагивая остальной текст.
Блоки бывают простые и контейнерные. Контейнерные — «Группа», «Колонки», «Строка», «Обложка» — содержат внутри другие блоки и позволяют строить раскладку: например, текст слева и фото справа или три карточки преимуществ в ряд.
Интерфейс за пять минут
Экран редактора состоит из трёх зон, и полезно сразу запомнить, что где находится.
- Верхняя панель. Кнопка добавления блока, отмена и повтор, переключатель режима выбора и редактирования, обзор структуры страницы, а справа — сохранение черновика, предпросмотр и публикация.
- Рабочая область. Здесь находится сам контент. При клике на блок над ним появляется небольшая панель инструментов: тип блока, выравнивание, жирный и курсив, ссылка, меню с дополнительными действиями.
- Боковая панель настроек. Две вкладки: настройки всей страницы (адрес, рубрика, миниатюра, шаблон) и настройки выделенного блока (цвета, отступы, размер шрифта, дополнительные классы).
Если боковой панели не видно, её открывает значок шестерёнки в правом верхнем углу.
Пять приёмов, которые экономят часы
Косая черта для быстрого добавления
В пустом абзаце наберите символ «/» и начните писать название блока: «/заг» — заголовок, «/изоб» — изображение, «/кноп» — кнопки. Нажмите Enter, и блок появится без поиска по меню.
Обзор структуры
Кнопка со списком в верхней панели показывает дерево блоков страницы. На длинных страницах это лучший способ найти нужный блок, понять вложенность колонок и перетащить элемент в другое место.
Вставка из документа
Текст, скопированный из текстового редактора, автоматически разбивается на абзацы, заголовки и списки. Но вместе с ним могут прийти лишние стили. Если после вставки текст выглядит странно, используйте вставку без форматирования, а заголовки расставьте вручную.
Преобразование блоков
Клик по значку типа блока на панели инструментов позволяет превратить абзац в заголовок, список в абзацы, несколько картинок в галерею, а группу блоков — в колонки. Не нужно удалять и создавать заново.
Горячие клавиши
Самые полезные: дублирование блока, удаление блока, вставка блока до или после текущего, перемещение вверх и вниз. Полный список открывается в меню редактора, его стоит один раз просмотреть.
Как собрать типовую страницу услуги
Разберём на примере, как из стандартных блоков получить аккуратную страницу без помощи программиста.
- Добавьте блок «Обложка» с фоновой фотографией, внутри — заголовок с названием услуги, короткий абзац и кнопку «Оставить заявку».
- Ниже поставьте «Колонки» на три части. В каждой колонке — значок или небольшое изображение, подзаголовок и абзац с преимуществом.
- Добавьте заголовок «Как мы работаем» и нумерованный список этапов.
- Вставьте таблицу с ценами или блок с основными тарифами.
- Добавьте раздел вопросов и ответов с помощью блока «Подробности», который раскрывается по клику.
- Завершите страницу группой с цветным фоном, призывом к действию и кнопкой.
Для каждой группы задайте одинаковые отступы в настройках, тогда страница будет выглядеть цельно. Если какие-то элементы у вас повторяются на многих страницах, их лучше превратить в паттерн.
Паттерны и синхронизированные блоки
Это две функции, которые отличают опытного пользователя от новичка.
| Инструмент | Что делает | Когда использовать |
|---|---|---|
| Паттерн | Готовая заготовка из нескольких блоков, вставляется как копия | Типовые секции: «преимущества», «этапы», «отзывы», которые на каждой странице меняются |
| Синхронизированный паттерн | Один и тот же фрагмент на многих страницах; изменили в одном месте — поменялось везде | Призыв к действию, блок с адресом и email, уведомление об акции |
| Шаблон страницы | Общий макет для типа страниц, задаётся темой | Единый вид для всех записей блога или страниц услуг |
Совет от студии: попросите разработчика при создании сайта подготовить набор паттернов в фирменном стиле. Тогда контент-менеджер сможет собирать новые страницы за полчаса из готовых секций, и сайт не потеряет единообразия.
Изображения и медиа: как не испортить скорость
Главная причина медленных страниц, которые собирают сами владельцы, — тяжёлые изображения. Пара правил снимает большую часть проблем.
- Не загружайте фотографии прямо с камеры весом в несколько мегабайт. Уменьшите их до разумного размера, чаще всего достаточно ширины в пару тысяч пикселей для полноэкранных обложек и меньше для иллюстраций в тексте.
- Всегда заполняйте альтернативный текст: он нужен для поисковиков и для людей, которые пользуются экранными дикторами.
- Используйте подходящий размер из выпадающего списка в настройках блока, а не растягивайте миниатюру.
- Видео встраивайте с видеохостинга, а не загружайте файлом в медиатеку.
Частые ошибки при работе в редакторе
- Заголовки ради размера шрифта. Заголовок H2 ставят, потому что «нужно крупнее». Структура заголовков важна для SEO и доступности, а размер текста меняется в настройках абзаца.
- Пустые абзацы для отступов. Для отступов есть блок «Разделитель пространства» и настройки отступов у групп.
- Ручное оформление цветом на каждой странице. Лучше использовать цвета из палитры темы, иначе при редизайне придётся перекрашивать всё вручную.
- Публикация без предпросмотра на смартфоне. Колонки на мобильных устройствах складываются друг под друга, и порядок может оказаться неожиданным.
- Работа прямо в опубликованной странице. Для крупных правок делайте копию страницы-черновика, а потом заменяйте содержимое.
Что делать, если блоков не хватает
Иногда стандартного набора действительно мало: нужен калькулятор, слайдер отзывов, сложная таблица сравнения. В таких случаях есть два пути. Первый — подключить библиотеку дополнительных блоков, но выбирать её нужно аккуратно, чтобы не перегрузить сайт. Второй — заказать разработку собственного блока под задачу: он будет выглядеть в фирменном стиле и не потянет за собой лишний код. Если сайт достался вам от другого подрядчика и в редакторе всё сломано, наши специалисты помогут разобраться в рамках технической поддержки.
Ревизии: как вернуть прежнюю версию
WordPress сохраняет историю изменений каждой страницы. Если после правок что-то пошло не так, откройте в боковой панели раздел ревизий: там можно сравнить две версии бок о бок и восстановить нужную в один клик. Это страховка, которая избавляет от страха что-то сломать. Учтите только, что ревизии хранятся в базе, и на очень активных сайтах их количество разумно ограничить настройкой.
Подведём итог
Блочный редактор превращает создание страниц в сборку из понятных элементов. Освойте быструю вставку через косую черту, обзор структуры и преобразование блоков, используйте колонки и группы для раскладки, паттерны — для повторяющихся секций, а синхронизированные блоки — для общего контента. Следите за весом изображений и структурой заголовков, проверяйте результат на смартфоне. При таком подходе вы сможете уверенно вести сайт сами, а разработчика звать только для действительно нестандартных задач.
