Как изменить размер миниатюры в WordPress: полное техническое руководство

Избранные изображения — также называемые миниатюрами записей — являются основным визуальным элементом любого сайта на WordPress. Они отображаются в списках записей, страницах архивов, превью в социальных сетях и RSS-лентах, что делает их размеры прямым фактором согласованности макета и воспринимаемого качества дизайна. Изменение размера избранного изображения в WordPress означает либо переопределение пиксельных размеров, которые WordPress регистрирует при загрузке, либо обновление того, как тема запрашивает эти размеры при рендеринге, либо и то, и другое — и неустранение обеих сторон является единственной наиболее распространённой причиной, по которой изменённые изображения выглядят неправильно на фронтенде.

Это руководство охватывает все доступные методы — от настроек панели управления без написания кода до прямой настройки PHP — с точным техническим контекстом для каждого подхода.

Понимание того, как WordPress обрабатывает размеры изображений

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

Три размера, которые WordPress регистрирует по умолчанию:

• Миниатюра — обычно 150x150 пикселей, по умолчанию с жёсткой обрезкой
• Средний — до 300x300 пикселей, пропорциональное масштабирование
• Крупный — до 1024x1024 пикселей, пропорциональное масштабирование

Ваша тема регистрирует дополнительные размеры с помощью add_image_size(). Когда шаблон вызывает the_post_thumbnail('large'), WordPress ищет файл, который был сгенерирован для этого зарегистрированного размера во время загрузки. Это критически важный архитектурный момент: изменение определения размера не изменяет размер уже загруженных изображений задним числом. После любого изменения размера необходимо регенерировать миниатюры.

Метод 1: Изменение размера избранного изображения через настройки медиафайлов WordPress

Это правильная отправная точка для сайтов, где тема использует один из трёх основных размеров для вывода избранного изображения.

Шаг 1: Обновите настройки медиафайлов

Перейдите в раздел Настройки > Медиафайлы в панели управления WordPress. Вы увидите три группы размеров. Определите, какой размер ваша тема использует для избранных изображений — проверьте документацию темы или изучите отрендеренный HTML для подтверждения CSS-класса (например, wp-image-* рядом с size-large).

Отрегулируйте поля ширины и высоты для соответствующего размера. Установка любого из размеров в 0 указывает WordPress масштабировать пропорционально по другой оси, а не обрезать.

Нажмите Сохранить изменения.

Шаг 2: Регенерируйте существующие миниатюры

Новые загрузки будут немедленно использовать обновлённые размеры. Для изображений, уже находящихся в медиатеке, необходимо регенерировать производные файлы. Наиболее надёжным инструментом для этого является плагин Regenerate Thumbnails от Alex Mills.

После установки и активации перейдите в раздел Инструменты > Regen. Thumbnails и нажмите Regenerate All Thumbnails. На больших медиатеках это ресурсоёмкая операция — запускайте её в часы низкой нагрузки, и если вы используете план VPS Хостинга, рассмотрите возможность временного увеличения max_execution_time и memory_limit в php.ini для предотвращения таймаутов.

Распространённая ошибка: Если ваша тема регистрирует собственный пользовательский размер с тем же именем, что и основной размер, панель настроек медиафайлов не повлияет на него. Вызов add_image_size() темы имеет приоритет.

Метод 2: Использование кастомизатора WordPress или панели настроек темы

Многие коммерческие темы предоставляют элементы управления размерами изображений без необходимости изменения кода.

Шаг 1: Проверьте кастомизатор

Перейдите в раздел Внешний вид > Настроить. Ищите разделы с названиями Настройки темы, Настройки блога, Макет или Настройки записей. Некоторые темы предоставляют здесь отдельный раздел Избранное изображение.

Если элементы управления существуют, отрегулируйте ширину и высоту, затем нажмите Опубликовать. Тема обновит своё зарегистрированное определение размера и, в некоторых реализациях, автоматически регенерирует затронутые изображения.

Шаг 2: Проверьте отдельную панель настроек темы

Премиум-темы, построенные на фреймворках вроде Redux или Kirki, часто имеют отдельный пункт меню Настройки темы или Панель темы в боковой панели панели управления. Ищите подразделы с названиями Настройки изображений, Миниатюры записей или Макет архива.

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

Метод 3: Определение пользовательских размеров изображений в functions.php

Это технически правильный метод для разработчиков и всех, кому нужен точный контроль над размерами, поведением обрезки и именованием размеров. Это также единственный метод, позволяющий регистрировать размеры, не конфликтующие с основными значениями по умолчанию.

Шаг 1: Зарегистрируйте пользовательский размер

Отредактируйте файл functions.php вашей дочерней темы. Никогда не редактируйте файлы родительской темы напрямую — обновления перезапишут ваши изменения. Если у вас нет дочерней темы, создайте её перед тем, как продолжить.

Добавьте следующее внутри подключённой функции:

function mytheme_custom_image_sizes() {
    add_theme_support( 'post-thumbnails' );
    add_image_size( 'featured-hero', 1200, 600, true );
    add_image_size( 'featured-card', 400, 300, true );
}
add_action( 'after_setup_theme', 'mytheme_custom_image_sizes' );

Описание параметров для add_image_size():

• Аргумент 1 — дескриптор размера (строка), используемый при вызове изображения в шаблонах
• Аргумент 2 — ширина в пикселях
• Аргумент 3 — высота в пикселях
• Аргумент 4 — режим обрезки: true для жёсткой обрезки до точных размеров; false для пропорционального масштабирования; массив вида array( 'left', 'top' ) для позиционной обрезки

Граничный случай: Передача true в качестве аргумента обрезки по умолчанию использует обрезку по центру. Если ваши избранные изображения содержат объекты, которые постоянно расположены не по центру (например, портретная фотография), используйте позиционный массив — array( 'center', 'top' ) — чтобы предотвратить обрезку голов.

Шаг 2: Вызовите пользовательский размер в файлах шаблонов

Найдите файл шаблона, отвечающий за рендеринг избранного изображения. Распространёнными кандидатами являются single.php, archive.php, content.php или template-parts/content-single.php. Выполните поиск the_post_thumbnail для нахождения точного вызова.

Замените существующий аргумент размера:

// Before
the_post_thumbnail( 'large' );

// After
the_post_thumbnail( 'featured-hero' );

Для большего контроля над разметкой вывода используйте get_the_post_thumbnail() с пользовательскими атрибутами:

echo get_the_post_thumbnail(
    get_the_ID(),
    'featured-hero',
    array(
        'class' => 'hero-image lazyload',
        'alt'   => get_the_title(),
        'loading' => 'lazy',
    )
);

Шаг 3: Сделайте пользовательский размер доступным для выбора в загрузчике медиафайлов (необязательно)

По умолчанию пользовательские размеры, зарегистрированные с помощью add_image_size(), не отображаются в выпадающем списке размеров загрузчика медиафайлов WordPress. Чтобы сделать их доступными для редакторов, добавьте этот фильтр:

function mytheme_add_image_sizes_to_selector( $sizes ) {
    return array_merge( $sizes, array(
        'featured-hero' => __( 'Featured Hero (1200x600)', 'mytheme' ),
        'featured-card' => __( 'Featured Card (400x300)', 'mytheme' ),
    ) );
}
add_filter( 'image_size_names_choose', 'mytheme_add_image_sizes_to_selector' );

Шаг 4: Регенерируйте миниатюры

Запустите плагин Regenerate Thumbnails, как описано в Методе 1. Для всех ранее загруженных изображений будут сгенерированы новые производные файлы с новыми размерами.

Метод 4: Изменение размера избранного изображения в конструкторе страниц

Конструкторы страниц, такие как Elementor, Divi и Bricks Builder, абстрагируют слой шаблонов, поэтому редактирование файлов шаблонов может не применяться. Каждый конструктор имеет собственные элементы управления размерами изображений.

Elementor

1. Откройте страницу или запись в Elementor.
2. Выберите виджет Избранное изображение или виджет Записи, отображающий миниатюру.
3. На левой панели найдите Размер изображения на вкладке Содержимое.
4. Выберите зарегистрированный размер из выпадающего списка или выберите Пользовательский для ввода пиксельных размеров.
5. Нажмите Обновить.

Техническое примечание: Когда вы выбираете «Пользовательский» в Elementor, он не регистрирует новый размер изображения WordPress — он использует JavaScript для изменения размера изображения на стороне клиента или запрашивает изображение полного размера и масштабирует его через CSS. Это увеличивает вес страницы. Всегда предпочитайте зарегистрированный размер WordPress пользовательскому размеру Elementor для страниц, критичных к производительности.

Divi

В модуле блога или модуле избранного изображения записи Divi параметр Размер изображения в разделе Дополнительно управляет тем, какой зарегистрированный размер WordPress запрашивается. Divi также имеет собственные настройки размеров изображений в разделе Divi > Настройки темы > Общие > Размеры миниатюр, которые регистрируют дополнительные производные файлы.

Метод 5: Использование плагина для пользовательских размеров изображений без написания кода

Если редактирование PHP невозможно, эти плагины воспроизводят функциональность add_image_size() через пользовательский интерфейс:

Simple Image Sizes является наиболее прямой заменой add_image_size(). После установки перейдите в раздел Настройки > Медиафайлы — плагин добавляет раздел пользовательских размеров ниже основных значений по умолчанию. Определите свой размер, сохраните и используйте встроенную регенерацию плагина для его применения.

Сравнение: все методы с первого взгляда

Производительность и соображения по оптимизации изображений

Регистрация слишком большого количества размеров изображений является часто упускаемой из виду проблемой на стороне сервера. Каждый зарегистрированный размер генерирует новый файл при загрузке. Сайт с 15 зарегистрированными размерами и 2000 изображениями в медиатеке потенциально имеет 30 000 файлов изображений на диске. На общем хостинге это заполняет квоты; на любом сервере это увеличивает размеры резервных копий.

Периодически проверяйте зарегистрированные размеры. Используйте этот фрагмент кода во временном плагине или functions.php для вывода списка всех зарегистрированных размеров:

add_action( 'wp_loaded', function() {
    if ( current_user_can( 'manage_options' ) && isset( $_GET['show_image_sizes'] ) ) {
        echo '<pre>';
        print_r( wp_get_registered_image_subsizes() );
        echo '</pre>';
        exit;
    }
} );

Посетите https://yoursite.com/?show_image_sizes=1 будучи авторизованным как администратор, чтобы увидеть полный список.

Дополнительные практики повышения производительности:

• Используйте формат WebP. WordPress 5.8+ конвертирует загружаемые изображения в WebP, если библиотека GD или Imagick вашего сервера поддерживает это. Проверьте поддержку в разделе Инструменты > Состояние сайта.
• Реализуйте отложенную загрузку. WordPress добавляет loading="lazy" к изображениям ниже видимой области по умолчанию начиная с версии 5.5. Убедитесь, что ваши пользовательские вызовы the_post_thumbnail() сохраняют этот атрибут.
• Сжимайте перед загрузкой. Такие инструменты, как ShortPixel или Imagify, интегрируются непосредственно в медиапайплайн WordPress и автоматически сжимают производные файлы. TinyPNG хорошо работает для ручного сжатия перед загрузкой.
• Используйте CDN. Если ваш сайт обслуживает глобальную аудиторию, перенос доставки изображений на CDN снижает задержку независимо от количества зарегистрированных размеров.

Для сайтов с интенсивной работой с изображениями — фотопортфолио, новостные сайты, магазины WooCommerce — VPS с cPanel предоставляет вам контроль на уровне сервера для настройки лимитов памяти PHP, прямой настройки Imagick и управления дисковыми квотами, что недоступно в общих средах.

Адаптивные изображения и атрибут srcset

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

Когда вы вызываете the_post_thumbnail(), WordPress выводит разметку, похожую на:

<img src="hero-1200x600.jpg"
     srcset="hero-400x300.jpg 400w, hero-800x400.jpg 800w, hero-1200x600.jpg 1200w"
     sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
     alt="Post Title"
     loading="lazy">

Атрибут sizes сообщает браузеру, насколько широко изображение будет отображаться при различных значениях ширины области просмотра. WordPress генерирует значение sizes по умолчанию, но оно часто неточно для сложных макетов. Переопределите его с помощью фильтра wp_calculate_image_sizes или передав пользовательский атрибут sizes в массиве $attr функции get_the_post_thumbnail().

Контекст SSL, домена и хостинга

Если вы переносите сайт WordPress на новый домен или переключаетесь с HTTP на HTTPS после получения SSL-сертификата, URL-адреса изображений, хранящиеся в мета-данных записей (ссылки _thumbnail_id), относятся к идентификатору вложения и не затрагиваются изменениями домена. Однако URL-адреса изображений, жёстко закодированные в содержимом записей или настройках темы, потребуют обновления с помощью операции поиска и замены через WP-CLI:

wp search-replace 'http://olddomain.com' 'https://newdomain.com' --skip-columns=guid

Если вы настраиваете новую установку WordPress с нуля, регистрация вашего домена через Регистрацию доменов и сочетание её с правильно настроенной хостинговой средой обеспечивает корректность путей загрузки медиафайлов и правил перезаписи .htaccess с самого начала, избегая проблем с URL-адресами изображений, которые сложно отлаживать задним числом.

Контрольный список технических решений

Используйте эту матрицу для выбора правильного подхода для вашей ситуации:

• Вам нужно изменить основной размер (миниатюра/средний/крупный) и вы не редактируете код — используйте Настройки > Медиафайлы, затем регенерируйте миниатюры.
• Ваша премиум-тема имеет панель настроек темы — сначала проверьте там, прежде чем трогать какие-либо файлы.
• Вам нужен размер с точными пиксельными размерами и жёсткой обрезкой — используйте add_image_size() в файле functions.php дочерней темы.
• Ваш предмет съёмки требует обрезки не по центру — передайте позиционный массив в качестве четвёртого аргумента add_image_size().
• Вы используете Elementor или Divi — используйте встроенный элемент управления размером изображения конструктора, но предпочитайте зарегистрированные размеры WordPress «Пользовательским» для производительности.
• Вы не можете редактировать PHP и вам нужен пользовательский размер — установите Simple Image Sizes, определите размер, регенерируйте.
• У вас большая медиатека — используйте Regenerate Thumbnails Advanced, который позволяет выборочную регенерацию по имени размера, чтобы избежать избыточной обработки.
• Производительность является приоритетом — проверьте зарегистрированные размеры, включите WebP, внедрите CDN и убедитесь, что отложенная загрузка активна.
• Вы используете общий хостинг и сталкиваетесь с ошибками памяти или таймаутами во время регенерации — рассмотрите возможность перехода на план VPS Хостинга, где лимиты PHP настраиваемы.

Часто задаваемые вопросы

Почему мои избранные изображения всё ещё отображаются в старом размере после изменения настроек медиафайлов?

WordPress генерирует производные файлы изображений во время загрузки. Изменение определения размера в Настройках > Медиафайлы влияет только на новые загрузки. Необходимо запустить инструмент регенерации миниатюр — например, плагин Regenerate Thumbnails — для изменения размера файлов, уже находящихся в медиатеке.

В чём разница между add_image_size() с true и false в качестве параметра обрезки?

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

Замедлит ли регистрация многих пользовательских размеров изображений мой сайт?

Не во время рендеринга — WordPress обслуживает предварительно сгенерированные файлы. Затраты на производительность возникают во время загрузки, когда Imagick или GD должны генерировать один производный файл на каждый зарегистрированный размер. Сайты с большим количеством размеров и высоким объёмом загрузок могут испытывать медленные ответы при загрузке и значительный рост использования диска.

Могу ли я удалить размеры изображений, которые мне больше не нужны?

Да. Используйте remove_image_size( 'size-name' ) в вашем functions.php для прекращения генерации размера для новых загрузок. Существующие файлы для этого размера остаются на диске до ручного удаления. Команда WP-CLI wp media regenerate --only-missing может помочь с очисткой, генерируя только отсутствующие размеры без пересоздания всех производных файлов.

Влияет ли изменение размера избранного изображения на то, как изображения отображаются при публикации в социальных сетях?

Не напрямую. Социальные платформы, такие как Facebook и Twitter, читают мета-теги Open Graph (og:image) для определения отображаемого изображения. Эти теги обычно устанавливаются SEO-плагином, таким как Yoast SEO или Rank Math, который регистрирует собственный размер изображения (обычно 1200x630) специально для публикации в социальных сетях. Изменение размера избранного изображения темы не изменяет изображение Open Graph, если только ваш SEO-плагин не настроен на использование того же дескриптора размера.