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

Хотите ли вы создать дополнительные размеры изображений в WordPress?

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

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

Зачем создавать дополнительные размеры изображений в WordPress?

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

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

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

Итак, давайте рассмотрим, как создать дополнительные размеры изображений в WordPress.

Регистрация дополнительных размеров изображений для вашей темы

Большинство тем WordPress, включая все лучшие темы WordPress, по умолчанию поддерживают функцию миниатюр постов (featured image).

Однако если вы создаете пользовательскую тему WordPress, то вам нужно добавить поддержку эскизов постов, добавив следующий код в функции вашей темы.php файл.

add_theme_support( 'post-thumbnails' );

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

Функция add_image_size используется в следующем формате:

add_image_size( ‘name-of-size’, width, height, crop mode );

Пример кода может выглядеть следующим образом:

add_image_size( 'sidebar-thumb', 120, 120, true ); // Режим жесткого кадрирования add_image_size( 'homepage-thumb', 220, 180 ); // Режим мягкого кадрирования add_image_size( 'singlepost-thumb', 590, 9999 ); // Режим неограниченной высоты

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

Давайте рассмотрим каждый пример и то, как вы можете использовать их в своих собственных проектах.

1. Режим жесткого обрезания

Как вы можете заметить, после высоты добавлено значение «true». Это указывает WordPress обрезать изображение точно до заданного размера (в данном случае 120 x 120px).

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

2. Режим мягкого обрезания

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

Режим неограниченной высоты

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

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

Отображение дополнительных размеров изображений в вашей теме WordPress

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

Примечание: Этот фрагмент кода должен быть вставлен внутри цикла поста.

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

Регенерация дополнительных размеров изображений

Если вы делаете это не на совершенно новом сайте, то вам, вероятно, придется регенерировать миниатюры.

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

Чтобы исправить это, необходимо регенерировать новый размер изображения для старых изображений. Это легко сделать с помощью плагина Regenerate Thumbnails. После установки и активации плагина в меню добавляется новая опция: Инструменты » Регенерировать эскизы

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

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

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

Даже если вы разрешили размеры изображений в вашей теме, использование ограничено только вашей темой, что не имеет никакого смысла.

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

Вы можете сделать это, добавив следующий код в файл функций вашей темы.

function wpb_custom_image_sizes( $size_names ) < $new_sizes = array( 'homepage-thumb' =>'Homepage Thumbmail', 'singlepost-thumb' => 'Infographic Single Post' ); return array_merge( $size_names, $new_sizes ); > add_filter( 'image_size_names_choose', 'wpb_custom_image_sizes' );

Не забудьте сохранить изменения после добавления кода.

Теперь вы можете пойти и загрузить изображение в пост или страницу WordPress. В настройках блока изображений вы увидите ваши пользовательские размеры изображений в опции ‘Размер изображения’.

Вы и другие авторы, работающие на вашем сайте, теперь можете выбирать эти варианты размеров при добавлении изображений в посты и страницы.

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

Источник: www.wpbeginner.com