Jak dodać obraz tła w WordPress

Czy chcesz dodać obraz tła do swojej witryny WordPress?

Obrazy tła można wykorzystać, aby Twoja strona wyglądała bardziej atrakcyjnie i estetycznie.

W tym artykule pokażemy, jak łatwo dodać obraz tła do swojej witryny WordPress.

Video Tutorial

Jeśli wolisz pisemne instrukcje, Kontynuuj czytanie.

Metoda 1. Dodaj obraz tła za pomocą ustawień motywu WordPress

Najpopularniejsze motywy WordPress są dostarczane z niestandardową obsługą tła. Ta funkcja pozwala łatwo ustawić obraz tła w witrynie WordPress lub zmienić kolor tła.

Jeśli twój motyw obsługuje niestandardową funkcję tła, zalecamy użycie tej metody, aby dodać obraz tła do witryny WordPress.

Jeśli jednak Twój motyw nie obsługuje tej funkcji lub nie podoba ci się, jak implementuje obrazy tła, możesz wypróbować inne opcje wymienione w naszym samouczku.

Najpierw musisz odwiedzić Wygląd ” Dostosuj strona w Twoim adminie WordPress. Spowoduje to uruchomienie WordPress theme customizer, w którym można zmienić różne ustawienia motywu podczas wyświetlania podglądu na żywo swojej witryny.

Następnie musisz kliknąć opcję “obraz tła”. Panel przesunie się i pokaże opcje przesłania lub wybrania obrazu tła dla Twojej witryny.

Kliknij przycisk Wybierz obraz, Aby kontynuować.

Spowoduje to wyświetlenie wyskakującego okienka WordPress media uploader, w którym można przesłać obraz z komputera. Możesz także wybrać wcześniej przesłany obraz z biblioteki multimediów.

Następnie musisz kliknąć przycisk Wybierz obraz po przesłaniu lub wybraniu obrazu, którego chcesz użyć jako tła.

Spowoduje to zamknięcie wyskakującego okienka Media uploader i zobaczysz podgląd wybranego obrazu w module dostosowywania motywu.

Pod obrazem można również zobaczyć opcje obrazu tła. W sekcji “Preset” możesz wybrać sposób wyświetlania obrazu tła: wypełnij ekran, dopasuj ekran, powtórz lub niestandardowy.

Możesz również wybrać pozycję obrazu tła, klikając strzałki poniżej. Kliknięcie na środek spowoduje wyrównanie obrazu do środka ekranu.

Nie zapomnij kliknąć przycisku “Zapisz i opublikuj” u góry, aby zapisać swoje ustawienia. To wszystko, pomyślnie dodałeś obraz tła do swojej witryny WordPress.

Odwiedź swoją stronę, aby zobaczyć ją w akcji.

Metoda 2. Dodaj niestandardowy obraz tła w WordPress za pomocą wtyczki

Ta metoda jest o wiele bardziej elastyczna. Działa z dowolnym motywem WordPress i pozwala ustawić wiele obrazów tła.

Możesz także ustawić różne tła dla dowolnego posta, strony, kategorii lub dowolnej innej sekcji witryny WordPress.

Automatycznie sprawia, że wszystkie obrazy tła są pełnoekranowe i reagują na urządzenia mobilne. Oznacza to, że obraz tła automatycznie zmieni rozmiar na mniejszych urządzeniach.

Najpierw musisz zainstalować i aktywować wtyczkę Full Screen Background Pro. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji musisz odwiedzić Wygląd ” Pełny ekran BG Obraz aby skonfigurować ustawienia wtyczki.

Zostaniesz poproszony o dodanie klucza licencyjnego. Możesz uzyskać te informacje z wiadomości e-mail otrzymanej po zakupie wtyczki lub ze swojego konta na stronie wtyczki.

Następnie kliknij przycisk “Zapisz Ustawienia”, aby zapisać zmiany. Jesteś teraz gotowy, aby rozpocząć dodawanie obrazów tła do swojej witryny WordPress.

Śmiało i kliknij przycisk “Dodaj nowy obraz” na stronie ustawień wtyczki. Spowoduje to przejście do ekranu przesyłania obrazu w tle.

Kliknij przycisk “Wybierz obraz”, aby przesłać lub wybrać obraz. Po wybraniu obrazu na ekranie pojawi się podgląd obrazu na żywo.

Następnie musisz podać nazwę tego obrazu. Ta nazwa będzie używana wewnętrznie, więc możesz tutaj użyć wszystkiego.

Na koniec musisz wybrać miejsce, w którym chcesz, aby ten obraz był używany jako strona tła.

Full Screen Background Pro pozwala ustawić obrazy jako globalne tło, lub można wybrać jedną z różnych sekcji witryny, takich jak Kategorie, archiwa, przód lub strona bloga.

Nie zapomnij kliknąć przycisku Zapisz obraz, aby zapisać obraz tła.

Możesz dodać tyle zdjęć, ile chcesz, odwiedzając Wygląd ” Pełny ekran BG Obraz strona.

Jeśli ustawisz więcej niż jeden obraz, który ma być używany globalnie, wtyczka automatycznie zacznie wyświetlać obrazy tła jako pokaz slajdów.

Możesz dostosować czas potrzebny do zaniku obrazu i czas, po którym nowy obraz tła zacznie zanikać.

Czas, w którym tu wejdziesz, to milisekundy. Jeśli chcesz, aby obraz tła zanikł po 20 sekundach, musisz wprowadzić 20000.

Nie zapomnij kliknąć przycisku Zapisz Ustawienia, aby zapisać zmiany.

Obrazy tła dla postów, stron i kategorii

Full Screen Background Pro umożliwia również Ustawianie obrazów tła dla pojedynczych postów, stron, kategorii, tagów i innych.

Wystarczy edytować post/stronę, na której chcesz wyświetlić inny obraz tła. Na ekranie edycji postu zauważysz nowe pole “pełnoekranowy obraz tła” poniżej edytora postów.

Aby użyć obrazu tła dla określonej kategorii, musisz odwiedzić Wygląd ” Pełny ekran BG Obraz stronę, a następnie kliknij przycisk “Dodaj nowy obrazek”.

Po przesłaniu obrazu możesz wybrać “kategorię” jako kontekst, w którym chcesz wyświetlić obraz tła.

Teraz wprowadź konkretny identyfikator kategorii lub slug, w którym chcesz wyświetlić obraz. Zobacz nasz przewodnik, jak znaleźć identyfikator kategorii w WordPress.

Nie zapomnij zapisać obrazu, aby zapisać ustawienia.

Metoda 3. Dodawanie obrazów tła za pomocą CSS Hero

CSS Hero to wtyczka do WordPressa, która pozwala na wprowadzanie zmian do motywu bez dotykania pojedynczej linii kodu.

Możesz szybko dodać obrazy tła w kilku prostych krokach. Najpierw musisz zainstalować i aktywować CSS Hero. Gdy to zrobisz, nadszedł czas, aby rozpocząć dostosowywanie witryny.

Teraz otwórz swoją stronę główną w przeglądarce. Zobaczysz link “Dostosuj za pomocą CS SHero” na pasku administracyjnym.

Po kliknięciu tego łącza zostaną otwarte opcje CSS Hero. Najedź kursorem myszy na obszar, do którego chcesz dodać obraz.

Na poniższym zrzucie ekranu zobaczysz .header-filter-gradient miejsce. Po kliknięciu tego obszaru możesz wybrać łącze w tle na lewym pasku bocznym.

Otworzy się łącze w tle. Stamtąd, można kliknąć na ‘ obraz. Teraz możesz wybrać obraz z Unsplash lub z przesłanych plików, aby utworzyć tło.

Po kliknięciu na żądany obraz zobaczysz przycisk “Zastosuj Obraz”. Następnie możesz wybrać rozmiar, który chcesz, aby twój obraz był. Wybraliśmy dużą wersję, aby rozciągała się na całej stronie.

Naciśnij “Zapisz i opublikuj” na dole, a obraz tła zostanie teraz zapisany dla Twojej witryny.

Metoda 4. Dodaj niestandardowe obrazy tła w dowolnym miejscu w WordPress za pomocą kodu CSS

Domyślnie WordPress dodaje kilka klas CSS do różnych elementów HTML w całej witrynie WordPress. Możesz łatwo dodawać niestandardowe obrazy tła do poszczególnych postów, kategorii, autorów i innych stron za pomocą tych klas CSS generowanych przez WordPress.

Na przykład, jeśli masz kategorię w swojej witrynie o nazwie TV, WordPress automatycznie doda te klasy CSS do tagu body, gdy ktoś wyświetli stronę kategorii TV.

< body class = "archive category category-tv category-4"> 

Możesz użyć narzędzia inspect, aby dokładnie zobaczyć, które klasy CSS są dodawane przez WordPress do znacznika body.

Możesz użyć Kategoria-tv lub Kategoria-4 Klasa CSS do stylu tylko ta strona kategorii inaczej.

Dodajmy niestandardowy obraz tła do strony archiwum kategorii. Będziesz musiał dodać ten niestandardowy CSS do swojego motywu.

ciało.Kategoria-tv { 
background-image: url("https://example.com/wp-content/uploads/2017/03/your-background-image.jpg"); 
background-position: center center; 
tło-rozmiar: okładka; 
background-repeat: no-repeat; 
tło-załącznik: stałe;
}

Nie zapomnij zastąpić adresu URL obrazu tła i klasy kategorii własną kategorią.

Możesz także dodawać niestandardowe tła do poszczególnych postów i stron. WordPress dodaje klasę CSS z identyfikatorem posta lub strony w tagu body. Możesz użyć tego samego kodu CSS po prostu zastąpić .Kategoria-tv z klasą CSS specyficzną dla posta.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać obraz tła w WordPress. Możesz również zobaczyć nasze porównanie najlepszych wtyczek do Kreatora Stron typu przeciągnij i upuść dla WordPress oraz nasz samouczek na temat tworzenia niestandardowego motywu WordPress (bez kodu).

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.