Функция wp_get_attachment_image_srcset() используется для получения значения атрибута srcset для вложения изображения. Этот атрибут полезен для адаптивного отображения изображений, когда браузер может выбрать наиболее подходящий размер изображения в зависимости от устройства пользователя и его экрана.
wp_get_attachment_image_srcset(
int $attachment_id,
string|int[] $size = 'medium',
array|null $image_meta = null
): string|false
Параметры:
$attachment_id(int, обязательный) — ID вложения изображения, для которого нужно получить данные.$size(строка|массив, необязательный) — Размер изображения. Может быть именем зарегистрированного размера (например, ‘thumbnail’, ‘medium’, ‘large’) или массивом с шириной и высотой (например,array(400, 200)). По умолчанию: ‘medium’.$image_meta(массив|null, необязательный) — Мета-данные изображения, которые возвращаются функциейwp_get_attachment_metadata(). По умолчанию:null.
Возвращаемое значение:
- Строка — строка, представляющая значение атрибута
srcset, илиfalse, если данные недоступны.
Пример 1: Получение srcset для полного размера изображения
Этот пример показывает, как получить строку srcset для изображения с ID 1527 в полном размере:
$srcset = wp_get_attachment_image_srcset( 1527, 'full' );
if ( $srcset ) {
echo '<img src="' . wp_get_attachment_image_url( 1527, 'full' ) . '" srcset="' . esc_attr( $srcset ) . '">';
}
Результат:
<img src="http://example.com/uploads/image-full.jpg" srcset="http://example.com/uploads/image-150x150.jpg 150w, http://example.com/uploads/image-full.jpg 1024w">
Пример 2: Использование кастомных размеров
В следующем примере используется массив для указания ширины и высоты изображения (400×300). Это полезно, когда нужно указать конкретные размеры:
$srcset = wp_get_attachment_image_srcset( 1689, array( 400, 300 ) );
if ( $srcset ) {
echo '<img src="' . wp_get_attachment_image_url( 1689, array( 400, 300 ) ) . '" srcset="' . esc_attr( $srcset ) . '">';
}
Результат:
<img src="http://example.com/uploads/custom-image-400x300.jpg" srcset="http://example.com/uploads/custom-image-150x150.jpg 150w, http://example.com/uploads/custom-image-400x300.jpg 400w">
Пример 3: Добавление атрибута srcset для изображения внутри HTML
Этот пример добавляет атрибуты src, srcset и sizes для изображения, чтобы обеспечить адаптивную загрузку изображений для разных устройств:
$attachment_id = 1423;
echo '<img src="' . wp_get_attachment_image_url( $attachment_id, 'large' ) . '"
srcset="' . wp_get_attachment_image_srcset( $attachment_id, 'large' ) . '"
sizes="' . wp_get_attachment_image_sizes( $attachment_id, 'large' ) . '">';
Результат:
<img src="http://example.com/uploads/image-large.jpg"
srcset="http://example.com/uploads/image-150x150.jpg 150w, http://example.com/uploads/image-large.jpg 1024w"
sizes="(max-width: 1024px) 100vw, 1024px">
Использование фильтра для увеличения максимальной ширины srcset
По умолчанию WordPress не генерирует размеры изображений с шириной больше 1600 пикселей в srcset. Этот фильтр позволяет увеличить этот порог до 2000 пикселей:
add_filter( 'max_srcset_image_width', function() {
return 2000;
});
После добавления этого кода в файл functions.php темы, WordPress начнет учитывать изображения до 2000 пикселей при генерации srcset.
Заключение
Функция wp_get_attachment_image_srcset() упрощает добавление адаптивных изображений в WordPress, позволяя браузеру выбирать подходящий размер изображения в зависимости от устройства пользователя. Благодаря srcset можно улучшить производительность сайта и обеспечить корректное отображение изображений на экранах с разной плотностью пикселей.