Ściana tekstu bez obrazków to pewny sposób, by stracić czytelnika w ciągu pierwszych pięciu sekund. Wyróżniony obrazek (Featured Image) działa jak okładka wpisu: to właśnie on jest widoczny w strumieniu postów, widgetach i podglądach w mediach społecznościowych. Sprzedaje kliknięcie, zanim jeszcze ktoś przeczyta tytuł.

Problem w tym, że WordPress nie zmusza autora do ustawienia miniatury. Jeden post przyciąga uwagę ogromnym zdjęciem, drugi kurczy się do malutkiego kwadratu, a trzeci jest całkiem bez obrazka. Strona główna zamienia się w wizualny chaos, a Facebook i Telegram pobierają przypadkowe logo zamiast sensownego podglądu.

Poniżej znajduje się pełna analiza mechaniki Featured Image: od dodania pierwszej miniatury po wymuszone sprawdzenie przed publikacją. Z działającym kodem, konkretną wtyczką i instrukcjami krok po kroku.

💡 Szybki przegląd:

• Dodajemy Featured Image przez panel boczny edytora
• Rozpracowujemy rozmiary: co WordPress robi pod maską i jak to przekonfigurować
• Instalujemy Simple Image Sizes i dostosowujemy wymiary do swojego motywu
• Automatyzujemy ustawianie miniatury kodem w functions.php
• Rozwiązujemy problem z zapominalskimi autorami: bez obrazka post trafia do wersji roboczej

Jak działają wyróżnione obrazki

Featured Image (lub post thumbnail) to meta-pole wpisu, które motyw wykorzystuje do wyświetlania w trzech kluczowych miejscach:

• Strona główna i archiwa. Podgląd z obrazkiem zbiera wielokrotnie więcej kliknięć niż goły link tekstowy.
• Nagłówek samego wpisu. Motyw wyświetla miniaturę nad tytułem lub tuż pod nim, często na całą szerokość obszaru treści.
• Media społecznościowe. Facebook, X i Telegram pobierają właśnie Featured Image przez Open Graph. Jeśli nie ma obrazka, serwis społecznościowy wstawi cokolwiek.

Funkcja ta już dawno stała się standardem WordPressa. Dziś nie sposób znaleźć przyzwoity motyw bez jej obsługi. Jednak jakość implementacji wciąż różni się w zależności od dewelopera: jeden motyw wyświetla miniaturę jako schludny baner, inny rozciąga malutki kwadrat na całą szerokość.

Dodajemy Featured Image: podstawowa mechanika

W edytorze wpisu (Gutenberg lub Classic) po prawej stronie znajduje się panel „Wyróżniony obrazek". Klikają Państwo „Ustaw wyróżniony obrazek", przesyłają plik lub wybierają go z biblioteki mediów, klikają „Ustaw". Gotowe.

Niuanse: WordPress nie wymaga od autora ustawienia obrazka. Jeśli zapomni, publikacja trafia do strumienia z pustym miejscem. Rozwiązanie tego problemu omówimy w rozdziale o wymuszonym sprawdzaniu.

Rozmiary obrazków: co WordPress robi pod maską

Każda instalacja WordPressa od razu po wyjęciu z pudełka operuje czterema rozmiarami:

• Oryginalny, oryginalny plik bez zmian
• Miniatura, kwadrat (domyślnie 150×150 px zgodnie z ustawieniami mediów WordPress), przycinany do środka
• Średni, skalowany do zadanej maksymalnej szerokości, bez kadrowania
• Duży, to samo, ale z większym limitem

Ustawienia znajdują się w „Ustawienia → Media". Podczas przesyłania nowego obrazka WordPress generuje wszystkie cztery wersje plus dodatkowe rozmiary, które rejestruje aktywny motyw. Każda wersja trafia do wp-content/uploads/ jako osobny plik.

Po co tyle kopii? Bez nich projektant musiałby ręcznie dopasowywać każdy rozmiar do konkretnego miejsca wyświetlania. Dzięki nim motyw po prostu żąda odpowiedniego wariantu przez the_post_thumbnail('medium') lub wp_get_attachment_image_src(). Więcej szczegółów na temat budowy podsystemu mediów znajduje się w oficjalnej dokumentacji WordPressa.

Miniatura to jedyny rozmiar, który jest przycinany obowiązkowo. Pozostałe są skalowane z zachowaniem proporcji.

Zmieniamy rozmiar wyróżnionego obrazka

Motywy używają różnych wymiarów. Przy zmianie motywu lub pod nowe zadanie rozmiar Featured Image może wymagać korekty.

Najpierw proszę zajrzeć do ustawień motywu: „Wygląd → Dostosuj". Współczesne motywy często oferują suwak lub rozwijaną listę dla szerokości i wysokości miniatury. Jeśli Państwo znajdą, zmieniają w dwa kliknięcia.

Jeśli nie znajdą, to nie problem. Wtyczka Simple Image Sizes rozwiązuje zadanie bez ani jednej linii kodu.

Simple Image Sizes: właściwe narzędzie do rozmiarów

Darmowa wtyczka od Nicolasa Juena, aktywnie wspierana (aktualna wersja 3.2.5, wymaga PHP 8.0+). Po instalacji wchodzą Państwo w „Ustawienia → Media" i widzą wszystkie zarejestrowane rozmiary, włącznie z tymi, które motyw dodał, ale ukrył przed oczami.

Dla każdego rozmiaru określają Państwo szerokość i wysokość. W przypadku Featured Image proszę kierować się tym, jak motyw go wyświetla. Baner na całą szerokość treści, proszę ustawić 1200×630 px (optymalnie dla mediów społecznościowych zgodnie z zaleceniami Facebook Open Graph). Kwadratowa miniatura w siatce, 400×400 lub 600×600 px.

Plusy:

• Widzi wszystkie rozmiary, włącznie z ukrytymi przez motyw
• Pozwala włączać i wyłączać wyświetlanie rozmiaru na rozwijanej liście wstawiania mediów
• Generuje gotowy kod PHP add_image_size() do przeniesienia do motywu

Minusy:

• Wymaga PHP 8.0+, na szczerze starych hostingach nie zadziała
• Interfejs ascetyczny, bez wizualnych podpowiedzi

Cena: bezpłatnie, bez wersji Pro.

🔗 Simple Image Sizes na WordPress.org

Co zrobić ze starymi obrazami

WordPress stosuje nowe rozmiary tylko do świeżo przesłanych plików. Wszystko, co przesłali Państwo wcześniej, pozostaje w starych wymiarach.

Simple Image Sizes rozwiązuje również to zadanie. Na stronie „Ustawienia → Media" proszę przewinąć w dół do bloku regeneracji. Proszę wybrać żądany rozmiar, wskazać typ wpisu i uruchomić przebudowę. Wtyczka przejdzie przez wszystkie istniejące obrazy i utworzy nowe kopie dla zaktualizowanych rozmiarów.

Ostrzeżenie: na stronach z dziesiątkami tysięcy plików regeneracja zjada miejsce na serwerze. WordPress nie usuwa starych miniatur, pozostają one w folderze jako martwy balast. Przed masową regeneracją proszę upewnić się, że na dysku jest zapas miejsca.

Automatyczne ustawianie wyróżnionego obrazu

Gdy we wpisie jest obraz, a pole wyróżnionego obrazu jest puste, WordPress może pobrać pierwszy obraz z treści i przypisać go jako miniaturę. Wygodne dla autorów, którzy regularnie zapominają o tym kroku, oraz dla blogów z publikacją strumieniową.

Mechanika jest prosta: jeśli wyróżniony obraz nie został ustawiony ręcznie, funkcja znajduje pierwszy załączony obraz przez get_children i ustawia go przez set_post_thumbnail().

Kod dodaje się do functions.php aktywnego motywu. Zdecydowanie zalecam robić to przez wtyczkę WPCode, błąd w functions.php bez niej rozwala stronę doszczętnie:

1
function autoset_featured() {
2
    global $post;
3
    $already_has_thumb = has_post_thumbnail( $post->ID );
4
    if ( ! $already_has_thumb ) {
5
        $attached_image = get_children( array(
6
            'post_parent'    => $post->ID,
7
            'post_type'      => 'attachment',
8
            'post_mime_type' => 'image',
9
            'numberposts'    => 1,
10
        ) );
11
        if ( $attached_image ) {
12
            foreach ( $attached_image as $attachment_id => $attachment ) {
13
                set_post_thumbnail( $post->ID, $attachment_id );
14
            }
15
        }
16
    }
17
}
18
 
19
add_action( 'the_post', 'autoset_featured' );
20
add_action( 'save_post', 'autoset_featured' );
21
add_action( 'draft_to_publish', 'autoset_featured' );
22
add_action( 'new_to_publish', 'autoset_featured' );
23
add_action( 'pending_to_publish', 'autoset_featured' );
24
add_action( 'future_to_publish', 'autoset_featured' );

Funkcja działa na sześciu hakach: the_post, save_post i wszystkich przejściach statusu *_to_publish. Po przypisaniu miniatura pozostaje, nawet jeśli usuną Państwo obraz z treści wpisu.

Minus: jeśli autor nie wstawił żadnego obrazu do tekstu, miniatury nie będzie. Dla tego scenariusza, następny rozdział.

Wymuszone sprawdzenie: bez miniatury publikacji nie ma

Prosta i twarda metoda: autor klika „Opublikuj", a WordPress zapisuje wpis jako szkic i pokazuje ostrzeżenie. Bez wyróżnionego obrazu publikacja nie przechodzi.

Dwa fragmenty kodu w functions.php:

Część 1, sprawdzenie podczas zapisywania (tylko dla typu post):

1
add_action( 'save_post', 'pu_validate_thumbnail' );
2
 
3
function pu_validate_thumbnail( $post_id ) {
4
    if ( get_post_type( $post_id ) != 'post' ) {
5
        return;
6
    }
7
 
8
    if ( ! has_post_thumbnail( $post_id ) ) {
9
        set_transient( 'pu_validate_thumbnail_failed', 'true' );
10
        remove_action( 'save_post', 'pu_validate_thumbnail' );
11
        wp_update_post( array( 'ID' => $post_id, 'post_status' => 'draft' ) );
12
        add_action( 'save_post', 'pu_validate_thumbnail' );
13
    } else {
14
        delete_transient( 'pu_validate_thumbnail_failed' );
15
    }
16
}

Część 2, komunikat o błędzie w panelu administracyjnym:

1
add_action( 'admin_notices', 'pu_validate_thumbnail_error' );
2
 
3
function pu_validate_thumbnail_error() {
4
    if ( get_transient( 'pu_validate_thumbnail_failed' ) == 'true' ) {
5
        echo '<div class="notice notice-error"><p><strong>Перед публикацией необходимо установить избранное изображение.</strong></p></div>';
6
        delete_transient( 'pu_validate_thumbnail_failed' );
7
    }
8
}

Tekst komunikatu jest w pełni konfigurowalny, proszę zastąpić ciąg wewnątrz <p><strong>...</strong></p> własnym.

Podgląd miniatur na liście wpisów

Standardowa tabela „Wpisy → Wszystkie wpisy" pokazuje tytuł, autora, kategorie, tagi i datę. Nie ma tam wyróżnionego obrazu. Aby sprawdzić, które wpisy nie mają miniatury, trzeba otwierać każdy z osobna. Przy ponad 50 publikacjach jest to irytujące.

Poniższy kod dodaje kolumnę Thumbs do tabeli wpisów i stron:

1
add_filter( 'manage_posts_columns', 'posts_columns', 5 );
2
add_action( 'manage_posts_custom_column', 'posts_custom_columns', 5, 2 );
3
 
4
add_filter( 'manage_post-type_posts_columns', 'posts_columns', 5 );
5
add_action( 'manage_post-type_posts_custom_column', 'posts_custom_columns', 5, 2 );
6
 
7
function posts_columns( $defaults ) {
8
    $defaults['riv_post_thumbs'] = __( 'Thumbs' );
9
    return $defaults;
10
}
11
 
12
function posts_custom_columns( $column_name, $id ) {
13
    if ( $column_name === 'riv_post_thumbs' ) {
14
        if ( has_post_thumbnail() ) {
15
            echo the_post_thumbnail( array( 100, 100 ) );
16
        } else {
17
            _e( 'No Thumbnail For Post' );
18
        }
19
        echo '<style>.column-riv_post_thumbs img{max-height:100px;max-width:100px;}</style>';
20
    }
21
}

Rozmiar podglądu ustawiono na 100×100 px, do szybkiej kontroli wizualnej to wystarcza. Jeśli potrzeba więcej, proszę zastąpić array(100, 100) przez array(200, 200). Więcej o parametrach w dokumentacji the_post_thumbnail.

Dla stron proszę dodać te dwa wiersze na początku fragmentu:

1
add_filter( 'manage_pages_columns', 'posts_columns', 5 );
2
add_action( 'manage_pages_custom_column', 'posts_custom_columns', 5, 2 );

Teraz w sekcji „Strony → Wszystkie strony" również widać, gdzie jest miniatura, a gdzie jej nie ma.

Sprawiamy, by miniatura była klikalna

Dobry motyw automatycznie opakowuje Featured Image w link do posta. Zły wyświetla statyczny obrazek, który nigdzie nie prowadzi. Odwiedzający klika w podgląd na stronie głównej i nic się nie dzieje.

Naprawia się to jednym filtrem w functions.php:

1
function wcs_auto_link_post_thumbnails( $html, $post_id, $post_image_id ) {
2
    $html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
3
    return $html;
4
}
5
add_filter( 'post_thumbnail_html', 'wcs_auto_link_post_thumbnails', 10, 3 );

Filtr post_thumbnail_html przechwytuje kod HTML miniatury i opakowuje ją w link z get_permalink(). Tytuł posta trafia do atrybutu title przez esc_attr(), bezpiecznie i informacyjnie.

Zmieniamy tekst „Ustaw jako obrazek wyróżniający"

Gdy na stronie działa automatyczne ustawianie miniatury z treści, standardowy napis „Ustaw jako obrazek wyróżniający" wprowadza autorów w błąd. Wydaje się, że obrazek trzeba wstawić ręcznie, choć system zrobi to sam.

Zmieniamy tekst na informacyjny:

1
function change_featured_image_text( $content ) {
2
    return $content = str_replace(
3
        __( 'Set featured image' ),
4
        __( 'Эскиз установится автоматически из первой картинки поста' ),
5
        $content
6
    );
7
}
8
add_filter( 'admin_post_thumbnail_html', 'change_featured_image_text' );

Filtr admin_post_thumbnail_html odpowiada za blok HTML Featured Image w panelu bocznym edytora. Proszę wstawić dowolny tekst wewnątrz __( ... ) drugiego argumentu str_replace.

Wideo: jak to wszystko działa w praktyce

Jeśli woli Pan/Pani demonstrację wizualną, oto pełne omówienie od WPBeginner: od dodania pierwszej miniatury po precyzyjne ustawienie rozmiarów i automatyzację.

⁉️🤔 Często zadawane pytania

Dlaczego obrazek wyróżniający nie wyświetla się na stronie?

Najprawdopodobniej motyw nie obsługuje funkcji post-thumbnails. Proszę sprawdzić functions.php: powinna tam być linia add_theme_support( 'post-thumbnails' ). Jeśli jej nie ma, proszę dodać. Drugi powód: w ustawieniach motywu wyłączono pokazywanie Featured Image dla konkretnego typu wpisów. Trzeci: wtyczka cache przechowuje starą wersję strony, proszę wyczyścić cache.

Czym Featured Image różni się od okładki (Cover Image)?

Featured Image to metapole wpisu, które motyw wykorzystuje do podglądu na liście wpisów, w archiwach i Open Graph. Cover Image to blok wewnątrz treści (pojawił się w Gutenbergu), który wyświetla się tylko w treści posta i nie wpływa na media społecznościowe. Można używać obu jednocześnie: okładka do wizualnego wejścia w artykuł, Featured Image do wszystkiego innego.

Jaki rozmiar ustawić dla obrazka wyróżniającego?

Dla mediów społecznościowych optymalny jest format 1200×630 px (proporcje 1.91:1) zgodnie z dokumentacją Facebooka dla deweloperów. Dla siatki postów na stronie głównej proszę kierować się tym, co zdefiniowano w ustawieniach motywu. Jeśli motyw używa kwadratowych miniatur, 600×600 lub 800×800 px. Przed przesłaniem proszę skompresować obrazek do 100-150 KB przez TinyPNG lub ShortPixel.

Czy trzeba koniecznie ustawiać Featured Image dla każdego posta?

Technicznie nie. Ale bez niego strona główna i media społecznościowe wyglądają niechlujnie, a klikalność spada 2-3 razy. Jeśli obawia się Pan/Pani, że zapomni, proszę użyć kodu wymuszającego sprawdzenie z sekcji powyżej lub wtyczki Quick Featured Images, która podstawia domyślną miniaturę dla postów bez obrazka.

Jak usunąć lub zastąpić obrazek wyróżniający?

W edytorze wpisu proszę kliknąć bieżący Featured Image w panelu bocznym. Otworzy się biblioteka mediów, proszę kliknąć „Usuń obrazek wyróżniający". Po tym przycisk ponownie zmieni się na „Ustaw jako obrazek wyróżniający". Proszę przesłać nowy.

Czy można użyć jednego obrazka jako Featured Image dla kilku postów?

Tak, WordPress nie nakłada ograniczeń. Proszę wybrać ten sam plik z biblioteki mediów dla różnych wpisów. Ale jeśli obrazek powtarza się na liście wpisów, wygląda to jak błąd lub niedopatrzenie. Dla wizualnej różnorodności lepiej dobierać unikalne miniatury.

Co zrobić z obrazkami wyróżniającymi od zaraz

Featured Image to nie opcja „do wyboru", lecz obowiązkowy element każdego wpisu. Bez niego media społecznościowe podstawiają przypadkową treść, strona główna traci wizualną strukturę, a klikalność spada wielokrotnie.

Proszę przejść checklistę w dziesięć minut:

• Proszę otworzyć dowolny wpis i upewnić się, że Featured Image jest ustawiony.
• Proszę sprawdzić, jak wygląda na stronie głównej i w mediach społecznościowych (pomoże Facebook Sharing Debugger).
• Jeśli rozmiary nie zgadzają się z oczekiwaniami, proszę zainstalować Simple Image Sizes i poprawić wymiary.
• Jeśli pracuje Pan/Pani z zespołem autorów, proszę dodać kod wymuszający sprawdzenie, aby publikacja bez miniatury trafiała do wersji roboczej.

Te dziesięć minut zaoszczędzi godziny ręcznych poprawek i dziesiątki straconych czytelników. Proszę zrobić to teraz.