Пользовательский размер изображения с srcset

Содержание

Вопрос или проблема
Ответ или решение
Проблема
Решение
Заключение
SEO-оптимизация

Вопрос или проблема

У меня проблема с пользовательским размером srcset. На этой странице в разделе DANCE/ARTS/EVENTS я выбрал стандартный размер “Medium Large” для миниатюрных изображений в WordPress. Если я проверю коды, я увижу, что изображения имеют атрибут “srcset”. Пожалуйста, посмотрите скриншот здесь.

Затем я создал пользовательский размер изображения с помощью следующего кода:

add_theme_support( 'post-thumbnails' ); add_image_size( 'medium-cropped', 768, 514, true );

Я регенерировал все изображения с помощью плагина Regenerate Thumbnails.

Теперь у меня есть пользовательский размер “Medium Cropped”, который можно выбрать в конструкторе страниц Elementor. Пожалуйста, посмотрите 4 миниатюры на этой странице. Если вы посмотрите на коды, вы не увидите srcset для них. Пожалуйста, посмотрите второй скриншот здесь.

Может кто-то подсказать мне точный код, который нужно добавить в файл functions.php? Я прочитал много уроков, но не смог найти решение.

Посмотрите на этот ответ:
https://wordpress.stackexchange.com/a/243284/64435

Если вы не создаете несколько версий с одинаковыми пропорциями, никаких данных для src-set загружено не будет, так как у вас есть только одна возможная цель.

Ответ или решение

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

Проблема

Вы создали пользовательский размер изображения, называемый "Medium Cropped", и сгенерировали миниатюры с помощью плагина Regenerate Thumbnails. Однако атрибут srcset не отображается. Это может быть связано с тем, что для пользовательского размера изображения не созданы разные версии изображения, подходящие для различных экранов и разрешений.

Решение

Чтобы srcset корректно работал для вашего пользовательского размера, вам необходимо выполнить следующие шаги:

Создание нескольких вариантов изображения: Для того чтобы srcset работал, необходимо создать несколько размеров одного и того же изображения. Вы можете сделать это, добавив дополнительные размеры изображений в файл functions.php. Например:
```
add_theme_support( 'post-thumbnails' ); 
add_image_size( 'medium-cropped', 768, 514, true ); // Ваш пользовательский размер
add_image_size( 'medium-cropped-1x', 768, 514, true ); // Оригинальный размер
add_image_size( 'medium-cropped-2x', 1536, 1028, true ); // Увеличенный размер
```
Здесь мы определяем три разных размера, что позволит WordPress генерировать атрибут srcset для оптимальной загрузки изображений на различных устройствах.
Регистрация дополнительных размеров: После добавления новых размеров изображений, необходимо снова сгенерировать миниатюры. Используйте плагин Regenerate Thumbnails еще раз, чтобы убедиться, что все пользовательские размеры изображений были созданы.
Использование файла шаблона: Убедитесь, что вы используете подходящую функцию для отображения изображений с srcset. Например, чтобы получить изображение с атрибутом srcset, вы можете использовать функцию wp_get_attachment_image():
```
if ( has_post_thumbnail() ) {
    echo wp_get_attachment_image( get_post_thumbnail_id(), 'medium-cropped' );
}
```
В этой строке кода wp_get_attachment_image автоматически генерирует src, srcset и sizes.
Проверка кода на странице: После внесения изменений, проверьте исходный код страницы, чтобы убедиться, что srcset присутствует для миниатюр вашего нового размера изображения.

Заключение

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

SEO-оптимизация

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

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