Кейс: Укрощение блочной темы WordPress

Проект: Персональный блог на WordPress Статус: Базовая настройка завершена. Цель: Документирование процесса настройки современной блочной темы (FSE) и возникших при этом проблем.

Я выбрал для своего нового блога стандартную современную тему WordPress — Twenty Twenty-Five, предполагая, что это будет быстрый и простой процесс. На деле это превратилось в многодневный квест по отладке неинтуитивного интерфейса «Редактора Сайта». Этот кейс — мой бортовой журнал этой битвы.

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

• Причина: Блочные темы используют Шаблоны для каждого типа контента. В них по умолчанию «зашиты» демонстрационные блоки.
• Решение: Методичная «зачистка» каждого ключевого шаблона через Внешний вид → Редактор → Шаблоны:
  • Главная страница блога (Home)
  • Отдельные записи (Single Post)
  • Страницы (Pages)
  • Список записей (Index)
• Вывод: Необходимо было удалить из них все автоматические блоки: Заголовок записи, Метаданные, Комментарии, Навигация по записям, оставив только чистые контейнеры для шапки, контента и подвала.

В процессе «зачистки» я случайно удалил всю глобальную шаблонную часть «Шапка» (Header). В результате навигация пропала со всего сайта.

• Причина: Удаление синхронизированного блока из одного шаблона удаляет его везде.
• Решение: Так как в интерфейсе темы не было очевидного способа восстановить шапку, пришлось создавать ее с нуля:

1. Вставить в шаблон пустую «Часть шаблона».

  2. Создать новую часть с типом "Заголовок" (Header) и именем, например, "Шапка 3".
  3. Собрать ее из базовых блоков: **«Строка»** (Row) как контейнер, а внутри — **«Название сайта»**, **«Навигация»** и **«Поиск»**.
  4. "Прописать" эту новую, созданную вручную шапку во всех остальных шаблонах.

Последней задачей было зафиксировать шапку при прокрутке. Встроенная опция «Позиция: Липкий» в теме не работала корректно.

• Причина: Особенности или ошибки в CSS-стилях самой темы.
• Решение: Пришлось прибегнуть к добавлению кастомного CSS-кода.

1. С помощью инструментов разработчика в браузере («Просмотреть код») был найден правильный CSS-селектор для контейнера шапки.

  2. Так как в теме отсутствовал стандартный интерфейс "Настройщика", он был открыт по прямой ссылке: ''/wp-admin/customize.php''.
  3. В раздел **"Дополнительные стили"** был добавлен CSS-код, который принудительно зафиксировал шапку.

/* Финальный код для "липкой" шапки */
.home .wp-block-template-part:first-of-type,
.blog .wp-block-template-part:first-of-type,
.single .wp-block-template-part:first-of-type,
.page .wp-block-template-part:first-of-type {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background-color: white;
}
/* ... и т.д. ... */

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