100
10.03.2017

Как сделать изображения WordPress отзывчивыми

WordPress — действительно интересная мощная платформа. На данной платформе можно создавать адаптивные сайты разных направлений бизнеса.

Каждый раз, когда вы загружаете изображение, WordPress сохраняет его в своем исходном размере. Он также автоматически генерирует 3 копии с измененными размерами в этих стандартных размерах (высота или ширина могут меняться в зависимости от соотношения изображений):

  • Миниатюра (150 × 150)
  • Средний (300 × 300)
  • Большой (1024 × 1024)

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

Для того, чтобы добавить новые размеры изображения, вам нужно добавить вызовы к add_image_size функции. Это делается путем изменения файла functions.php. Вот пример, который добавляет четыре новых размера изображения:

wordpress

Каждый вызов функции включает имя (поэтому WordPress может определить размер) и ширину. Новые размеры будут 300, 600, 1200 и 2400 пикселей в ширину.

В приведенном выше примере показаны только четыре новых размера изображений, но вы можете добавить больше или меньше … это будет основано на вашем дизайне темы. Теперь, когда изображение загружается в WordPress, оно будет генерировать новые размеры изображений. Следующий шаг — включить их в HTML.

Для того, чтобы WordPress выводил все размеры изображений, должен быть установлен: в RICG Responsive Images. После его установки и активации все размеры изображений будут включены в тег изображения с помощью атрибута srcset.

Обычно, когда изображение добавляется на страницу в WordPress, HTML-код выглядит так:

<img class=»aligncenter wp-image–176 size-full» src=»https://newdomain.by/wp-content/uploads/2017/05/img1.jpg» alt=»App Screenshot»>

В атрибуте src есть одно изображение. После установки плагина HTML будет выглядеть так:

<img class=»aligncenter wp-image–137 size-full» src=»https://newdomain.by/2/wp-content/uploads/2017/05/onavo.jpg» srcset=»http://newdomain.by/2/wp-content/uploads/2017/05/onavo–169×300.jpg 169w, http://newdomain.by/2/wp-content/uploads/2017/05/onavo–576×1024.jpg 576w, http://newdomain.by/2/wp-content/uploads/2017/05/onavo–300×534.jpg 300w, http://localhost/SebastianGreen/2015/wp_dev/wp-content/uploads/2015/05/onavo–600×1067.jpg 600w, http://newdomain.by/2/wp-content/uploads/2017/05/onavo.jpg 600w» alt=»onavo» width=»600″ height=»1067″ sizes=»(max-width: 600px) 100vw, 600px»>

Все новые размеры изображений , которые были добавлены с помощью srcset атрибута.
Теперь изображения на вашем сайте будут отзывчивыми — браузер выберет наиболее подходящее изображение для загрузки.