Как сделать изображения WordPress отзывчивыми
Каждый раз, когда вы загружаете изображение, WordPress сохраняет его в своем исходном размере. Он также автоматически генерирует 3 копии с измененными размерами в этих стандартных размерах (высота или ширина могут меняться в зависимости от соотношения изображений):
- Миниатюра (150 × 150)
- Средний (300 × 300)
- Большой (1024 × 1024)
Это действительно мощная функция, поскольку ее можно настроить для любого размера изображения. Это означает, что вам не нужно делать несколько копий изображения разных размеров. Вы просто загружаете одно изображение, а WordPress создает копии с измененными размерами.
Для того, чтобы добавить новые размеры изображения, вам нужно добавить вызовы к add_image_size функции. Это делается путем изменения файла functions.php. Вот пример, который добавляет четыре новых размера изображения:
Каждый вызов функции включает имя (поэтому WordPress может определить размер) и ширину. Новые размеры будут 300, 600, 1200 и 2400 пикселей в ширину.
В приведенном выше примере показаны только четыре новых размера изображений, но вы можете добавить больше или меньше … это будет основано на вашем дизайне темы. Теперь, когда изображение загружается в WordPress, оно будет генерировать новые размеры изображений. Следующий шаг — включить их в HTML.
Для того, чтобы WordPress выводил все размеры изображений, должен быть установлен: в RICG Responsive Images. После его установки и активации все размеры изображений будут включены в тег изображения с помощью атрибута srcset.
Теперь изображения на вашем сайте будут отзывчивыми — браузер выберет наиболее подходящее изображение для загрузки.