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

от

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

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

Чтобы включить поддержку миниатюр в вашей теме, проверьте файл functions.php и убедитесь, что там добавлен следующий код:

add_theme_support('post-thumbnails');

Кроме того, вы можете установить размеры миниатюр через настройки в админке: Настройки > Медиафайлы. Здесь можно задать размеры миниатюр для различных форматов (Thumbnail, Medium, Large). Также вы можете задать обрезку изображений, что позволяет сохранить нужное соотношение сторон.

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

Для вывода миниатюр в шаблонах вашей темы используйте функцию the_post_thumbnail(). Например, вы можете добавить следующий код в файл index.php или single.php:

<?php if ( has_post_thumbnail() ) {
the_post_thumbnail('thumbnail');
} ?>

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

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

Некоторые темы 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', array('post'));
}

Для поддержи как записей, так и страниц, а также кастомных типов записей можно воспользоваться следующим кодом:

add_action('after_setup_theme', 'add_feature_thumbnail');
function add_feature_thumbnail() {
add_theme_support('post-thumbnails', array('post', 'page', 'custom_post_type'));
}

Не забудьте заменить ‘custom_post_type’ на фактическое имя вашего кастомного типа записи, если вы хотите включить поддержку миниатюр для него.

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

Вы также можете изменить размер миниатюры, используя функцию set_post_thumbnail_size() в файле functions.php. Например:

set_post_thumbnail_size(150, 150, true); // ширина, высота, обрезка

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

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

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

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

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

  • Миниатюра успешно установлена для записи.
  • Рекомендуется использовать изображения размером не менее 1200×630 пикселей для оптимального отображения на всех устройствах.
  • Убедитесь, что выбранное изображение имеет четкость и минимальный размер файла для быстрой загрузки.

Также можно установить миниатюру программно, использовав функцию set_post_thumbnail.

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

Добавьте в файл functions.php следующий код:

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

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

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

add_action('init', function() {
$post_id = 15;
$thumbnail_id = 178;
set_post_thumbnail($post_id, $thumbnail_id);
});

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

Чтобы отобразить миниатюру на странице, используйте следующие функции:

  1. get_the_post_thumbnail( $id, $size, $attr ) – возвращает полный HTML-код для отображения миниатюры. В параметре $id укажите ID записи, $size – желаемый размер изображения, $attr – дополнительные атрибуты для тега img. Рекомендуется использовать стандартные размеры изображений, такие как ‘thumbnail’, ‘medium’, ‘large’ или указать собственный размер в виде массива ширины и высоты.
  2. get_the_post_thumbnail_url( $id, $size ) – возвращает URL миниатюры, который можно использовать в теге . $id – это ID записи, $size – размер изображения. Эта функция удобна, если вам нужно получить ссылку на изображение для использования в CSS или в других контекстах, где HTML-код не нужен.
  3. has_post_thumbnail( $id ) – позволяет проверить, имеет ли запись миниатюру. Это полезно, чтобы избежать ошибок, если вы попытаетесь вывести миниатюру для записи, в которой она отсутствует.
  4. set_post_thumbnail( $post_id, $thumbnail_id ) – позволяет установить миниатюру для записи. Вы можете использовать эту функцию, когда загружаете новое изображение, чтобы автоматически назначить его миниатюрой.

Не забывайте, что для корректного отображения миниатюр в некоторых темах необходимо предварительно активировать поддержку миниатюр с помощью функции add_theme_support( 'post-thumbnails' ); в файле functions.php вашей темы.

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

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

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

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

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

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

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

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

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

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

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

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

Для размеров, которые вы хотите удалить, установите значение 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 (где 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' ] ); > > >

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

Оставьте комментарий