Функция wp_get_attachment_image_sizes() в WordPress используется для получения значения атрибута sizes для изображения, которое является вложением. Этот атрибут помогает браузерам загружать изображение, наиболее подходящее по размеру для текущей ширины экрана пользователя.
wp_get_attachment_image_sizes( int $attachment_id, string|int[] $size = ‘medium’, array|null $image_meta = null ): string|falseОписание функции
Атрибут sizes позволяет браузеру предсказывать, какой размер изображения необходимо загрузить в зависимости от ширины экрана (области просмотра). Это повышает производительность, так как браузеру не нужно загружать и обрабатывать ненужные большие изображения для маленьких экранов.
Параметры функции
$attachment_id(int, обязательно) — ID изображения-вложения.$size(string|int[], по умолчанию:'medium', необязательно) — Размер изображения. Принимает зарегистрированные размеры (например,'thumbnail','medium','large') или массив ширины и высоты.$image_meta(array|null, по умолчанию:null, необязательно) — Метаданные изображения, возвращаемые функциейwp_get_attachment_metadata(). Если метаданные не переданы, они будут автоматически получены из базы данных.
Возвращаемое значение
string|false— Значение для атрибутаsizes, которое можно использовать в теге<img>, илиfalseпри неудаче.
Пример 1: Получение размеров изображения для атрибута sizes
Простой пример получения значения атрибута sizes для изображения с ID 10 и размера 'full':
$attachment_id = 10;
echo wp_get_attachment_image_sizes( $attachment_id, 'full' );
Этот код выведет строку, которую можно использовать в атрибуте sizes. Например:
(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px
Пример 2: Использование sizes вместе с атрибутами src и srcset
Следующий пример показывает, как использовать функцию wp_get_attachment_image_sizes() в связке с атрибутами srcset и src для оптимизации загрузки изображений:
<?php
$attachment_id = 25;
?>
<img
src="<?php echo wp_get_attachment_image_url( $attachment_id, 'full' ); ?>"
srcset="<?php echo wp_get_attachment_image_srcset( $attachment_id, 'full' ); ?>"
sizes="<?php echo wp_get_attachment_image_sizes( $attachment_id, 'full' ); ?>"
>
<?php
Этот код создаст полный HTML-тег <img> с атрибутами src, srcset и sizes, которые помогут браузеру выбрать оптимальный размер изображения для загрузки в зависимости от ширины экрана пользователя. Пример результата:
<img
src="http://example.com/wp-content/uploads/2023/10/sample-image.png"
srcset="http://example.com/wp-content/uploads/2023/10/sample-image-300x200.png 300w, http://example.com/wp-content/uploads/2023/10/sample-image-600x400.png 600w, http://example.com/wp-content/uploads/2023/10/sample-image.png 1200w"
sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 45vw, 1200px"
>
Пример 3: Использование произвольного размера изображения
Функция позволяет задавать произвольный размер изображения через массив ширины и высоты. В этом примере изображение будет отображено с шириной 800 и высотой 600 пикселей:
$attachment_id = 45;
echo wp_get_attachment_image_sizes( $attachment_id, array( 800, 600 ) );
Результат может выглядеть так:
(max-width: 800px) 100vw, 800pxПример 4: Получение метаданных изображения и их передача в функцию
Если метаданные изображения уже были получены с помощью функции wp_get_attachment_metadata(), их можно передать в wp_get_attachment_image_sizes(), чтобы избежать лишних запросов к базе данных:
$attachment_id = 50;
$image_meta = wp_get_attachment_metadata( $attachment_id );
echo wp_get_attachment_image_sizes( $attachment_id, 'medium', $image_meta );
Это повысит производительность, особенно если функция используется в цикле или для большого количества изображений.
Заключение
Функция wp_get_attachment_image_sizes() является полезным инструментом для работы с изображениями в WordPress, помогая разработчикам улучшить производительность сайтов. Она позволяет браузерам загружать оптимальные по размеру изображения в зависимости от устройства пользователя, что особенно важно для мобильных пользователей и сайтов с большим количеством изображений.
