Руководства

Создание страниц на WordPress без темы — только с помощью блоков Gutenberg

  • 13 минут чтения
  • Команда Hostragons
Создание страниц на WordPress без темы — только с помощью блоков Gutenberg

Создание страниц на WordPress без использования темы, только с блоками Gutenberg — это метод быстрого, лёгкого и удобного построения страниц, при котором не нужно полагаться на тяжеловесные готовые темы и сторонние конструкторы страниц. Вместо этого используется встроенный в WordPress блоковый редактор, шаблоны блоков, части шаблонов и глобальные стили. Технически в WordPress всегда активна какая-то тема, но здесь под «без тем» понимается отделение визуального оформления от тяжёлых тем и плагинов-конструкторов, и создание дизайна исключительно с помощью блоков Gutenberg. В итоге — меньше кода, улучшенные показатели Core Web Vitals, проще поддерживать сайт, а команда контента становится менее зависима от разработчиков.

В 2026 году одной из главных задач для владельцев сайтов на WordPress является предоставление посетителям быстро загружающихся страниц, легко воспринимаемых поисковыми системами. Особенно с учётом новых возможностей Google — AI Overviews и современных поисковых интерфейсов — важны чёткая информационная архитектура, семантическая структура заголовков, высокая скорость загрузки и доверительные сигналы контента. Подход без тяжёлой темы на базе Gutenberg даёт отличную основу для удовлетворения этих требований — он избавляет от лишних шорткодов, сложных настроек темы и громоздких CSS/JavaScript файлов.

В этом руководстве с примерами и рекомендациями от блога Hostragons мы подробно рассмотрим, как создавать страницы на WordPress исключительно с блоками Gutenberg. От логики установки и создания шаблонов до настроек производительности и SEO — весь процесс будет проиллюстрирован на практике. Если у вас ещё нет сайта на WordPress, важно сначала выбрать хостинг с актуальной версией PHP и хорошей скоростью: Пакеты WordPress хостинга. А если нет домена — начните с поиска и регистрации бренда на странице: Проверка домена и регистрация.

Что значит «создание страниц на WordPress без темы»?

Под «без темы» или «theme-less» не подразумевается полное отсутствие темы в WordPress. Ядро системы, иерархия шаблонов и механизм загрузки стилей требуют наличие темы. Цель подхода — максимально отвязать визуальное оформление страницы от тяжёлых тем и управлять дизайном преимущественно через блоки Gutenberg. Для этого обычно используется лёгкая блок-тема, пустой стартовый шаблон или минималистичная тема с поддержкой Full Site Editing.

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

Для кого подходит этот подход?

  • Для бизнеса, который хочет создать корпоративный сайт, страницу услуг или лендинг.
  • Для команд контента, управляющих блогами, справочниками, документацией или информационными порталами.
  • Для владельцев сайтов, желающих снизить затраты на лицензии page builder’ов.
  • Для SEO-специалистов, стремящихся улучшить показатели Core Web Vitals.
  • Для агентств, передающих клиентам легко обновляемые проекты на WordPress.

Для проектов с электронной коммерцией, системой членства или сложным бронированием всё равно потребуются плагины. Но структуру страницы, заголовки, иконки, отзывы, прайс-листы, CTA и FAQ можно без труда собрать из блоков Gutenberg.

Почему стоит создавать страницы только с Gutenberg-блоками?

Gutenberg — это стандартный редактор WordPress, и к 2026 году он стал не просто редактором постов, а ядром системы для редактирования всего сайта. Блок-темы, шаблоны, глобальные стили, паттерны и повторно используемые блоки делают построение сайта более «родным» и ориентированным на производительность.

1. Меньше кода — быстрее загрузка страниц

Тяжёлые темы и визуальные конструкторы часто загружают на каждую страницу CSS и JavaScript, которые не используются. Например, простая страница услуги может загрузить дополнительно 800 КБ стилей и скриптов, что негативно влияет на LCP (Largest Contentful Paint) при мобильном интернете. В лёгкой Gutenberg-странице загружаются только стили нужных блоков — итоговый размер страницы заметно уменьшается. Практически хорошо оптимизированная страница на Gutenberg весит менее 1 МБ.

2. Проще поддерживать и обновлять

Структура блоков, совместимая с ядром WordPress, снижает риски при обслуживании. Если отключить плагин-конструктор, контент превращается в шорткод-хаос. В Gutenberg блоки сохраняются как есть, что облегчает перенос сайта на другую тему или обновление дизайна.

3. Меньше технической зависимости для команды контента

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

4. Чистая HTML-разметка для SEO

Правильно используемые блоки Gutenberg создают семантическую структуру с заголовками, списками, таблицами и параграфами. Это существенно облегчает поисковым системам понимание контента. Конечно, только Gutenberg не гарантирует успех в SEO, но чистый HTML, быстрая загрузка и организованная архитектура контента — отличный фундамент.

Сравнение подхода без темы на Gutenberg и классической темы с page builder

Сравнение подхода без темы на Gutenberg и классической темы с page builder
Критерий Подход без темы на Gutenberg Классическая тема + page builder
Производительность Как правило, легче и с меньшими зависимостями. Часто больше загружаемых CSS/JS файлов.
Обслуживание Совместимо с ядром WordPress, легко переносится. Необходимо следить за лицензиями и совместимостью обновлений.
Гибкость дизайна Достаточно гибко благодаря блокам, паттернам и стилям. Позволяет более детальный визуальный контроль.
Кривая обучения Естественна для пользователей WordPress. Каждый конструктор требует изучения своего интерфейса.
SEO основа Чистая HTML-разметка и быстрая загрузка — преимущество. Без правильной оптимизации код может раздуваться.
Стоимость Большинство функций входит в ядро WordPress. Могут потребоваться платные версии плагинов.

Что нужно подготовить перед началом?

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

Рекомендуемые технические требования

  • Используйте актуальную версию WordPress.
  • Выбирайте PHP версии 8.2 и выше; желательно, чтобы в панели хостинга можно было переключать версию.
  • Обновлённые версии MySQL или MariaDB на стороне базы данных.
  • Установите рабочий SSL-сертификат для HTTPS: Продукты SSL сертификатов.
  • Подключите автоматическое резервное копирование и возможность быстрого восстановления.
  • Настройте серверное кэширование и CDN: Решения веб-хостинга.

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

Пошаговое руководство: создание страницы только с блоками Gutenberg

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

Шаг 1: Выберите лёгкую блок-тему или стартовую тему

Первое решение в подходе без темы — подобрать минимальную тему. Twenty Twenty-Four или похожие блок-темы с поддержкой Full Site Editing подойдут идеально. Для агентств можно использовать пустой блоковый каркас. Важно, чтобы тема не содержала лишних слайдеров, иконок, анимаций и сложных панелей.

При выборе задайте себе вопросы: Поддерживает ли тема блоки Gutenberg «из коробки»? Можно ли управлять цветами и типографикой через глобальные стили? Доступно ли редактирование частей шаблонов? Не добавляет ли тема лишних ресурсов при загрузке? Если ответ на какой-то вопрос отрицательный — ищите более простое решение.

Шаг 2: Определите глобальную стилистику

Создавать страницы блоками — не значит хаотично менять оформление. Сначала задайте стиль: например, для корпоративного сайта достаточно двух основных цветов, одного акцентного, двух весов шрифта, трёх размеров заголовков и стандартных отступов. Настройте это в разделе «Стили» редактора сайта, чтобы сохранить единообразие на всех страницах.

  • H1 должен использоваться только один раз и чётко отражать главную тему страницы.
  • H2 обозначает основные разделы, H3 — подзаголовки и детали.
  • Цвета кнопок должны иметь достаточный контраст с фоном.
  • Отступы между блоками на мобильных устройствах — в диапазоне 24–48 пикселей.

Шаг 3: Стройте структуру страницы с акцентом на контент

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

В Gutenberg создавайте структуру с помощью блоков «Группа», «Колонки», «Заголовок», «Параграф», «Список», «Кнопки», «Изображение», «Таблица» и «Детали». Например, чтобы показать три преимущества услуги, используйте блок «Колонки», в каждой колонке разместите заголовок, краткий текст и иконку. При использовании иконок оптимизируйте SVG и для декоративных оставляйте пустой alt.

Шаг 4: Сделайте геро-блок лёгким и понятным

Первый экран страницы — герой. Частая ошибка — использование больших видеофонов или изображений свыше 2 МБ. Для простого, но эффективного героя достаточно блока «Обложка» или «Группа». Для фонового изображения выбирайте WebP или AVIF, ширина в 1200 пикселей подходит для большинства мобильных сценариев.

В герое обязательно должны быть: один чёткий H1, 1–2 предложения с описанием выгоды и один основной CTA-кнопка. Например, на странице хостинга H1 может сообщать о быстром WordPress-хостинге, а CTA вести к разделу с тарифами: Пакеты WordPress хостинга.

Шаг 5: Используйте паттерны блоков и синхронизированные шаблоны

Одно из сильных преимуществ Gutenberg — паттерны блоков. Если один и тот же CTA используется на пяти страницах, создайте синхронизированный паттерн. Тогда при изменении, например, номера телефона или текста акции, обновление произойдёт везде одновременно. Несинхронизированные паттерны позволяют сохранить дизайн, но менять текст на каждой странице отдельно.

В агентской практике экономят время такие паттерны, как тройные карточки преимуществ, полосы с логотипами клиентов, двухколоночные блоки с изображением и текстом, прайс-листы, разделы FAQ, контактные полосы с призывом. Для удобства используйте понятные названия, например «Услуга — тройные преимущества».

Шаг 6: Настройте шапку и подвал с помощью частей шаблонов

В блок-темах с поддержкой Full Site Editing можно редактировать шапку и подвал так же, как и контент. Для шапки обычно достаточно блоков «Логотип», «Навигация» и «Кнопка». В подвале разместите краткое описание бренда, важные ссылки, контактные данные и юридические страницы.

Обратите внимание на удобство мобильной навигации. Ограничьте меню 5–7 основными пунктами — это оптимально для корпоративного сайта. Слишком большие меню усложняют навигацию и увеличивают глубину просмотра. Если у вас есть приоритетные коммерческие страницы — домен, хостинг, SSL, поддержка — сгруппируйте их логично: Услуги домена, Продукты SSL сертификатов.

Шаг 7: Включите оптимизацию медиа в процесс создания страниц

Страницы на Gutenberg могут быть лёгкими, но неоптимизированные изображения нивелируют это преимущество. Перед загрузкой уменьшайте размер изображений. Если фото команды не занимает всю ширину, загружайте с шириной около 3000 пикселей. Используйте форматы WebP или AVIF, давайте файлам понятные имена и добавляйте альтернативный текст для значимых изображений.

  • Для героя старайтесь, чтобы изображение весило меньше 150 КБ.
  • Для иллюстраций в контенте — 80–180 КБ обычно достаточно.
  • Если включена ленивой загрузка, обращайте внимание, чтобы первый важный элемент загружался без задержки.
  • Избегайте чрезмерного использования галерей и каруселей.

Правильное использование блоков Gutenberg для SEO

Создание страниц на WordPress без темы с Gutenberg — отличный SEO-фундамент, но требует правильного подхода. В 2026 году успешный SEO — это не только ключевые слова, но и пользовательский опыт, техническое качество и доверительные сигналы.

Планируйте иерархию заголовков

Используйте только один H1 на страницу. Основные разделы обозначайте H2, подзаголовки — H3. Не применяйте H2 только ради визуального размера — настройте типографику блока. Поисковики и экранные читалки воспринимают структуру заголовков как карту контента.

Давайте чёткие ответы для сниппетов и AI-обзоров

В первом абзаце чётко сформулируйте тему и основной ответ. Дополняйте контент списками, таблицами и пошаговыми инструкциями. В нашем примере первый абзац сразу объясняет, что такое создание страниц без темы на Gutenberg. Такой формат подходит для выдачи в виде расширенных сниппетов и обзоров с искусственным интеллектом.

Естественно размещайте внутренние ссылки

Внутренние ссылки нужны не только для SEO, но и для удобства пользователя. При описании установки WordPress давайте ссылку на хостинг, в разделе безопасности — на SSL, при регистрации бренда — на домены. Например, для новичков логично предложить следующие ссылки: Как установить WordPress, Проверка домена и регистрация.

Не забывайте о структурированных данных

Gutenberg сам по себе не закрывает все потребности в schema. Для FAQ, статей, товаров или локального бизнеса используйте SEO-плагины или специализированные решения. В конце статьи секция FAQ подготовлена в формате, удобном для FAQ schema. Но не добавляйте в разметку вопросы, не отображаемые на странице, и избегайте вводящей в заблуждение информации.

Контрольный список по производительности и Core Web Vitals

Контрольный список по производительности и Core Web Vitals

В 2026 году LCP, INP и CLS остаются важными метриками для хорошего UX. Даже при создании лёгких страниц на Gutenberg нужно измерять результаты. Используйте инструменты PageSpeed Insights, Chrome DevTools и данные реальных пользователей.

  • LCP: Оптимизируйте изображение героя, сокращайте время ответа сервера.
  • INP: Уменьшайте задержки интерактивности, отключайте ненужные скрипты.
  • CLS: Указывайте размеры для изображений, резервируйте место под рекламу и динамические элементы.
  • TTFB: Используйте качественный хостинг, кэширование, актуальную версию PHP: Решения для быстрого веб-хостинга.
  • Мобильный опыт: Делайте кнопки удобными для нажатия, текст — читаемым на маленьких экранах.

Например, на простой странице услуг с 12 блоками, 4 оптимизированными изображениями, 1 таблицей и 2 CTA можно удержать размер страницы в пределах 700–950 КБ. При использовании тяжёлого конструктора и анимаций размер может превысить 2,5 МБ, что негативно сказывается на конверсии, особенно с мобильных устройств.

Безопасность, резервное копирование и устойчивость

Подход без тяжёлых тем и page builder’ов снижает количество плагинов и тем самым уменьшает поверхность атаки. Но это не гарантия безопасности. Следите за обновлениями ядра WordPress, темы и плагинов, используйте надёжные пароли, двухфакторную аутентификацию и регулярные бэкапы.

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

Финальный чек-лист перед публикацией

Перед запуском проверьте не только визуальную часть, но и контент, SEO, технические параметры и доступность. Этот список поможет быстро провести контроль качества.

  • Убедитесь, что на странице только один H1.
  • Проверьте, что мета-заголовок и описание соответствуют содержанию страницы.
  • Протестируйте все ссылки на кнопках.
  • Оцените отображение на мобильных, планшетах и десктопах.
  • Проверьте размеры изображений и наличие альтернативного текста.
  • Убедитесь, что внутренние ссылки полезны для пользователя.
  • Измерьте скорость загрузки с помощью PageSpeed Insights.
  • Проверьте настройки SSL, редиректов и canonical.
  • Если есть формы — протестируйте отправку и получение писем.
  • Создайте резервную копию перед публикацией.

Распространённые ошибки и как их избежать

Установка отдельного плагина для каждого элемента

Базовые блоки Gutenberg закрывают множество нужд. Установка плагина ради простой кнопки, таблицы или колонок часто перегружает сайт. Сначала попробуйте решить задачи стандартными блоками, а если нужно — выбирайте лёгкие и регулярно обновляемые расширения.

Фокус на дизайне вместо содержания

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

Непоследовательное использование блоков

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

Откладывание оптимизации производительности

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

Краткое резюме и следующий шаг

Создание страниц на WordPress без тяжёлых тем, используя только блоки Gutenberg — современный, быстрый и устойчивый метод. Технически тема остаётся, но вместо громоздких панелей и плагинов вы опираетесь на родную блоковую систему WordPress. При правильном хостинге, SSL, оптимизированных изображениях, организованной структуре заголовков и переиспользуемых паттернах вы улучшите и пользовательский опыт, и SEO.

Если планируете запуск нового сайта, сначала подготовьте надёжную техническую базу, а затем создавайте простой и понятный дизайн с Gutenberg. Ознакомьтесь с WordPress-совместимыми решениями Hostragons — хостингом, доменами и SSL для безопасного старта вашего проекта: Пакеты WordPress хостинга.

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

Можно ли полностью отказаться от темы в WordPress?

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

Можно ли создать профессиональный корпоративный сайт с Gutenberg?

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

Выгодно ли использовать Gutenberg страницы с точки зрения SEO?

При правильном использовании да. Чистая HTML-разметка, структурированные заголовки, высокая скорость загрузки и удобство управления контентом положительно влияют на SEO. Но успех зависит и от качества контента и технической оптимизации.

Стоит ли полностью удалить плагины page builder?

Не обязательно для всех проектов. Если ваш сайт стабильно работает с конструктором, можно переходить постепенно — создавать новые страницы на Gutenberg и со временем упрощать структуру.

Какие характеристики хостинга важны для подхода без темы на Gutenberg?

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

Поделитесь этой статьей:

Команда Hostragons

Актуальные руководства от нашей команды экспертов по хостингу, серверам и доменным именам. Давайте вместе найдем оптимальное решение для вашего проекта.

Свяжитесь с нами