Skip to content

Всё для WordPress, веб-разработки — и не только

🖼 Как добавить разные фоны для записей и страниц WordPress
WordPressТемы WordPress
6 мин1,269 слов1 306

🖼 Как добавить разные фоны для записей и страниц WordPress

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

Сделать это можно тремя путями: парой строк CSS, небольшим PHP-сниппетом или готовым плагином. Ни один из способов не требует глубоких знаний вёрстки, достаточно понимать, куда вставить код.

Ниже разбираем все три метода с конкретными фрагментами, указанием файлов и честным разбором подводных камней.

💡 Быстрый обзор:

  • Откройте header.php и найдите функцию body_class(). Она генерирует уникальные CSS-классы для каждой страницы и записи, позволяя нацелить фон с точностью до одного поста.
  • Добавьте CSS-правило с нужным классом в style.css. Фон применится только к целевой странице или записи, не затрагивая остальной сайт.
  • Создайте произвольное поле и добавьте PHP-сниппет в functions.php. Фон будет задаваться через URL изображения прямо из админки WordPress, без ручной правки CSS.

Как добавить фон через CSS и body_class

WordPress автоматически присваивает тегу <body> набор CSS-классов через функцию body_class(). Среди них, уникальные идентификаторы конкретной записи или страницы, что позволяет нацелить фон с хирургической точностью.

Убедитесь, что ваша тема вызывает body_class(). Откройте Appearance → Theme File Editor (или Внешний вид → Редактор тем) и найдите файл header.php:

Редактор тем WordPress: выбор файла header.php

Внутри header.php найдите открывающий тег <body>. Рядом с ним должна быть функция:

1<body <?php body_class(); ?>>

Если видите просто <body> без функции, добавьте её. Большинство современных тем уже включают этот вызов, но проверить стоит.

Теперь откройте любую страницу сайта и посмотрите её исходный код (правая кнопка мыши → Просмотр кода страницы в Chrome или View Page Source). Для отдельной записи вы увидите что-то подобное:

1<body class="single single-post postid-1 single-format-standard logged-in">

Для страницы вывод будет другим:

1<body class="page page-id-2 page-template-default logged-in">

Вот ключевые классы, на которые вы можете нацелить CSS:

  • .single, все отдельные записи. Любой стиль, применённый к этому классу, затронет каждую запись блога.
  • .postid-N, одна конкретная запись с ID = N. Идеально для точечного оформления.
  • .page, все страницы сайта.
  • .page-id-N, конкретная страница с ID = N.
  • .single-format-standard, записи со стандартным форматом.
  • .logged-in, применяется только к залогиненным пользователям (удобно для отладки).

Теперь добавьте CSS в файл style.css вашей темы. Например, чтобы задать чёрный фон всем записям:

1.single {
2    background-color: #000;
3}

А чтобы поставить фоновое изображение конкретной странице с ID 2:

1.page-id-2 {
2    background-image: url('/wp-content/uploads/2026/01/my-background.jpg');
3    background-size: cover;
4    background-position: center;
5}

ID страницы или записи можно посмотреть в админке: откройте список страниц, наведите на название, в строке статуса браузера увидите post=2 или аналогичное число. В редакторе Gutenberg ID отображается в URL: post.php?post=2&action=edit.

Плюс этого метода в его простоте: вы не трогаете PHP, не ставите плагины и точно знаете, какой класс за что отвечает. Минус, при смене темы все стили из style.css потеряются, если вы не используете дочернюю тему.

Как задать фон через произвольное поле и PHP

Если нужно менять фоновое изображение прямо из админки, не залезая каждый раз в CSS, подойдёт метод с произвольным полем. Вы создаёте поле для URL изображения, а небольшой PHP-сниппет в functions.php подставляет его в атрибут background-image.

Добавьте следующий код в functions.php активной темы. Если тема сторонняя, обязательно через дочернюю, иначе изменения слетят при обновлении:

1<?php
2/**
3 * Добавляет inline-стиль для body background через произвольное поле.
4 * Замените 'myprefix' на свой уникальный префикс.
5 */
6function myprefix_custom_field_background() {
7    $background = get_post_meta( get_the_ID(), 'myprefix_background_image', true );
8    if ( $background ) {
9        ?>
10        <style type="text/css">
11            body {
12                background-image: url( "<?php echo esc_url( $background ); ?>" );
13            }
14        </style>
15        <?php
16    }
17}
18add_action( 'wp_head', 'myprefix_custom_field_background' );

Функция цепляется к хуку wp_head, inline-стиль вставляется в <head> страницы. esc_url() очищает URL от потенциально опасных символов, а get_post_meta() забирает значение поля для текущей записи.

Теперь откройте любую запись или страницу в админке, найдите блок Произвольные поля (Custom Fields) и создайте поле с именем myprefix_background_image. В значение вставьте полный URL фонового изображения. Сохраните, фон применится только к этой записи.

Если блок произвольных полей не отображается: откройте редактор, нажмите три точки в правом верхнем углу → Настройки → Панели и включите «Произвольные поля».

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

Плагины для фонов: когда код не ваш вариант

CSS и PHP покрывают большинство задач, но если вы предпочитаете визуальный подход, вот что есть на рынке.

WP-Backgrounds Lite: история и выводы

Интерфейс плагина WP-Backgrounds Lite в админке

WP-Backgrounds Lite несколько лет назад был популярным бесплатным решением для фонов. Плагин позволял задавать разные фоны для записей, страниц и произвольных типов, включал поддержку слайд-шоу и video background. Однако с июня 2021 года он закрыт в каталоге WordPress.org с пометкой «Security Issue», а несколько независимых обзоров указывали на инъекцию скрытых ссылок в код сайта.

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

Custom Backgrounds: коммерческий подход

Страница плагина Custom Backgrounds на CodeCanyon

Плагин Custom Backgrounds от автора RightHere на CodeCanyon даёт полный контроль: фоны для записей, страниц, таксономий и архивов, эффекты параллакса, таймеры и несколько фонов на одну страницу. Плагин платный, с возможностью предварительного тестирования.

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

Видео и параллакс-фоны для WPBakery

Настройки фона с параллакс-эффектом в WPBakery

Если вы используете WPBakery Page Builder (бывший Visual Composer), аддон Parallax & Video Background от MegaMain добавляет полноценные видеофоны и параллакс-прокрутку прямо в интерфейс конструктора. Поддерживаются YouTube, Vimeo и загруженные MP4/WebM, четыре направления параллакса и отключение эффекта на мобильных.

Параллакс-прокрутка, это когда фоновое изображение движется с другой скоростью относительно переднего плана. Выглядит эффектно, но на мобильных устройствах часто дёргается, поэтому возможность отключить эффект для смартфонов здесь критична.

Аддон работает внутри WPBakery: вы просто добавляете фон к строке или колонке через привычный интерфейс, без отдельного меню. Цена, единоразовая покупка на CodeCanyon, обновления выходят регулярно.

Короткое видео по теме: добавление фонового изображения к отдельным страницам и блокам в WordPress. Подойдёт как дополнение к описанным выше методам, весь процесс показан на реальном сайте.

⁉️🤔 Частые вопросы

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

Да, если ваша тема добавляет класс категории через post_class() в цикле вывода. Обычно это выглядит как .category-news или .category-portfolio. Откройте исходный код страницы архива категории и найдите класс в теге <article>. Дальше, стандартное CSS-правило в style.css. Альтернативно: условный тег has_category() в PHP сниппете.

Что делать, если функция body_class() отсутствует в header.php?

Добавьте её вручную в открывающий тег <body>: замените <body> на <body <?php body_class(); ?>>. Если header.php недоступен для редактирования (тема заблокирована), создайте дочернюю тему, скопируйте header.php родительской темы и внесите правку в копии.

Фон не отображается после добавления CSS. В чём причина?

Три частые причины: (1) кеш браузера, откройте страницу в режиме инкогнито; (2) другой CSS-селектор переопределяет ваш фон, проверьте в Инструментах разработчика (F12), не перечёркнуто ли ваше правило; (3) путь к изображению неверный, используйте абсолютный URL от корня сайта со слешем в начале.

Обязательно ли использовать дочернюю тему для правок в functions.php?

Настоятельно рекомендуется. Прямые правки в functions.php родительской темы слетят при первом же обновлении темы. Дочерняя тема изолирует ваши изменения: создайте папку, добавьте style.css с заголовком и functions.php с вашим кодом, займёт пять минут, экономит часы при обновлениях.

Чем заменить WP-Backgrounds Lite сегодня?

Для простых фонов CSS-метод из этой статьи полностью покрывает функциональность закрытого плагина. Если нужен визуальный интерфейс, используйте блок «Обложка» (Cover) в Gutenberg: он даёт фоновое изображение с наложением текста для любой страницы или записи. Для параллакса и видеофонов, аддон WPBakery из обзора выше.

Итоги: какой способ выбрать под вашу задачу

Выбор метода сводится к двум вопросам: как часто вы меняете фон и насколько вам комфортно редактировать код.

  • Если нужно один раз настроить и забыть, CSS через body_class(). Две строки в style.css, ноль плагинов, работает на любой теме.
  • Если фон меняется регулярно для разных записей, PHP-сниппет с произвольным полем. Загрузили картинку в Медиатеку, вставили URL в поле, готово.
  • Если работаете в WPBakery и нужны видеофоны, аддон Parallax & Video Background.
  • Если не хотите трогать код совсем, встроенный блок «Обложка» в Gutenberg покрывает большинство задач с фоновыми изображениями без единого плагина.

Начните с CSS, это пять минут и никаких рисков. А если используете нестандартный приём с фонами, о котором мы не рассказали, поделитесь в комментариях.

Редакция
РедакцияРедакционная команда→ Все публикации

Профессиональная команда авторов и редакторов, специализирующихся на создании качественного контента.