Wpis na blogu może mieć świetną treść, a mimo to wyglądać trochę jak kanapka bez chleba. Brakuje mu grafiki, która od razu mówi: „hej, tego wpisu dotyczy właśnie ten temat”. I tu wchodzi obraz wyróżniający WordPress. To nie jest zwykły obrazek wrzucony między akapity. Bardziej przypomina okładkę całego wpisu albo strony.
W tym poradniku ogarniemy temat bez czarów i grzebania w kodzie na dzień dobry. Pokażę, czym różni się obraz wyróżniający od grafiki w treści, gdzie motyw może go wyświetlać, jak przygotować kadr oraz co sprawdzić, gdy ustawiona grafika nagle znika. Nie ma jednego magicznego rozmiaru dla każdego WordPressa. Jest za to kilka prostych zasad, które oszczędzają nerwów i ratunkowego przycinania grafiki pięć minut przed publikacją.
Obraz wyróżniający WordPress — co to właściwie jest?
Obraz wyróżniający jest przypisany do konkretnego wpisu albo strony. W WordPressie możesz spotkać też określenia Post Thumbnail, miniatura wpisu lub po prostu grafika wyróżniająca strony. Nazwa może brzmieć trochę technicznie, ale sama funkcja jest prosta: wybierasz obraz, który reprezentuje cały materiał.
To ważne rozróżnienie. Obraz wyróżniający nie jest automatycznie „pierwszym zdjęciem z artykułu”. Ustawia się go jako osobny element w panelu edycji wpisu lub strony. Później motyw może wykorzystać tę grafikę w wybranych miejscach. Może pokazać ją na stronie głównej, przy tytule wpisu, nad treścią albo na liście artykułów. Może też nie pokazać jej w konkretnym widoku. Samo kliknięcie opcji ustawienia obrazu nie daje gwarancji, że grafika pojawi się wszędzie jak celebryta na ściance.
Obraz wyróżniający pełni więc funkcję reprezentacyjną. Ma pomóc rozpoznać wpis i nadać mu wizualny punkt zaczepienia. Nie jest jednak gwarancją lepszego pozycjonowania, większej sprzedaży ani innych efektów marketingowych. To przede wszystkim element prezentacji treści.
Obraz wyróżniający a obraz w treści — szybkie porównanie
Zwykły obraz dodany blokiem Obraz jest częścią treści. Wstawiasz go w konkretnym miejscu, na przykład między dwoma akapitami, żeby pokazać detal, przykład albo ilustrację opisywanego fragmentu. Czytelnik widzi go dokładnie tam, gdzie został umieszczony.
Obraz wyróżniający działa szerzej. Jest przypisany do całego wpisu albo strony, a nie do jednego akapitu. Motyw może wykorzystać go na stronie głównej, w archiwum, w nagłówku lub nad tekstem. Jeden wpis może więc mieć jednocześnie obraz wyróżniający i kilka zwykłych obrazów w treści. Nic się tu nie gryzie.
Najprostsze porównanie wygląda tak:
- Obraz w treści ilustruje konkretny fragment tekstu.
- Obraz wyróżniający działa jak okładka całego wpisu.
- Oba elementy mogą występować w jednym artykule.
Jeśli grafika przekazuje istotną informację, warto przygotować dla niej sensowny tekst alternatywny. Gdy jest wyłącznie dekoracyjna, można oznaczyć ją jako dekoracyjną, żeby technologie asystujące nie musiały opowiadać o każdym ozdobniku.
Gdzie WordPress pokazuje obraz wyróżniający?
Tu zaczyna się odpowiedź typu „to zależy”, ale tym razem całkiem uczciwa. Miejsce wyświetlania obrazu wyróżniającego zależy od używanego motywu i jego szablonów. WordPress udostępnia mechanizm, a motyw decyduje, jak z niego skorzysta.
Grafika może pojawić się między innymi:
- na stronie głównej;
- na stronie indeksu bloga;
- na liście wpisów;
- w archiwach kategorii lub tagów;
- nad treścią pojedynczego wpisu;
- w nagłówku albo innym elemencie szablonu.
Jeden motyw pokaże obraz wyróżniający nad tytułem, inny umieści go dopiero pod nagłówkiem, a jeszcze inny wykorzysta go tylko na liście wpisów. Możliwy jest też scenariusz, w którym obraz jest ustawiony poprawnie, ale w danym widoku nie widać go wcale. To nie musi oznaczać problemu z plikiem.
Przed publikacją sprawdź trzy podstawowe miejsca: listę wpisów, stronę pojedynczego wpisu oraz widok archiwalny. Dobrze zerknąć także na telefonie. Nie chodzi o urządzenie konkretnej marki, tylko o to, że motyw może inaczej układać i przycinać grafikę w węższym widoku. Dzięki temu szybciej zauważysz, czy najważniejszy element kadru nie został zjedzony przez szablon.
Jak dobrać kadr, żeby motyw go nie zjadł?
WordPress nie narzuca jednej uniwersalnej proporcji obrazu wyróżniającego dla wszystkich motywów. I bardzo dobrze, bo motywy potrafią prezentować grafiki w różnych miejscach i rozmiarach. Jeden może używać własnego rozmiaru, drugi przyciąć zdjęcie, a trzeci pokazać je w kilku wariantach.
Dlatego przy przygotowywaniu grafiki myśl nie tylko o pełnym pliku, ale też o tym, co zostanie po przycięciu. Najważniejszy obiekt, twarz, produkt czy symbol umieść z zapasem. Nie przyklejaj kluczowego tekstu do samej krawędzi. Krawędź w jednym widoku może być bezpieczna, a w innym nagle zniknąć. Motyw nie robi tego złośliwie. Po prostu ma własny sposób kadrowania.
Praktyczna checklista kadru:
- zostaw zapas wokół głównego elementu;
- nie umieszczaj ważnego tekstu przy krawędziach;
- sprawdź, czy grafika działa po przycięciu;
- obejrzyj ją na liście wpisów, we wpisie i w archiwum;
- sprawdź także węższy widok na telefonie.
To są wskazówki projektowe, a nie oficjalne wymagania WordPressa. Bez znajomości konkretnego motywu nie da się uczciwie wskazać jednego rozmiaru ani proporcji, które zawsze zadziałają.
Jak ustawić obraz wyróżniający w WordPressie?
Najpierw otwórz edycję wybranego wpisu albo strony. Następnie znajdź w panelu ustawień opcję obrazu wyróżniającego. W zależności od konfiguracji możesz wskazać plik już znajdujący się w bibliotece mediów albo przesłać nowy. Po zapisaniu zmian sprawdź podgląd w miejscach, w których motyw może prezentować grafikę.
Nie pomyl tej czynności z dodaniem obrazu blokiem Obraz. Wstawienie grafiki do treści nie musi ustawić jej jako obrazu wyróżniającego. Z kolei z poziomu bloku Obraz można dodatkowo ustawić wybrany plik jako wyróżniający, ale warto potem sprawdzić, czy faktycznie pojawił się w odpowiednim polu ustawień.
Najbezpieczniej korzystać z własnych materiałów albo plików legalnie pozyskanych. Nie podpinaj przypadkowej grafiki z obcego adresu URL tylko dlatego, że wygląda dobrze. Jeśli plik nie zostanie zapisany w bibliotece mediów, może przestać działać po usunięciu, przeniesieniu albo wyłączeniu źródła. I wtedy zamiast okładki wpisu zostaje pusta dziura. Mało efektowna.
Obraz wyróżniający nie wyświetla się — szybka checklista
Ustawiasz obraz, zapisujesz wpis, wchodzisz na stronę i… nic. Spokojnie. Zanim zaczniesz edytować pliki motywu, przejdź krótką checklistę.
- Sprawdź, czy obraz został ustawiony jako wyróżniający. Sama grafika w treści nie wystarczy.
- Sprawdź panel edycji. Opcja obrazu wyróżniającego może być ukryta w ustawieniach interfejsu.
- Sprawdź motyw. Nie każdy motyw obsługuje obrazy wyróżniające w taki sam sposób.
- Sprawdź widok. Grafika może być widoczna na liście wpisów, ale nie w pojedynczym artykule albo odwrotnie.
- Sprawdź szablon. Jeśli obraz jest dostępny w edytorze, ale nie widać go na stronie, przyczyną może być projekt konkretnego szablonu.
W klasycznych motywach obsługa obrazów wyróżniających wiąże się z funkcją post-thumbnails. Jeżeli motyw nie deklaruje odpowiedniej obsługi, panel może nie udostępniać właściwej opcji. To już temat konfiguracji motywu, a nie samego pliku graficznego.
Warto też ustalić, czy problem dotyczy wszystkich wpisów, czy tylko jednego. Jeśli obraz znika wyłącznie w konkretnym miejscu, bardziej prawdopodobny jest sposób zbudowania danego widoku niż awaria grafiki. Najpierw sprawdź ustawienia motywu, panel edycji i dokumentację używanego szablonu. Nie zmieniaj ręcznie plików motywu ani nie dodawaj kodu bez kopii zapasowej i podstawowej wiedzy technicznej. Z jednym brakującym obrazkiem nie trzeba od razu ruszać z piłą mechaniczną.
Najczęstsze wpadki z obrazem wyróżniającym
Obraz wyróżniający jest prosty w użyciu, ale kilka drobiazgów potrafi zepsuć efekt. Przed publikacją przeleć tę listę:
- ważny tekst lub główny element grafiki znajduje się przy samej krawędzi;
- obraz przekazuje informację, ale nie ma sensownego tekstu alternatywnego;
- plik jest podpięty z obcego adresu URL i nie został zapisany w bibliotece mediów;
- grafika została sprawdzona tylko w edytorze, bez podglądu na stronie;
- zakładasz, że każdy motyw pokaże ją dokładnie tak samo;
- traktujesz obraz wyróżniający jak gwarancję efektu SEO albo sprzedaży;
- korzystasz z grafiki bez sprawdzenia praw do jej użycia.
Najczęstszy błąd to myślenie, że ustawienie obrazu kończy temat. W praktyce dopiero podgląd pokazuje, czy kadr działa. Jeśli grafika jest ważna dla zrozumienia wpisu, zadbaj o opis alternatywny. Jeśli pełni tylko funkcję ozdobną, rozważ oznaczenie jej jako dekoracyjnej. I pamiętaj: motyw może przyciąć obraz, pominąć go w konkretnym szablonie albo użyć go tylko w wybranym miejscu.
Obraz wyróżniający WordPress to grafika przypisana do całego wpisu lub strony, a nie zwykły obrazek wrzucony między akapity. Motyw decyduje, gdzie ją pokaże, dlatego nie ma jednego rozmiaru ani miejsca dobrego dla każdego przypadku. Najważniejsze są trzy rzeczy: odróżnij obraz wyróżniający od grafiki w treści, przygotuj kadr z zapasem i sprawdź kilka widoków przed publikacją. Gdy grafika znika, zacznij od panelu, ustawień motywu i szablonu, zamiast od razu grzebać w kodzie. Jeśli ustawienie, przygotowanie albo dopasowanie grafiki do motywu zaczyna przypominać walkę z bossem, Napisz do Szwagra i opowiedz, czego potrzebujesz — strony, grafiki, filmu albo tekstów.
