Работа с адаптивными изображениями в WordPress

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

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

Как это все работает

Очевидно, что если вы еще этого не сделали, ваш первый шаг — обновить WordPress до версии 4.4. После завершения обновления, если вы просмотрите исходный код своего сайта, вы заметите, что изображения на вашем сайте теперь имеют два новых атрибута: sizes и srcset . Эти атрибуты фильтруются, что означает, что присутствуют все доступные размеры изображения, но размеры остаются соответствующими исходному изображению. Атрибут srcset не разрешает индивидуальную обрезку в случаях, когда соотношение сторон не совпадает с соотношением сторон исходной версии изображения. Это делается для того, чтобы качество изображения не ухудшалось при его отображении на экране пользователя.

Залезаем под капот и вносим изменения

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

Поскольку это фоновая функция, адаптивные изображения не поставляются с пользовательским интерфейсом — они просто появляются. Как разработчик, вы можете изменить файл functions.php в каждой из ваших тем, чтобы убедиться, что вашим изображениям присвоен точный атрибут sizes . Помните: когда вы хотите сослаться на адаптивные изображения, это означает атрибуты тега изображения sizes и srcset .

Атрибуты по умолчанию

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

Установка этого атрибута по умолчанию работает двумя способами. Во-первых, он принудительно применяет атрибут sizes к каждому изображению. Это полезно, учитывая, что теперь это обязательное требование. Во-вторых, он не позволяет браузерам использовать источник изображения шире исходного размера изображения. Код CSS, который используется для настройки размера изображения в зависимости от ширины экрана (например, медиа-запросы), к сожалению, может сделать это значение по умолчанию гораздо менее полезным.

Хуки-фильтры для разработчиков тем

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

Предостережение

Прежде чем двигаться дальше, давайте на минутку заявим, что параметр атрибутов по умолчанию — не лучший способ обеспечить хорошую функциональность адаптивного изображения. На самом деле вам следует работать над тем, чтобы не создавать темы, которые полагаются на это значение по умолчанию. Причина этого в том, что атрибут по умолчанию не позволяет браузерам изменять источник изображения, когда область отображения не так велика, как размер исходного изображения. Браузеры также не могут изменить исходный код, если он был изменен с помощью CSS и требуется изображение большего размера.

Фильтрация изображений

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

Новые функции, которые поставляются с этим выпуском, теперь позволяют применять sizes и атрибуты srcset ко всем изображениям, которые вы добавили с помощью загрузчика мультимедиа WordPress. Это также позволяет вам добавлять атрибуты к изображениям в ваших сообщениях. Взгляните на wp_get_attachment_image_sizes . Это возвращает атрибут sizes , который вы можете поймать и изменить с помощью фильтра в файле functions.php для вашей темы. Точно так же wp_get_attachment_image_srcset делает то же самое, только для атрибута srcset .

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

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

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

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

W_calculate_image_srcset — хук, который дает разработчикам возможность фильтровать в соответствии с атрибутами srcset .

Узнайте больше о поддержке адаптивных изображений

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

Преимущества обновления

Если вы еще не обновили WordPress (или если ваш управляемый хост WordPress еще не обновился для вас), ваши пользователи получат некоторые замечательные преимущества, когда вы это сделаете. Поддержка адаптивных изображений может повысить производительность страницы, поскольку их страницы не будут тратить время на удаление слишком больших изображений. Пользователи также отметят весьма впечатляющее улучшение качества снимков. Они не увидят «колбасного производства», которое присутствует во всем. Вместо этого они просто увидят, что это работает хорошо.

Как разработчик, вам придется настроить атрибут sizes в каждом из файлов functions.php для всех ваших тем. Однако, как только вы предпримете это первоначальное усилие, все станет намного проще. После того, как вы справитесь с кривой обучения, вы обнаружите, что работа с этой новой функциональностью происходит вполне естественно.

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