Skip to content

Wszystko o WordPressie, tworzeniu stron — i nie tylko

🖼 Jak dodać różne tła dla wpisów i stron WordPress
WordPressMotywy WordPress
7 min1,386 słów

🖼 Jak dodać różne tła dla wpisów i stron WordPress

Standardowy motyw WordPress wygląda czysto, ale po miesiącu użytkowania chce się odrobinę więcej indywidualności. Kolorowe tło dla kluczowej strony lub obraz tła dla pojedynczych wpisów, prosty sposób na wizualne wyróżnienie treści bez przebudowywania całej witryny.

Można to zrobić na trzy sposoby: kilkoma linijkami CSS, niewielkim fragmentem PHP lub gotową wtyczką. Żadna z metod nie wymaga głębokiej wiedzy o kodowaniu, wystarczy rozumieć, gdzie wstawić kod.

Poniżej omawiamy wszystkie trzy metody z konkretnymi fragmentami, wskazaniem plików i uczciwą analizą pułapek.

💡 Szybki przegląd:

  • Proszę otworzyć header.php i znaleźć funkcję body_class(). Generuje ona unikalne klasy CSS dla każdej strony i wpisu, pozwalając wycelować tło z dokładnością do jednego posta.
  • Proszę dodać regułę CSS z odpowiednią klasą w style.css. Tło zostanie zastosowane tylko do docelowej strony lub wpisu, nie naruszając reszty witryny.
  • Proszę utworzyć pole niestandardowe i dodać fragment PHP w functions.php. Tło będzie ustawiane przez URL obrazu bezpośrednio z panelu administracyjnego WordPress, bez ręcznej edycji CSS.

Jak dodać tło przez CSS i body_class

WordPress automatycznie przypisuje tagowi <body> zestaw klas CSS za pomocą funkcji body_class(). Wśród nich znajdują się unikalne identyfikatory konkretnego wpisu lub strony, co pozwala wycelować tło z chirurgiczną precyzją.

Proszę upewnić się, że Pana/Pani motyw wywołuje body_class(). Proszę otworzyć Wygląd → Edytor plików motywu i znaleźć plik header.php:

Edytor motywów WordPress: wybór pliku header.php

Wewnątrz header.php proszę znaleźć otwierający tag <body>. Obok niego powinna znajdować się funkcja:

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

Jeśli widzi Pan/Pani po prostu <body> bez funkcji, proszę ją dodać. Większość nowoczesnych motywów już zawiera to wywołanie, ale warto to sprawdzić.

Teraz proszę otworzyć dowolną stronę witryny i wyświetlić jej kod źródłowy (prawy przycisk myszy → Zbadaj w Chrome lub Wyświetl źródło strony). Dla pojedynczego wpisu zobaczy Pan/Pani coś podobnego:

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

Dla strony wynik będzie inny:

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

Oto kluczowe klasy, na które może Pan/Pani wycelować CSS:

  • .single, wszystkie pojedyncze wpisy. Każdy styl zastosowany do tej klasy obejmie każdy wpis na blogu.
  • .postid-N, jeden konkretny wpis o ID = N. Idealne do punktowego formatowania.
  • .page, wszystkie strony witryny.
  • .page-id-N, konkretna strona o ID = N.
  • .single-format-standard, wpisy w formacie standardowym.
  • .logged-in, stosowane tylko do zalogowanych użytkowników (wygodne przy debugowaniu).

Teraz proszę dodać CSS do pliku style.css Pana/Pani motywu. Na przykład, aby ustawić czarne tło dla wszystkich wpisów:

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

Aby ustawić obraz tła dla konkretnej strony o 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 strony lub wpisu można sprawdzić w panelu administracyjnym: proszę otworzyć listę stron, najechać na tytuł, na pasku stanu przeglądarki zobaczy Pan/Pani post=2 lub podobną liczbę. W edytorze Gutenberg ID jest widoczne w URL: post.php?post=2&action=edit.

Zaletą tej metody jest jej prostota: nie dotyka Pan/Pani PHP, nie instaluje wtyczek i dokładnie wie, która klasa za co odpowiada. Wadą jest to, że przy zmianie motywu wszystkie style z style.css zostaną utracone, jeśli nie używa Pan/Pani motywu potomnego.

Jak ustawić tło przez pole niestandardowe i PHP

Jeśli potrzebuje Pan/Pani zmieniać obraz tła bezpośrednio z panelu administracyjnego, bez każdorazowego wchodzenia w CSS, odpowiednia będzie metoda z polem niestandardowym. Tworzy Pan/Pani pole dla URL obrazu, a niewielki fragment PHP w functions.php wstawia go do atrybutu background-image.

Proszę dodać następujący kod do functions.php aktywnego motywu. Jeśli motyw jest zewnętrzny, koniecznie przez motyw potomny, w przeciwnym razie zmiany zostaną utracone podczas aktualizacji:

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' );

Funkcja podpina się do haka wp_head, styl inline jest wstawiany do <head> strony. esc_url() oczyszcza URL z potencjalnie niebezpiecznych znaków, a get_post_meta() pobiera wartość pola dla bieżącego wpisu.

Teraz proszę otworzyć dowolny wpis lub stronę w panelu administracyjnym, znaleźć blok Pola niestandardowe (Custom Fields) i utworzyć pole o nazwie myprefix_background_image. Jako wartość proszę wstawić pełny URL obrazu tła. Po zapisaniu tło zostanie zastosowane tylko do tego wpisu.

Jeśli blok pól niestandardowych nie jest widoczny: proszę otworzyć edytor, kliknąć trzy kropki w prawym górnym rogu → Ustawienia → Panele i włączyć „Pola niestandardowe".

Proszę zwrócić uwagę: obraz musi być już przesłany do Biblioteki mediów WordPress, proszę używać bezpośredniego linku do pliku, a nie do strony załącznika.

Wtyczki do teł: kiedy kod nie jest Pana/Pani opcją

CSS i PHP pokrywają większość zadań, ale jeśli woli Pan/Pani podejście wizualne, oto co jest dostępne na rynku.

WP-Backgrounds Lite: historia i wnioski

Interfejs wtyczki WP-Backgrounds Lite w panelu administracyjnym

WP-Backgrounds Lite był kilka lat temu popularnym darmowym rozwiązaniem do teł. Wtyczka pozwalała ustawiać różne tła dla wpisów, stron i niestandardowych typów, zawierała obsługę pokazu slajdów i tła wideo. Jednak od czerwca 2021 roku jest zamknięta w katalogu WordPress.org z adnotacją „Security Issue", a kilka niezależnych recenzji wskazywało na wstrzykiwanie ukrytych linków w kod witryny.

Główna lekcja: dla zadań, które można rozwiązać kilkoma linijkami CSS, nie warto instalować niesprawdzonej wtyczki. Jeśli jednak potrzebuje Pan/Pani właśnie wtyczki, proszę zwracać uwagę na datę ostatniej aktualizacji i liczbę aktywnych instalacji.

Custom Backgrounds: podejście komercyjne

Strona wtyczki Custom Backgrounds na CodeCanyon

Wtyczka Custom Backgrounds od autora RightHere na CodeCanyon daje pełną kontrolę: tła dla wpisów, stron, taksonomii i archiwów, efekty paralaksy, timery i kilka teł na jednej stronie. Wtyczka jest płatna, z możliwością wcześniejszego przetestowania.

Wada: autor nie aktualizował produktu od kilku lat, kompatybilność z aktualnymi wersjami WordPress stoi pod znakiem zapytania. Dla jednorazowego projektu jest to działające rozwiązanie, dla długoterminowej witryny lepiej rozglądać się za aktywnie wspieranymi alternatywami.

Tła wideo i paralaksa dla WPBakery

Ustawienia tła z efektem paralaksy w WPBakery

Jeśli używa Pan/Pani konstruktora stron WPBakery (dawniej Visual Composer), dodatek Parallax & Video Background od MegaMain dodaje pełnoprawne tła wideo i przewijanie paralaksowe bezpośrednio do interfejsu konstruktora. Obsługiwane są YouTube, Vimeo oraz przesłane MP4/WebM, cztery kierunki paralaksy i wyłączenie efektu na urządzeniach mobilnych.

Przewijanie paralaksowe polega na tym, że obraz tła porusza się z inną prędkością względem pierwszego planu. Wygląda efektownie, ale na urządzeniach mobilnych często zacina się, dlatego możliwość wyłączenia efektu dla smartfonów jest tutaj krytyczna.

Dodatek działa wewnątrz WPBakery: po prostu dodaje Pan/Pani tło do wiersza lub kolumny przez znany interfejs, bez osobnego menu. Cena to jednorazowy zakup na CodeCanyon, aktualizacje pojawiają się regularnie.

Krótkie wideo na temat: dodawanie obrazu tła do poszczególnych stron i bloków w WordPress. Sprawdzi się jako uzupełnienie opisanych wyżej metod, cały proces jest pokazany na rzeczywistej witrynie.

⁉️🤔 Często zadawane pytania

Czy można ustawić różne tło dla różnych kategorii wpisów?

Tak, jeśli Pana/Pani motyw dodaje klasę kategorii przez post_class() w pętli wyświetlania. Zazwyczaj wygląda to jak .category-news lub .category-portfolio. Proszę otworzyć kod źródłowy strony archiwum kategorii i znaleźć klasę w tagu <article>. Następnie standardowa reguła CSS w style.css. Alternatywnie: tag warunkowy has_category() we fragmencie PHP.

Co zrobić, jeśli funkcja body_class() jest nieobecna w header.php?

Proszę dodać ją ręcznie w otwierającym tagu <body>: zamienić <body> na <body <?php body_class(); ?>>. Jeśli header.php jest niedostępny do edycji (motyw zablokowany), proszę utworzyć motyw potomny, skopiować header.php motywu nadrzędnego i wprowadzić poprawkę w kopii.

Tło nie wyświetla się po dodaniu CSS. Jaka jest przyczyna?

Trzy częste przyczyny: (1) pamięć podręczna przeglądarki, proszę otworzyć stronę w trybie incognito; (2) inny selektor CSS nadpisuje Pana/Pani tło, proszę sprawdzić w Narzędziach deweloperskich (F12), czy Pana/Pani reguła nie jest przekreślona; (3) ścieżka do obrazu jest nieprawidłowa, proszę użyć bezwzględnego URL od katalogu głównego witryny z ukośnikiem na początku.

Czy koniecznie trzeba używać motywu potomnego do poprawek w functions.php?

Zdecydowanie zalecane. Bezpośrednie poprawki w functions.php motywu nadrzędnego zostaną utracone przy pierwszej aktualizacji motywu. Motyw potomny izoluje Pana/Pani zmiany: proszę utworzyć folder, dodać style.css z nagłówkiem i functions.php z Pana/Pani kodem, zajmie to pięć minut, a oszczędza godziny przy aktualizacjach.

Czym zastąpić WP-Backgrounds Lite dzisiaj?

Dla prostych teł metoda CSS z tego artykułu w pełni pokrywa funkcjonalność zamkniętej wtyczki. Jeśli potrzebny jest interfejs wizualny, proszę użyć bloku „Okładka" (Cover) w Gutenbergu: daje on obraz tła z nakładką tekstową dla dowolnej strony lub wpisu. Dla paralaksy i teł wideo, dodatek WPBakery z powyższego przeglądu.

Podsumowanie: którą metodę wybrać do Pana/Pani zadania

Wybór metody sprowadza się do dwóch pytań: jak często zmienia Pan/Pani tło i na ile komfortowo czuje się Pan/Pani z edycją kodu.

  • Jeśli potrzebuje Pan/Pani raz skonfigurować i zapomnieć, CSS przez body_class(). Dwie linijki w style.css, zero wtyczek, działa na każdym motywie.
  • Jeśli tło zmienia się regularnie dla różnych wpisów, fragment PHP z polem niestandardowym. Przesyła Pan/Pani obrazek do Biblioteki mediów, wstawia URL w pole, gotowe.
  • Jeśli pracuje Pan/Pani w WPBakery i potrzebne są tła wideo, dodatek Parallax & Video Background.
  • Jeśli nie chce Pan/Pani dotykać kodu w ogóle, wbudowany blok „Okładka" w Gutenbergu pokrywa większość zadań z obrazami tła bez żadnej wtyczki.

Proszę zacząć od CSS, to pięć minut i żadnego ryzyka. A jeśli używa Pan/Pani niestandardowego triku z tłami, o którym nie powiedzieliśmy, proszę podzielić się w komentarzach.

Redakcja
RedakcjaZespół redakcyjny→ All publications

Profesjonalny zespół autorów i redaktorów specjalizujących się w tworzeniu treści wysokiej jakości.