Текстова простирадло без картинок — це вірний спосіб втратити читача за перші п’ять секунд. Вибране зображення (Featured Image) працює як обкладинка запису: саме його бачать у стрічці постів, віджетах і прев’ю соцмереж. Воно продає клік ще до того, як людина прочитала заголовок.

Проблема в тому, що WordPress не змушує автора ставити ескіз. Один пост виїжджає за рахунок величезного фото, другий стискається в крихітний квадрат, третій взагалі без картинки. Головна сторінка перетворюється на візуальний хаос, а Facebook і Telegram підтягують випадковий логотип замість осмисленого прев’ю.

Нижче, повний розбір механіки Featured Image: від додавання першого ескізу до примусової перевірки перед публікацією. З робочим кодом, конкретним плагіном і покроковими інструкціями.

💡 Швидкий огляд:

• Додаємо Featured Image через бічну панель редактора
• Розбираємося з розмірами: що WordPress робить під капотом і як це переналаштувати
• Ставимо Simple Image Sizes і правимо габарити під свою тему
• Автоматизуємо встановлення ескізу кодом у functions.php
• Закриваємо питання із забудькуватими авторами: без картинки пост іде в чернетку

Як працюють вибрані зображення

Featured Image (або post thumbnail) — це мета-поле запису, яке тема використовує для виведення в трьох ключових точках:

• Головна сторінка й архіви. Прев’ю з картинкою збирає кратно більше кліків, ніж голе текстове посилання.
• Шапка самого запису. Тема виводить ескіз над заголовком або одразу під ним, часто на всю ширину контентної області.
• Соціальні мережі. Facebook, X і Telegram підтягують саме Featured Image через Open Graph. Немає картинки, соцмережа підставить що завгодно.

Функція давно стала стандартом WordPress. Сьогодні неможливо знайти адекватну тему без її підтримки. Але якість реалізації все ще скаче від розробника до розробника: одна тема виводить ескіз акуратним банером, інша розтягує крихітний квадрат на всю ширину.

Додаємо Featured Image: базова механіка

У редакторі запису (Gutenberg або Classic) справа є панель «Вибране зображення». Натискаєте «Встановити вибране зображення», завантажуєте файл або вибираєте з медіатеки, тиснете «Встановити». Готово.

Нюанс: WordPress не вимагає від автора ставити картинку. Забули, публікація йде в стрічку з порожнім місцем. Розв’язання цієї проблеми розберемо в розділі про примусову перевірку.

Розміри зображень: що WordPress робить під капотом

Кожна інсталяція WordPress з коробки оперує чотирма розмірами:

• Вихідний, оригінальний файл без змін
• Мініатюра, квадрат (за замовчуванням 150×150 px згідно з налаштуваннями медіа WordPress), обрізається по центру
• Середній, стискається під задану максимальну ширину, без кадрування
• Великий, те саме, але з більшим лімітом

Налаштування знаходяться в «Налаштування → Медіа». Під час завантаження нового зображення WordPress генерує всі чотири версії плюс додаткові розміри, які реєструє активна тема. Кожна версія потрапляє в wp-content/uploads/ окремим файлом.

Навіщо стільки копій? Без них дизайнеру довелося б вручну підганяти кожен розмір під конкретне місце виведення. З ними тема просто запитує потрібний варіант через the_post_thumbnail('medium') або wp_get_attachment_image_src(). Докладніше про будову медіа-підсистеми, в офіційній документації WordPress.

Мініатюра — це єдиний розмір, який обрізається примусово. Решта масштабуються зі збереженням пропорцій.

Змінюємо розмір вибраного зображення

Теми використовують різні габарити. При зміні теми або під нове завдання розмір Featured Image може потребувати коригування.

Спершу зазирніть у налаштування теми: «Зовнішній вигляд → Налаштувати». Сучасні теми часто дають повзунок або випадний список для ширини й висоти ескізу. Знайшли, міняйте у два кліки.

Не знайшли, не проблема. Плагін Simple Image Sizes вирішує завдання без жодного рядка коду.

Simple Image Sizes: правильний інструмент для розмірів

Безкоштовний плагін від Nicolas Juen, активно підтримується (актуальна версія 3.2.5, вимагає PHP 8.0+). Після встановлення заходите в «Налаштування → Медіа» й бачите всі зареєстровані розміри, включно з тими, які тема додала, але сховала від очей.

Для кожного розміру задаєте ширину й висоту. Для Featured Image орієнтуйтеся на те, як тема його виводить. Банер на всю ширину контенту, ставте 1200×630 px (оптимально для соцмереж за рекомендаціями Facebook Open Graph). Квадратний ескіз у сітці, 400×400 або 600×600 px.

Плюси:

• Бачить усі розміри, включно з прихованими темою
• Дозволяє вмикати й вимикати показ розміру у випадному списку вставки медіа
• Генерує готовий PHP-код add_image_size() для перенесення в тему

Мінуси:

• Потребує PHP 8.0+, на відверто старих хостингах не запрацює
• Інтерфейс аскетичний, без візуальних підказок

Ціна: безплатно, без Pro-версії.

🔗 Simple Image Sizes на WordPress.org

Що робити зі старими зображеннями

WordPress застосовує нові розміри лише до свіжих завантажень. Усе, що ви завантажили раніше, залишається в старих габаритах.

Simple Image Sizes закриває й це завдання. На сторінці «Налаштування → Медіа» прокрутіть униз до блоку регенерації. Виберіть потрібний розмір, вкажіть тип запису та запустіть перебудову. Плагін пройдеться по всіх наявних зображеннях і створить нові копії під оновлені розміри.

Попередження: на сайтах із десятками тисяч файлів регенерація з’їдає місце на сервері. Старі ескізи WordPress не видаляє, вони залишаються в папці мертвим вантажем. Перед масовою регенерацією переконайтеся, що на диску є запас.

Автоматичне встановлення вибраного зображення

Коли в дописі є зображення, а Featured Image порожнє, WordPress може взяти перше зображення з контенту й призначити його ескізом. Зручно для авторів, які регулярно забувають про цей крок, і для блогів із потоковою публікацією.

Механіка проста: якщо вибране зображення не задано вручну, функція знаходить перше прикріплене зображення через get_children і ставить його через set_post_thumbnail().

Код додається до functions.php активної теми. Настійно рекомендую робити це через плагін WPCode, помилка в functions.php без нього ламає сайт ущент:

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

Функція спрацьовує на шести хуках: the_post, save_post і всіх переходах статусу *_to_publish. Після призначення ескіз залишається, навіть якщо ви видалите зображення з тіла допису.

Мінус: якщо автор не вставив жодного зображення в текст, ескізу не буде. Для цього сценарію, наступний розділ.

Примусова перевірка: без ескізу публікації немає

Простий і жорсткий метод: автор тисне «Опублікувати», а WordPress зберігає допис як чернетку й показує попередження. Без Featured Image публікація не проходить.

Два фрагменти коду в functions.php:

Частина 1, перевірка під час збереження (тільки для типу 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
}

Частина 2, повідомлення про помилку в адмінці:

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
}

Текст повідомлення повністю налаштовується, замініть рядок усередині <p><strong>...</strong></p> на свій.

Попередній перегляд мініатюр у списку записів

Стандартна таблиця «Записи → Усі записи» показує заголовок, автора, категорії, теги та дату. Вибраного зображення там немає. Щоб перевірити, у яких дописів немає ескізу, доводиться відкривати кожен окремо. На 50+ публікаціях це дратує.

Код нижче додає колонку Thumbs у таблицю записів і сторінок:

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
}

Розмір попереднього перегляду задано як 100×100 px, для швидкого візуального контролю цього достатньо. Потрібно більше, замініть array(100, 100) на array(200, 200). Докладніше про параметри в документації the_post_thumbnail.

Для сторінок додайте ці два рядки на початок фрагмента:

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

Тепер у розділі «Сторінки → Усі сторінки» теж видно, де є ескіз, а де немає.

Робимо мініатюру клікабельною

Хороша тема автоматично обгортає Featured Image у посилання на пост. Погана виводить статичну картинку, яка нікуди не веде. Відвідувач тицяє у прев’ю на головній, і нічого не відбувається.

Виправляється одним фільтром у 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 );

Фільтр post_thumbnail_html перехоплює HTML-вивід мініатюри та обгортає її в посилання з get_permalink(). Заголовок поста потрапляє в атрибут title через esc_attr(), безпечно та інформативно.

Змінюємо текст «Установить избранное изображение»

Коли на сайті працює автовстановлення ескізу з контенту, стандартний напис «Установить избранное изображение» вводить авторів в оману. Здається, що картинку потрібно ставити вручну, хоча система зробить це сама.

Змінюємо текст на інформативний:

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

Фільтр admin_post_thumbnail_html відповідає за HTML-блок Featured Image у сайдбарі редактора. Підставте будь-який текст усередині __( ... ) другого аргументу str_replace.

Відео: як усе працює на практиці

Якщо віддаєте перевагу візуальній демонстрації, ось повний розбір від WPBeginner: від додавання першого ескізу до тонкого налаштування розмірів та автоматизації.

⁉️🤔 Часті запитання

Чому обране зображення не відображається на сайті?

Найімовірніше, тема не підтримує функцію post-thumbnails. Перевірте functions.php: там має бути рядок add_theme_support( 'post-thumbnails' ). Якщо його немає, додайте. Друга причина: у налаштуваннях теми вимкнено показ Featured Image для конкретного типу записів. Третя: плагін кешування тримає стару версію сторінки, скиньте кеш.

Чим Featured Image відрізняється від обкладинки (Cover Image)?

Featured Image — це метаполе запису, яке тема використовує для прев’ю в стрічці, архівах та Open Graph. Cover Image — це блок усередині контенту (з’явився в Gutenberg), який відображається лише в тілі поста і не впливає на соцмережі. Можна використовувати обидва одночасно: обкладинка для візуального входу в статтю, Featured Image для всього іншого.

Який розмір ставити для обраного зображення?

Для соцмереж оптимальним є формат 1200×630 px (співвідношення 1.91:1) згідно з документацією Facebook для розробників. Для сітки постів на головній орієнтуйтеся на те, що задано в налаштуваннях теми. Якщо тема використовує квадратні ескізи, 600×600 або 800×800 px. Перед завантаженням стискайте зображення до 100-150 КБ через TinyPNG або ShortPixel.

Чи обов’язково ставити Featured Image для кожного поста?

Технічно ні. Але без нього головна сторінка та соцмережі виглядають неохайно, а клікабельність падає у 2-3 рази. Якщо боїтеся забути, використовуйте код примусової перевірки з розділу вище або плагін Quick Featured Images, який підставляє дефолтний ескіз для постів без картинки.

Як видалити або замінити обране зображення?

У редакторі запису натисніть на поточне Featured Image у бічній панелі. Відкриється медіатека, клацніть «Видалити обране зображення». Після цього кнопка знову стане «Встановити обране зображення». Завантажуйте нове.

Чи можна використовувати одне зображення як Featured Image для кількох постів?

Так, WordPress не накладає обмежень. Вибирайте один і той самий файл із медіатеки для різних записів. Але якщо картинка повторюється в стрічці — це виглядає як баг або недогляд. Для візуального розмаїття краще добирати унікальні ескізи.

Що робити з обраними зображеннями прямо зараз

Featured Image — це не опція «за бажанням», а обов’язковий елемент кожного запису. Без нього соцмережі підставляють випадковий контент, головна сторінка втрачає візуальну структуру, а клікабельність просідає кратно.

Пройдіть чек-лист за десять хвилин:

• Відкрийте будь-який запис і переконайтеся, що Featured Image встановлено.
• Перевірте, як він виглядає на головній та в соцмережах (Facebook Sharing Debugger у поміч).
• Якщо розміри не збігаються з очікуванням, поставте Simple Image Sizes і поправте габарити.
• Якщо працюєте з командою авторів, додайте код примусової перевірки, щоб публікація без ескізу йшла в чернетку.

Ці десять хвилин зекономлять години ручного виправлення та десятки втрачених читачів. Зробіть зараз.