WordPress · 03.10.2026 · 5 мин чтения

Миниатюры записей в WordPress: размеры и вывод в теме

Миниатюра записи в WordPress — это картинка из поля «Изображение записи». Её используют в карточках блога и в начале статьи. Изображение для превью в соцсетях обычно настраивает SEO-плагин.

Разберём, как включить миниатюры в классической теме, задать размеры и вывести картинку через PHP. Для блочной темы достаточно блока «Изображение записи».

1. Включи поддержку миниатюр

Если панель «Изображение записи» отсутствует, проверь её видимость в настройках редактора и поддержку миниатюр в теме. Для классической темы добавь в functions.php:

function mytheme_thumbnails_setup() {
    add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'mytheme_thumbnails_setup' );

Чтобы включить миниатюры только для отдельных типов записей, передай массив: add_theme_support( 'post-thumbnails', array( 'post', 'page' ) ). Для собственного типа записи также нужен 'thumbnail' в параметре supports при регистрации. Если обработчик after_setup_theme уже есть, например для кастомного логотипа, добавь вызов в него.

В блочных темах поддержка включена по умолчанию, а миниатюру выводит блок «Изображение записи». Примеры ниже относятся к PHP-шаблонам классических тем.

2. Размеры миниатюр и обрезка изображений

При загрузке WordPress создаёт уменьшенные копии изображения: стандартные размеры и размеры темы. Используй только те, которые нужны в вёрстке. Следующий код заменяет функцию mytheme_thumbnails_setup() из первого шага — не добавляй её второй раз.

function mytheme_thumbnails_setup() {
    add_theme_support( 'post-thumbnails' );

    // Размер по умолчанию для the_post_thumbnail(): 1200 × 675 с обрезкой
    set_post_thumbnail_size( 1200, 675, true );

    // Карточка в списке статей: 600 × 400, обрезка по центру
    add_image_size( 'card', 600, 400, true );

    // Широкое изображение без обрезки, высота пропорциональна
    add_image_size( 'wide', 1600, 0 );
}
add_action( 'after_setup_theme', 'mytheme_thumbnails_setup' );

В add_image_size() четвёртый аргумент задаёт обрезку. Значение false сохраняет пропорции, true обрезает изображение по центру. Массив array( 'center', 'top' ) смещает обрезку к верхнему краю.

Точный размер получится, если исходник достаточно большой: WordPress не увеличивает маленькие изображения.

Новые размеры создаются только для загружаемых после этого изображений. Для уже загруженных пересоздай копии через WP-CLI или плагин Regenerate Thumbnails:

wp media regenerate --image_size=card --yes

Дополнительные размеры занимают место на диске. Не регистрируй их про запас: для небольшого исходника часть копий всё равно не создастся.

3. Выведи миниатюру в шаблоне

Карточка записи в цикле, например в index.php или archive.php:

<article <?php post_class( 'post-card' ); ?>>
    <?php if ( has_post_thumbnail() ) : ?>
        <a class="post-card__media" href="<?php the_permalink(); ?>" tabindex="-1" aria-hidden="true">
            <?php the_post_thumbnail( 'card', array( 'class' => 'post-card__image' ) ); ?>
        </a>
    <?php endif; ?>

    <h2 class="post-card__title">
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    </h2>
</article>

Картинка и заголовок ведут на одну запись. Чтобы скринридер и клавиатура не встречали одну ссылку дважды, ссылка с картинкой убрана из порядка фокуса и дерева доступности. Основной ссылкой остаётся заголовок.

the_post_thumbnail() выводит готовый <img> с width, height, srcset и sizes. Текст alt берётся из поля «Альтернативный текст» в медиатеке, поэтому заполняй его при загрузке. Как получить ссылку на запись вне цикла, описано в статье о ссылках в WordPress.

Миниатюра в начале статьи

<?php if ( has_post_thumbnail() ) : ?>
    <figure class="entry-cover">
        <?php the_post_thumbnail( 'post-thumbnail', array( 'sizes' => '(max-width: 1200px) 100vw, 1200px' ) ); ?>
    </figure>
<?php endif; ?>

Атрибут sizes подсказывает браузеру, какой ширины будет картинка, чтобы он выбрал подходящий файл из srcset. Укажи значения по своей вёрстке: если колонка контента уже окна, браузер скачает меньший файл.

Ленивую загрузку WordPress расставляет сам: первым изображениям страницы не добавляет loading="lazy", а для вероятного главного изображения ставит fetchpriority="high". Вручную задавай loading и fetchpriority в массиве атрибутов, только если проверка в PageSpeed Insights показывает, что обложка грузится поздно.

Как получить URL миниатюры

Если нужен URL, например для фона или своих мета-тегов, используй get_the_post_thumbnail_url(). Перед выводом в атрибут экранируй значение:

<?php
$cover_url = get_the_post_thumbnail_url( get_the_ID(), 'large' );

if ( $cover_url ) : ?>
    <div class="hero" style="background-image: url('<?php echo esc_url( $cover_url ); ?>');"></div>
<?php endif; ?>

Фоновая картинка не получает srcset, alt и ленивую загрузку. Для содержательного изображения лучше оставить <img>. SEO-плагины вроде Yoast берут изображение записи для Open Graph сами, отдельный код для соцсетей обычно не нужен.

Как добавить свой размер в редактор изображений

Чтобы зарегистрированный размер можно было выбрать для обычного блока «Изображение», добавь его в список через фильтр:

function mytheme_image_size_names( $sizes ) {
    $sizes['card'] = 'Карточка';
    return $sizes;
}
add_filter( 'image_size_names_choose', 'mytheme_image_size_names' );

Если миниатюра не выводится

Нет панели в редакторе — нет add_theme_support( 'post-thumbnails' ) или тип записи не поддерживает thumbnail.
Картинка не того размера — копия для нового размера ещё не создана; выполни wp media regenerate.
Вне цикла выводится миниатюра другой записи — передай ID явно: get_the_post_thumbnail( $post_id, 'card' ).
Изображение растянуто — для обрезанного размера задай в CSS width: 100%; height: auto; или aspect-ratio с object-fit: cover.