Skip to content

Всё для WordPress, веб-разработки — и не только

🖼 Избранные изображения WordPress: настройка, автоустановка и тонкая доработка

🖼 Избранные изображения WordPress: настройка, автоустановка и тонкая доработка

Текстовая простыня без картинок, верный способ потерять читателя за первые пять секунд. Избранное изображение (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. Сегодня невозможно найти вменяемую тему без её поддержки. Но качество реализации всё ещё скачет от разработчика к разработчику: одна тема выводит эскиз аккуратным баннером, другая растягивает крошечный квадрат на всю ширину.

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

Нюанс: WordPress не требует от автора ставить картинку. Забыли, публикация уходит в ленту с пустым местом. Решение этой проблемы разберём в разделе про принудительную проверку.

Размеры изображений: что WordPress делает под капотом

Каждая установка WordPress из коробки оперирует четырьмя размерами:

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

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

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

Миниатюра, единственный размер, который обрезается принудительно. Остальные масштабируются с сохранением пропорций.

Меняем размер избранного изображения

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

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

Не нашли, не проблема. Плагин Simple Image Sizes решает задачу без единой строчки кода.

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

Плагин Simple Image Sizes в списке установленных плагинов WordPress

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

Страница настроек размеров изображений с плагином Simple Image Sizes

Для каждого размера задаёте ширину и высоту. Для 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

Simple Image Sizes закрывает и эту задачу. На странице «Настройки → Медиа» прокрутите вниз до блока регенерации. Выберите нужный размер, укажите тип записи и запустите перестроение. Плагин пройдётся по всем существующим изображениям и создаст новые копии под обновлённые размеры.

Предупреждение: на сайтах с десятками тысяч файлов регенерация съедает место на сервере. Старые эскизы WordPress не удаляет, они остаются в папке мёртвым грузом. Перед массовой регенерацией убедитесь, что на диске есть запас.

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

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

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

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

1function 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
19add_action( 'the_post', 'autoset_featured' );
20add_action( 'save_post', 'autoset_featured' );
21add_action( 'draft_to_publish', 'autoset_featured' );
22add_action( 'new_to_publish', 'autoset_featured' );
23add_action( 'pending_to_publish', 'autoset_featured' );
24add_action( 'future_to_publish', 'autoset_featured' );

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

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

Принудительная проверка: без эскиза публикации нет

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

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

Часть 1, проверка при сохранении (только для типа post):

1add_action( 'save_post', 'pu_validate_thumbnail' );
2
3function 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, сообщение об ошибке в админке:

1add_action( 'admin_notices', 'pu_validate_thumbnail_error' );
2
3function 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+ публикациях это бесит.

Колонка с превью избранного изображения в таблице записей WordPress

Код ниже добавляет колонку Thumbs в таблицу записей и страниц:

1add_filter( 'manage_posts_columns', 'posts_columns', 5 );
2add_action( 'manage_posts_custom_column', 'posts_custom_columns', 5, 2 );
3
4add_filter( 'manage_post-type_posts_columns', 'posts_columns', 5 );
5add_action( 'manage_post-type_posts_custom_column', 'posts_custom_columns', 5, 2 );
6
7function posts_columns( $defaults ) {
8 $defaults['riv_post_thumbs'] = __( 'Thumbs' );
9 return $defaults;
10}
11
12function 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.

Для страниц добавьте эти две строки в начало фрагмента:

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

Теперь в разделе «Страницы → Все страницы» тоже видно, где есть эскиз, а где нет.

Делаем миниатюру кликабельной

Хорошая тема автоматически оборачивает Featured Image в ссылку на пост. Плохая, выводит статичную картинку, которая никуда не ведёт. Посетитель тычет в превью на главной, и ничего не происходит.

Исправляется одним фильтром в functions.php:

1function 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}
5add_filter( 'post_thumbnail_html', 'wcs_auto_link_post_thumbnails', 10, 3 );

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

Меняем текст «Установить избранное изображение»

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

Стандартная кнопка Set featured image в боковой панели редактора WordPress

Меняем текст на информативный:

1function change_featured_image_text( $content ) {
2 return $content = str_replace(
3 __( 'Set featured image' ),
4 __( 'Эскиз установится автоматически из первой картинки поста' ),
5 $content
6 );
7}
8add_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 и поправьте габариты.
  • Если работаете с командой авторов, добавьте код принудительной проверки, чтобы публикация без эскиза уходила в черновик.

Эти десять минут сэкономят часы ручной правки и десятки потерянных читателей. Сделайте сейчас.