Шаблон контента WordPress: как автоматизировать форматирование постов

Важно: перед изменением functions.php всегда делайте резервную копию темы и тестируйте изменения на тестовом сайте или в среде разработки.

Почему шаблон контента полезен

Ведение блога быстро перестаёт быть «романтичной» задачей, если каждый пост требует ручного форматирования. Шаблон контента помогает:

• Сохранить единообразие оформления на сайте.
• Ускорить работу авторов и редакторов.
• Избежать ошибок при вставке рекламы и изображений.
• Оставить старые записи нетронутыми, применяя шаблон только к новым постам.

Ключевая идея: создать стартовый HTML в редакторе и подключить CSS для визуального соответствия, а не пытаться автоматизировать редактирование уже опубликованных статей.

Обзор решения (коротко)

1. Сделать резервную копию файла functions.php вашей темы.
2. Добавить фильтр default_content, который подставляет начальный HTML в редактор.
3. Подключить файл editor-style.css через add_editor_style для визуального соответствия в редакторе.
4. Создать CSS-правила, которые определяют колонки, отступы, выравнивание изображений и рекламных блоков.
5. Протестировать шаблон на новом посте и отрегулировать размеры.

Подготовка: резервная копия и тестирование

1. Скопируйте файл functions.php из каталога вашей темы (wp-content/themes/ваша-тема/functions.php) в безопасное место.
2. Рекомендуется создавать и тестировать на локальной копии WordPress или на отдельной staging-версии сайта.
3. Выключите кэширование на время правок, чтобы видеть изменения сразу.

Как добавить шаблон содержимого в functions.php

Откройте файл functions.php вашей активной темы и вставьте следующий код в подходящее место (после завершения одной из функций, перед тем как файл заканчивается):

add_filter('default_content','custom_editor_content');
add_editor_style('editor-style.css');

function custom_editor_content( $content ) {
    $content = '



Вставьте введение здесь

Короткое вступление: расскажите, о чём будет статья.










    
Вторая секция
    
Текст второй секции...



    



    
Третья секция
    
Текст третьей секции...




';

    return $content;
}

Примечания:

• HTML внутри строки обёрнут в одинарные кавычки. Если вы используете одинарные кавычки внутри HTML, экранируйте их или переключитесь на синтаксис HEREDOC. помогут авторам понимать, где заменять контент.
• Фильтр default_content запускается только при создании новой записи; существующие записи не изменяются.

Создание файла стилей editor-style.css

Создайте файл editor-style.css в каталоге вашей темы и добавьте правила, которые будут управлять расположением колонок, рекламных блоков и изображений. Пример базовых стилей, адаптированных под шаблон выше:

body {
    background: #f5f5f5;
}

.content-col-main {
    float: right;
    width: 70%;
    padding: 1%;
    border: 1px dotted #ccc;
    background: #fff;
    box-sizing: border-box;
}

.content-col-side {
    float: left;
    width: 210px;
    padding: 1%;
    border: 1px dotted #ccc;
    background: #fff;
    box-sizing: border-box;
}

.content-google-ad {
    float: right;
    width: 20%;
    padding: 1%;
    border: 1px dotted #ccc;
    background: #fff;
    box-sizing: border-box;
}

.content-section-two, .content-section-three {
    float: left;
    width: 70%;
    padding: 1%;
    border: 1px dotted #ccc;
    background: #fff;
    box-sizing: border-box;
}

.content-image-three {
    float: right;
    width: 210px;
    padding: 1%;
    border: 1px dotted #ccc;
    background: #fff;
    box-sizing: border-box;
}

img { /* Убедимся, что изображения не выходят за пределы колонок */
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
}

/* Минимальная адаптивность */
@media (max-width: 800px) {
    .content-col-main, .content-section-two, .content-section-three, .content-google-ad, .content-image-three {
        float: none;
        width: 100%;
    }
}

Советы по выбору единиц измерения:

• Для изображений часто удобнее фиксированная ширина в пикселях (например, 210px) — это даёт предсказуемость.
• Для колонок и текстовых областей лучше использовать проценты, чтобы сохранить адаптивность.
• Всегда тестируйте на мобильных разрешениях.

Как добавлять и обновлять изображения в шаблоне

1. Нажмите «Добавить медиа» в редакторе поста.
2. Загрузите изображение в библиотеку медиа.
3. Вставьте изображение в шаблон или скопируйте URL и вставьте его в атрибут src тега в шаблоне.
4. Обновите атрибут alt для доступности и SEO.

Важно: не забывайте заполнять атрибут alt — он нужен для доступности и помогает при SEO поиске.

Примеры настройки рекламного блока

• Вставьте код рекламной сети внутрь
  . Для выравнивания используйте style-атрибут только если нужно переопределить CSS темы.
• Для адаптивных объявлений используйте скрипты рекламной сети, которые поддерживают responsive-режим.

Примечание: Следите за правилами рекламной сети и политиками шаблона — некоторые сети запрещают автоматическую вставку в определённые места.

Тестирование и пошаговая проверка

Перед публикацией:

• Проверьте новый пост в режиме предпросмотра на всех основных разрешениях.
• Убедитесь, что реклама не скрывает важный контент.
• Проверьте, что все изображения имеют alt и корректные размеры.
• Если используете кеш-плагины, очистите кеш после тестирования.

Ролями: кто что делает (чек-листы)

• Владелец сайта:

  • Сделать резервную копию темы.
  • Назначить тестовую среду для проверок.
  • Утвердить окончательный вид шаблона.

• Разработчик / техник:

  • Вставить код в functions.php и загрузить editor-style.css.
  • Проверить совместимость с текущей темой и плагинами.
  • Обеспечить rollback-план.

• Редактор:

  • Подготовить примеры контента, которые подставляются в шаблон.
  • Наблюдать за соответствием SEO и метаданных.

• Автор:

  • Заполнять области шаблона текстом и изображениями.
  • Проверять атрибуты alt и метаописание (если применяется).

SOP: быстрый playbook для внедрения шаблона

1. Создать ветку или копию темы для тестов.
2. Сохранить backup functions.php и добавить код фильтра.
3. Добавить editor-style.css согласно дизайну.
4. Создать тестовую запись и проверить отрисовку в редакторе и на сайте.
5. Провести UX-проверку (мобильные/десктоп) и собрать фидбек от авторов.
6. Внести правки и затем слить изменения в production.
7. Мониторить трафик и поведение рекламы 1–2 недели после релиза.

Критерии приёмки

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

Что делать, если что-то пошло не так (rollback)

1. Восстановите оригинальную копию functions.php из резервной копии.
2. Удалите файл editor-style.css, если он конфликтует с темой.
3. Очистите кэш сайта и CDN.
4. Проверьте журнал ошибок сервера (error_log) для поиска PHP-ошибок.
5. Откатите изменения из системы контроля версий, если используется Git.

Когда шаблон не подходит — альтернативные подходы

• Плагин для шаблонов постов: если не хотите править тему вручную, используйте плагины вроде “Duplicate Post” или “Reusable Blocks / Patterns” (встроенные в Gutenberg) для создания блоков-шаблонов.
• Блоки Gutenberg: вместо фильтра default_content используйте шаблоны блоков (block patterns), которые проще редактировать и поддерживают визуальное представление.
• Шаблон страницы: для более сложных макетов лучше создать отдельный шаблон page template в теме.

Контрпример: если ваша тема сильно зависит от визуального конструктора (например, Elementor), прямое изменение functions.php и editor-style.css может конфликтовать с визуальным редактором — тогда лучше использовать инструменты самого конструктора.

Улучшенные сниппеты и подсказки

1. Используйте HEREDOC для удобства вставки большего HTML:

function custom_editor_content( $content ) {
    $content = <<
    
Заголовок
    
Текст...