Адаптивные изображения в WordPress.

адаптивные изображения

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

К счастью WordPress может сделать всю эту тяжелую работу. Он может генерировать все размеры изображения из одного, загружать, а затем, через плагин, интегрировать тег изображения, а так же атрибуты srcset и sizes, в любом месте документа, где выберет автор.

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

Миниатюра (150х150)

Средний (300х300)

Большой (1024х1024)

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

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


add_image_size( ‘sml_size’, 300 );
add_image_size( ‘mid_size’, 600 );
add_image_size( ‘lrg_size’, 1200 );
add_image_size( ‘sup_size’, 2400 );

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

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

Адаптивные изображения с помощью плагина.

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

Как правило, когда изображение добавляется на страницу в WordPress, в HTML коде это выглядит следующим образом:

<img class=»aligncenter wp-image–176 size-full» src=»http://somedomain.co.uk/wp-content/uploads/2015/05/img1.jpg» alt=»App Screenshot»>

После того, как плагин установлен, HTML-код будет выглядеть следующим образом:

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

Все графические размеры были добавлены к srcset атрибуту

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


Публикуйте анонсы своих статей в группе «Создание сайта — этому можно научиться«.

Пользователи на устройствах с небольшими экранами увидят меньшие изображения. Ваш сайт будет загружаться быстрее, так как на загрузку изображения уйдет меньше времени. Пользователи на устройствах с большими экранами увидят большие изображения, и они не будут нечетким или более низкого качества.

Существует только одна потенциальная проблема с этим методом: он будет работать только с изображениями, загруженными на WordPress после того, как был установлен плагин RICG Responsive Images. Если это новый сайт, то это не станет затруднением. Однако, если это уже существующий веб-сайт, то не будут применены функции плагина к размерам изображений, которые были добавлены в functions.php. К счастью, вам не нужно повторно добавлять все изображения — есть плагин, который может вам помочь.

Плагин Regenerate Thumbnails будет проверять все существующие изображения и повторно генерировать новые размеры изображения на основе созданных в functions.php — это реальная экономия времени и поможет сделать адаптивные изображения, требует лишь нажатие одной кнопки.

После установки, перейдите в меню «Сервис» -> «Регенерировать миниатюры», затем нажмите кнопку «регенерировать все миниатюры». Появится строка состояния, и вы увидите информацию о том, сколько изображений были изменены.

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

Оставляйте Ваши комментарии к статье!!!
Не забываем нажимать на кнопки соц.сетей!!! Заранее благодарю!!!
До встречи!!! Всегда с уважением к Вам, Долгов Антон.

comments powered by HyperComments