Как сделать картинки в WordPress «адаптивными»

WordPress is a really powerful platform. Making a responsive theme and integrating it is pretty easy once you know the basics of theming. Responsive images, on the other hand, are not something WordPress deals with out of the box. You could go down the route of manually generating each image size, then in the HTML editor you could manually type the image tag,srcset attributes and each image. This will not only take time, but could be an issue for any admin users that are not HTML-literate.

Thankfully there is a way to make WordPress do all the heavy lifting. It can generate all the image sizes from a single image upload then, via a plugin, implement the image tag and srcsetattributes anywhere the author chooses to insert an image.

 ШАГ 1 . Правим FUNCTIONS.PHP для того, чтобы он генерировал больше различных разрешений при загрузке картинок на сайт

Так же автоматические генерируется 3 копии с измененным разрещением (высота и ширина изображений базируется на начальном разрешении изображения). В итоге получаем следующие размеры:

  1. Предпросмотр (150×150)
  2. Средний (300×300)
  3. Большой (1024×1024)

 

Чтобы генерировалось больше вариантов изображений нужно дабавить следующие строки  в functions.php

add_image_size( 'sml_size', 300 );
add_image_size( 'mid_size', 600 );
add_image_size( 'lrg_size', 1200 );

Теперь при загрузке файлов будут генироваться изображения с разрешением 300, 600, 1200px, теперь осталось внести некоторые измения в html.

STEP 2: INSTALL THE RICG RESPONSIVE IMAGES PLUGIN

Теперь необходимно установить еще один плагин —  RICG Responsive Images plugin. Установив один раз и активировав плагин он будет генерировать атрибут —  srcset attribute.

Данный плагин при добавлении изображений, будет генирироваться код

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

В этом коде одно изображение(до установки плагина)

После установки плагина код будет выглядить так.

<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–169x300.jpg 169w, http://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo–576x1024.jpg 576w, http://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo–300x534.jpg 300w, http://localhost/SebastianGreen/2015/wp_dev/wp-content/uploads/2015/05/onavo–600x1067.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 attribute.

Плагин также включает Picturefill.js, который делает изображения полностью адаптивными, всесте с тегом srcset.

Теперь ваши изображения полностью адаптивные.

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

 

ШАГ 3: Установить плагин для регенерации уже существующих изображений.
The Regenerate Thumbnails — плагин для регенерации изображений. Ставим его если надо.

После установки идем Инструменты -> Regen. Thumbnails нажимаем  кнопку “Regenerate All Thumbnails” . Ждем пока все закончиться

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *