Миниатюры WordPress: как включить, изменить и вывести

Миниатюра поста (Thumbnails) – это изображение, которое привязано к записи и отображается в архивах и на главной. Миниатюра помогает визуализировать содержание статьи.

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

Как включить поддержку миниатюры

Некоторые темы WordPress по умолчанию могут не поддерживать миниатюры записей. Ядро WordPress позволяет с помощью функции add_theme_support() добавить в вашу тему возможность задавать миниатюры записям.

В файле functions.php шаблона добавьте код

add_action('after_setup_theme', 'add_feature_thumbnail');

function add_feature_thumbnail() {
     add_theme_support( 'post-thumbnails' );
}

Во втором параметре функции add_theme_support() можно массивом указать, для каких типов постов (записи, страницы, кастомные типы) включить поддержку миниатюр.

Если нужно подключить только для записей:

add_action('after_setup_theme', 'add_feature_thumbnail');

function add_feature_thumbnail() {
     add_theme_support( 'post-thumbnails', [ 'post' ] );
}

Для записей, страниц и кастомного типа записи case:

add_action('after_setup_theme', 'add_feature_thumbnail');

function add_feature_thumbnail() {
     add_theme_support( 'post-thumbnails', [ 'post', 'page', 'case' ] );
}

Установка миниатюры для поста

После включения поддержки миниатюр на странице редактирования поста появится новое окно для установки миниатюры.

Нажмите на нее и откроется медиатека WordPress. Выберите нужное изображение и нажмите кнопку Установить изображение записи.

• Миниатюра для записи установлена.

Задать миниатюру записи можно и через код с помощью функции set_post_thumbnail.

Функция имеет два параметра. Первый параметр – ID записи, для которой нужно установить миниатюру, второй – ID изображения. Узнать ID изображения можно в медиатеке WordPress.

В файле functions.php добавьте код

$post_id = 15;
$thumbnail_id = 178;
set_post_thumbnail( $post_id, $thumbnail_id );

Код выполнится при первом заходе на сайт. После этого его можно удалить из functions.php.

Как вывести миниатюру в шаблоне

Вывести миниатюру на странице можно с помощью функций:

1. get_the_post_thumbnail( $id, $size, $attr ) – возвращает полный код <img /> для вывода изображения миниатюры. В параметре $id укажите ID записи, $size – размер изображения, $attr – дополнительные атрибуты тега img.
2. get_the_post_thumbnail_url( $id, $size ) – возвращает URL миниатюры для вставки в тег <img />. $id – ID записи, $size – размер изображения.

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

По умолчанию WordPress поддерживает следующие размеры изображений:

1. Миниатюра thumbnail – размер 150 на 150 пикселей.
2. Средний medium – размер 300 на 300 пикселей.
3. Большой medium_large – шириной 768 пикселей и пропорциональной высотой.
4. Крупный large – шириной 1024 и высотой не более 1024 (обрезает пропорционально).
5. Полный full – исходный размер файла, который загрузили. С версии WordPress 5.3 все крупные изображения обрезаются до 2560px.
6. 1536x1536 – 2 × размер medium_large (с версии WP 5.3).
7. 2048x2048 – 2 × размер large (с версии WP 5.3).

Для каждого изображения, которое загружается в медиатеку, WordPress автоматически генерирует все перечисленные выше размеры.

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

Функция имеет 4 параметра

• $name string обязательный
  Название нового размера миниатюры.
• $width int обязательный
  Ширина миниатюры (в пикселя)
• $height int обязательный
  Высота миниатюры (в пикселя)
• $crop bool|array
  • false – будет выполнено масштабирование, картинка создается по одной подходящей стороне, а другая будет масштабирована. В этом случае только одна сторона будет иметь необходимый размер.
  • true – картинка будет обрезана под точные размеры.
  • [coord_X, coord_Y] – координаты обрезки картинки. Картинка будет иметь точно указанные размеры, но обрезаться будет по координатам, указанные в массиве.
    

В файл functions.php добавьте код

add_action('after_setup_theme', 'add_feature_thumbnail');

function add_feature_thumbnail() {
     add_image_size( 'new_size', 600, 600, true );
}

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

Для изображений, которые были добавлены до регистрации нового размера, не будут сгенерированы новые размеры.

Как удалить размер миниатюры

Удалить размеры миниатюр можно двумя способами: через админку и кодом.

Удаление через админку

Зайдите в админку и перейдите в раздел Настройки > Медиафайлы.

Для тех размеров, которые вы хотите удалить, поставьте в поля значение 0.

В текущем разделе можно удалить только 3 основных размера картинок. Для удаления других размеров откройте ссылку site.ru/wp-admin/options.php.

Поиском по странице найдите опции, которые содержат в названии size_h или size_w. Укажите в поле значение 0, чтобы отключить размер миниатюры.

Теперь новые загруженные изображения не будут создавать размеры, которые вы отключили. Старые изображения остаются как есть и удалены не будут!

Я не рекомендую удалять размеры thumbnail и medium, так как они необходимы для отображения картинок в админке.

Удаление через код

Вы могли заметить, что через админку можно отключить только стандартные размеры миниатюр WordPress. Через код можно удалить любой размер.

В файле functions.php разместите код

add_filter( 'intermediate_image_sizes', 'unset_image_sizes' );

function unset_image_sizes( $sizes ) {
     $remove_sizes = [ 'large', 'custom_size' ];

     foreach( $remove_sizes as $size ) {
          unset($sizes[$size])
     }

     return $sizes;
}

Этот код удаляет два размера large и custom_size (название кастомного размера). Чтобы удалить другие, добавьте в массив $remove_sizes название миниатюры.

Генерация новых размеров изображений

Как уже было сказано, после добавления или удаления размеров миниатюр, все изменения будут применяться только к новым изображениям. Для того, чтобы сгенерировать изображения с учетом изменений, воспользуйтесь плагином Regenerate Thumbnails.

Установите и активируйте плагин. После этого зайдите в раздел Инструменты > Regenerate Thumbnails.

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

Дождитесь окончания процесса.

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

Вывести миниатюру в админку

И в качестве бонуса рассмотрим, как вывести миниатюру в админке WordPress. В таблице рядом с названием записи будет отображаться небольшая миниатюра поста.

Откройте файла functions.php и добавьте в конце код

add_filter('manage_post_posts_columns', 'add_column_thumbnail', 10, 2);
add_action('manage_post_posts_custom_column', 'add_thumbnail_image_post', 10, 2);

/**
 * Добавляет колонку миниатюры для таблицы постов
 *
 * @param  mixed $columns
 * @param  mixed $post_type
 * @return array
 */
function add_column_thumbnail($columns)
{
	return array_slice( $columns, 0, 1 ) + [ 'thumbnail' => 'Миниатюра' ] + $columns;
}

/**
 * Выводит миниатюру каждого поста в таблице
 *
 * @param  mixed $column
 * @param  mixed $id
 * @return void
 */
function add_thumbnail_image_post($column, $id)
{
	if ($column === 'thumbnail') {
		if( has_post_thumbnail( $id ) ) {
			echo get_the_post_thumbnail( $id, 'thumbnail', [ 'style' => 'max-width: 64px; height: auto' ] );
		}
	}
}

Теперь таблица записей в админке выглядит так