Skip to content

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

🖼 Як додати різні фони для записів і сторінок WordPress
WordPressТеми WordPress
6 хв1,269 слів

🖼 Як додати різні фони для записів і сторінок 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 — це п'ять хвилин і жодних ризиків. А якщо використовуєте нестандартний прийом із фонами, про який ми не розповіли, поділіться в коментарях.

Редакція
РедакціяРедакційна команда→ Усі публікації

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