Перейти к содержимому
Начало работы с редактором блоков WordPress (Gutenberg) в 2026 году

Начало работы с редактором блоков WordPress (Gutenberg) в 2026 году

Erik KellerErik KellerОбновлено: 16 мин чтения469 просмотров

Что такое редактор блоков WordPress?

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

К 2026 году Гутенберг значительно эволюционировал и стал гораздо больше, чем просто редактор контента. С помощью полного редактирования сайта (FSE) он теперь управляет целыми макетами сайта, включая заголовки, подвал, шаблоны и части шаблонов. Этот гид проведет вас через все, что вам нужно знать, от базового редактирования блоков до продвинутых техник создания сайтов.

Обзор основных блоков

WordPress поставляется с более чем 90 основными блоками, организованными по категориям. Вот те, которые вы будете использовать чаще всего:

Категория Ключевые блоки Случай использования
Текст Абзац, Заголовок, Список, Цитата, Подробности Стандартное создание контента
Медиа Изображение, Галерея, Видео, Аудио, Обложка Визуальный и мультимедийный контент
Дизайн Колонки, Группа, Ряд, Стек, Пробел Макет и структура страницы
Виджеты Поиск, Навигация, Социальные иконки, Облако тегов Интерактивные и динамические элементы
Тема Название сайта, Логотип, Навигация, Цикл запросов Компоненты полного редактирования сайта
Встраивания YouTube, Twitter, Spotify, Vimeo Встраивание контента от третьих лиц

Создание контента с помощью блоков

Добавление блоков

Существует несколько способов добавления блоков в ваш контент:

  • Кнопка «Плюс» (+): Нажмите на иконку плюса в панели инструментов или между блоками, чтобы открыть вставку блоков
  • Команда Slash: Введите /, за которым следует название блока (например, /image, /heading), для быстрого вставления
  • Палитра команд: Нажмите Ctrl+K (Windows) или Cmd+K (Mac), чтобы найти любой блок или действие
  • Перетаскивание: Перетащите блоки из панели вставки прямо на холст

Настройка блоков

Каждый блок имеет две области настройки:

  1. Панель инструментов: Появляется над выбранным блоком с общими действиями (выравнивание, жирный, курсив, ссылка)
  2. Боковая панель: Предоставляет детальные настройки, включая цвета, типографику, отступы и расширенные параметры

Организация блоков

Упорядочите ваш контент, перемещая блоки вверх или вниз с помощью стрелок в панели инструментов блока или перетаскивая их на новое место. Вы также можете использовать панель представления списка (Shift+Alt+O), чтобы увидеть всю структуру вашего документа и перетаскивать блоки внутри дерева.

Повторно используемые блоки (Синхронизированные шаблоны)

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

Распространенные случаи использования синхронизированных шаблонов:

  • Секции призыва к действию, которые появляются на нескольких страницах
  • Блоки биографии автора, используемые в записях блога
  • Стандартизированные уведомления об отказе от ответственности или раскрытии информации об аффилированных лицах
  • Формы подписки на рассылку
  • Блоки контактной информации

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

Шаблоны блоков

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

Встроенные шаблоны

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

Каталог шаблонов WordPress.org

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

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

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

Основы полного редактирования сайта

Полное редактирование сайта (FSE) расширяет редактирование блоков за пределы контента записей и страниц на всю структуру вашего сайта. С помощью блочной темы вы можете редактировать:

  • Шаблоны: Управляйте макетом конкретных типов страниц (одиночная запись, архив, 404, результаты поиска)
  • Части шаблонов: Редактируйте повторно используемые секции, такие как заголовки и подвал
  • Глобальные стили: Устанавливайте цвета и типографику для всего сайта
    • Навигация: Создавайте и управляйте меню визуально

    Доступ к редактору сайта

    Перейдите в Внешний вид → Редактор в вашей панели управления WordPress. Это откроет редактор сайта, где вы можете просматривать шаблоны, редактировать части шаблонов и настраивать глобальные стили. Обратите внимание, что FSE требует блочного шаблона — классические темы используют традиционный настраиватель.

    Шаблоны и части шаблонов

    Концепция Что она контролирует Пример
    Шаблон Полная разметка страницы для типа контента Единичный пост, Страница, Архив, 404
    Часть шаблона Повторно используемый раздел внутри шаблонов Заголовок, Подвал, Боковая панель

    Настройка блоков с помощью theme.json

    Файл theme.json является центром конфигурации для блочных тем. Он контролирует:

    • Цветовые палитры и градиенты, доступные в редакторе
    • Предустановки типографики (семейства шрифтов, размеры, высоты строк)
    • Масштабы отступов и ширины макета
    • Какие функции блоков включены или отключены
    • Стандартные стили для конкретных блоков

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

    Сочетания клавиш

    Изучение сочетаний клавиш значительно ускоряет ваш рабочий процесс редактирования:

    Действие Windows / Linux Mac
    Добавить новый блок / (слэш) / (слэш)
    Командная палитра Ctrl + K Cmd + K
    Дублировать блок Ctrl + Shift + D Cmd + Shift + D
    Удалить блок Shift + Alt + Z Ctrl + Option + Z
    Открыть представление списка Shift + Alt + O Ctrl + Option + O
    Переключить вставку блока Ctrl + Shift + , Cmd + Shift + ,
    Сохранить черновик / Обновить Ctrl + S Cmd + S
    Отменить Ctrl + Z Cmd + Z
    Вставить ссылку Ctrl + K Cmd + K

    Gutenberg против классического редактора

    Некоторые пользователи WordPress все еще предпочитают плагин Classic Editor. Вот как они сравниваются:

    Аспект Gutenberg Классический редактор
    Подход к редактированию Блочный, модульный Единая текстовая область (TinyMCE)
    Возможности макета Столбцы, сетки, секции на всю ширину Только линейный контент
    Обработка медиа Встраиваемые галереи, обложки, медиа+текст Базовая вставка медиа
    Совместимость с будущими версиями Активно разрабатывается, поддержка FSE Только режим обслуживания
    Поддержка плагинов/тем Растущая экосистема блоков Снижение нового развития

    Плагин Classic Editor все еще поддерживается, но разработка WordPress полностью сосредоточена на редакторе блоков. Новые функции, темы и плагины все чаще нацелены на Gutenberg в первую очередь.

    Плагины блоков, которые расширяют Gutenberg

    Хотя основные блоки покрывают большинство потребностей, эти плагины добавляют специализированный функционал:

    • Плагин Flavor: Добавляет расширенные блоки, такие как вкладки, аккордеоны, таблицы цен и карусели постов
    • Плагин Flavor: Предоставляет блоки, ориентированные на контент, для улучшения процесса написания — индикаторы прогресса, клики для твита, оповещения
    • Плагин Flavor: Предлагает блоки, ориентированные на дизайн, с анимацией и расширенными параметрами стилизации
    • Плагин Flavor: Расширяет Gutenberg блоками, специально разработанными для тем FSE
    • Плагин Flavor: Добавляет блоки запросов и фильтров для динамического отображения контента

    При выборе плагинов блоков выбирайте те, которые соответствуют стандартам кодирования WordPress и генерируют чистую разметку. Избегайте плагинов, которые загружают тяжелые JavaScript-фреймворки, так как они сводят на нет преимущества производительности Gutenberg.

    Практические советы для эффективного редактирования блоков

    Используйте режим списка

    Для сложных страниц режим списка (Shift+Alt+O) является необходимым. Он показывает всю структуру вашего документа в виде дерева, что упрощает выбор вложенных блоков, изменение порядка разделов и понимание иерархии вашей страницы.

    Группируйте блоки для массовых действий

    Выберите несколько блоков (кликните первый, Shift+кликните последний) и сгруппируйте их. Группированные блоки можно стилизовать вместе, перемещать как единое целое и преобразовывать в шаблоны. Это особенно полезно для создания согласованных разделов.

    Блокируйте блоки, чтобы предотвратить случайные изменения

    Заблокируйте важные блоки, чтобы предотвратить случайное перемещение или удаление. Щелкните правой кнопкой мыши по блоку и выберите "Заблокировать", чтобы ограничить изменения. Это полезно для шаблонов или контента, управляемого несколькими редакторами.

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

    Разница между эффективным и медленным редактированием блоков часто сводится к сочетаниям клавиш. Сначала выучите пять самых распространенных сочетаний (команда слэш, дублирование, удаление, сохранение, отмена), затем расширяйте свой репертуар, когда почувствуете себя комфортно.

    Для сравнения с Elementor и другими конструкторами страниц смотрите наше сравнение Elementor и Gutenberg и наш более широкий гид по сравнению конструкторов страниц. Если вы выбираете тему, которая хорошо работает с Gutenberg, прочитайте наш гид по выбору темы.

    Часто задаваемые вопросы

    Могу ли я все еще использовать Classic Editor?

    Да. Плагин Classic Editor по-прежнему доступен и поддерживается командой WordPress. Однако он получает только обновления для обслуживания — никаких новых функций. WordPress рекомендует перейти на редактор блоков для доступа к современным функциям и продолжающейся разработке.

    Работает ли Gutenberg со всеми темами WordPress?

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

    Как мне преобразовать содержимое Classic Editor в блоки?

    Когда вы открываете пост Classic Editor в Gutenberg, WordPress оборачивает содержимое в классический блок. Вы можете нажать "Преобразовать в блоки", чтобы преобразовать содержимое в отдельные блоки. Проверьте преобразование позже, так как сложные макеты могут потребовать ручной корректировки.

    Являются ли страницы Gutenberg медленнее, чем страницы Classic Editor?

    Нет. Gutenberg генерирует чистый HTML, который сопоставим или даже легче, чем вывод Classic Editor. Редактор блоков не добавляет значительных накладных расходов на фронтенде. Сам интерфейс редактора (в админке) использует больше ресурсов, чем Classic Editor, но это не влияет на то, что видят посетители.

    Могу ли я создавать пользовательские блоки без кодирования?

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

    Что такое синхронизированные шаблоны и чем они отличаются от обычных шаблонов?

    Синхронизированные шаблоны (ранее многоразовые блоки) связаны во всех своих экземплярах. Изменение одного обновляет все. Обычные шаблоны являются шаблонами — вставка одного создает независимую копию, которую вы можете изменить, не затрагивая другие использования. Используйте синхронизированные шаблоны для контента, который должен быть единообразным повсюду (CTA, отказ от ответственности). Используйте обычные шаблоны для макетов, которые вы хотите использовать в качестве отправных точек.

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

    Общие решения включают: очистку кэша браузера, деактивацию плагинов по одному для выявления конфликтов, временный переход на стандартную тему и проверку консоли разработчика вашего браузера на наличие ошибок JavaScript. Большинство проблем с редактором блоков возникает из-за конфликтов плагинов, а не из-за проблем с ядром.

    Готово ли полное редактирование сайта к производственному использованию?

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

    Найдите тему WordPress, готовую к блокам

    Просмотрите премиум темы WordPress, оптимизированные для Gutenberg и полного редактирования сайта. Чистый код, высокая производительность и профессиональный дизайн.

    Просмотреть темы →

Часто задаваемые вопросы

Заменяет ли Gutenberg конструкторы страниц, такие как Elementor?
Gutenberg продолжает развиваться с возможностями полного редактирования сайта, но конструкторы страниц, такие как Elementor, по-прежнему предлагают более продвинутые варианты дизайна и экосистемы виджетов. Многие пользователи используют оба инструмента: Gutenberg для редактирования контента и конструктор страниц для сложных макетов.
Могу ли я отключить Gutenberg и использовать Classic Editor?
Да. Установите плагин Classic Editor с WordPress.org, чтобы вернуться к предыдущему опыту редактирования. WordPress обязался поддерживать плагин Classic Editor как минимум до конца 2024 года, и он продолжает получать обновления.
Что такое повторно используемые блоки и как их использовать?
Повторно используемые блоки (теперь называемые синхронизированными шаблонами) позволяют вам сохранить блок или группу блоков для повторного использования на нескольких записях и страницах. Изменения в синхронизированном шаблоне обновляются везде, где он используется. Создайте один, выбрав блок, нажав на меню с тремя точками и выбрав Создать шаблон.
Как добавить пользовательский CSS к конкретному блоку Gutenberg?
Выберите блок, откройте панель Дополнительно в боковой панели и добавьте класс CSS. Затем добавьте свой пользовательский CSS, нацеливаясь на этот класс в разделе Дополнительный CSS в настройках или в таблице стилей вашей темы.
Что такое полное редактирование сайта в WordPress?
Полное редактирование сайта (FSE) расширяет возможности Gutenberg за пределы контента постов, позволяя вам проектировать весь сайт, включая заголовки, подвал, боковые панели и файлы шаблонов, используя блоки. Это требует темы блоков и доступно через Внешний вид, Редактор.

Поделиться публикацией

Об Авторе

Erik Keller
Erik Keller

Эксперт по WordPress

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

WordPressWooCommerceРазработка темРазработка плагиновОптимизация производительности

Будьте в Курсе

Получайте последние советы и уроки по WordPress на свою почту.