Функция add_image_size() в WordPress позволяет зарегистрировать новые размеры изображений для использования в различных частях сайта. Это полезно для создания кастомных размеров для миниатюр, изображений в медиатеке или представлений на страницах.
add_image_size( string $name, int $width, int $height, bool|array $crop = false )
Параметры:
$name(строка, обязательный) — Идентификатор нового размера изображения.$width(int, необязательный) — Ширина изображения в пикселях. По умолчанию —0(не ограничено).$height(int, необязательный) — Высота изображения в пикселях. По умолчанию —0(не ограничено).$crop(bool|array, необязательный) — Логика обрезки изображения:false(по умолчанию) — Изображение масштабируется пропорционально.true— Изображение обрезается до указанных размеров с центром кадра.- Массив — Указывает точную позицию обрезки: первая позиция отвечает за ось
x, вторая — за осьy.
Пример 1: Создание миниатюр для категорий
В этом примере мы добавляем новый размер изображения, который будет использоваться для миниатюр на страницах категорий.
add_action( 'after_setup_theme', 'custom_category_image_size' );
function custom_category_image_size() {
add_image_size( 'category-thumb', 300, 200, true ); // Обрезка по центру до 300x200 пикселей
}
Этот код добавляет новый размер изображения с названием category-thumb, который будет использоваться в шаблонах для категорий.
Пример 2: Создание изображения для главной страницы
Создадим размер изображения для главной страницы с гибкой высотой.
add_action( 'after_setup_theme', 'homepage_image_size' );
function homepage_image_size() {
add_image_size( 'homepage-slider', 1280, 720, false ); // Изображение масштабируется до 1280 пикселей в ширину
}
Здесь изображение будет масштабироваться пропорционально по ширине до 1280 пикселей, сохраняя оригинальную высоту.
Пример 3: Обрезка изображения с настройкой позиции
Этот пример демонстрирует обрезку изображения с указанием позиции обрезки в верхнем левом углу.
add_action( 'after_setup_theme', 'custom_crop_position' );
function custom_crop_position() {
add_image_size( 'custom-crop', 600, 400, array( 'left', 'top' ) ); // Обрезка с позиции "левый верх"
}
Здесь изображение будет обрезано до 600×400 пикселей, при этом начальная точка обрезки — левый верхний угол изображения.
Пример 4: Использование нового размера изображения в шаблонах
После добавления нового размера можно использовать его для отображения изображений в шаблонах WordPress с помощью функции the_post_thumbnail():
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'category-thumb' ); // Использование созданного размера 'category-thumb'
}
Этот код отобразит миниатюру для поста в заданном размере.
Пример 5: Добавление пользовательских размеров в медиатеку
Для того чтобы сделать пользовательские размеры изображений доступными в медиатеке WordPress, можно использовать фильтр image_size_names_choose:
add_filter( 'image_size_names_choose', 'add_custom_image_sizes' );
function add_custom_image_sizes( $sizes ) {
return array_merge( $sizes, array(
'category-thumb' => __( 'Категория Миниатюра' ),
'homepage-slider' => __( 'Слайдер Главной' ),
));
}
Теперь при загрузке изображений в медиатеку пользователи смогут выбирать новые размеры.
Пример 6: Вывод изображения с новым размером в коде
Используйте функцию wp_get_attachment_image() для вывода изображения с медиатеки:
echo wp_get_attachment_image( 123, 'custom-crop' ); // Вывод изображения с ID 123 в размере 'custom-crop'
Это позволит вывести изображение с идентификатором 123 в размере, который был ранее зарегистрирован с помощью add_image_size().
Заключение
Функция add_image_size() — это мощный инструмент для управления размерами изображений в WordPress. Она позволяет создавать кастомные размеры, что может быть полезно для специфичных областей сайта, таких как миниатюры, изображения в слайдерах и медиа-контент. Важно помнить, что при добавлении новых размеров, для уже загруженных изображений потребуется регенерация миниатюр с помощью плагинов, таких как Regenerate Thumbnails.