Пропустить

Responsives, как изображения под управлением WordPress

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 701.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

К счастью, с запуском WordPress 4.4 разработчики тем и плагинов получат возможность использовать адаптивные изображения в своих продуктах. С начала этого выпуска плагин «Responsive Images RICG» был объединен с ядром WordPress, что означает, что поддержка адаптивных изображений теперь является внутренней функцией WordPress по умолчанию. Давайте посмотрим, как это работает, и как вы можете использовать его, чтобы получить максимум от вашего сайта WordPress.

отзывчивым образ-ПРОФ-WordPress

Как изображения работают responsives

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

Лес « Адаптивные изображения Это функция в фоновом режиме, означающая, что все происходит автоматически каждый раз, когда пользователь загружает изображение в WordPress через интерфейс загрузки мультимедиа. Когда изображение появляется на странице, оно будет иметь атрибут " srcset "И" Размеры В результате этого фонового процесса.

Это означает, что новая функциональность отзывчивых изображений не будет иметь видимого пользовательского интерфейса. Здесь нет параметров для переключения, форм для заполнения или флажков. При этом разработчики тем должны редактировать свои " functions.php Чтобы их изображения имели точность с атрибутом Размеры ". Действительно, когда мы говорим об адаптивных изображениях в WordPress, мы говорим конкретно об атрибутах " srcset "А также" Размеры Которые находятся на теге изображения.

Хотя WordPress делает исключительную работу, вставляя все доступные размеры в атрибут » srcset ", Атрибут" размеры "немного сложнее предсказать. Действительно, атрибут " Размеры Отвечает за сообщение браузеру, как изображение в соответствии с доступными размерами окна. Поскольку информация будет отличаться в зависимости от стиля темы пользователя, лучшее, что мы можем сделать, - это указать следующие разумные значения по умолчанию:

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

sizes="(max-width: {{image-width}}) 100vw, {{image-width}}"

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

Так как атрибут по умолчанию Размеры «Поможет только с изображениями, которые не изменены CSS, скобки фильтров будут доступны, чтобы разработчики темы могли установить« атрибут » Размеры «Каждого изображения, гарантируя, что идеальный» Размеры Доставляется до каждой остановки.

Здесь важно отметить, что по возможности ваша тема не должна полагаться на значение по умолчанию атрибута " Размеры«Чтобы предоставить точную информацию о поддержке отзывчивых изображений». Действительно, атрибут по умолчанию " Размеры »Не позволяет браузеру изменять источник изображения, когда размер окна меньше исходного размера запрошенного изображения. Он также не сможет изменить источник, если изображение редактируется с помощью CSS в точке останова, когда изображение может быть больше запрошенного исходного размера.

Если вы разработчик темы или имеете доступ к базе кодов WordPress, отфильтруйте изображения в своей теме, чтобы обеспечить точность с атрибутом » Размеры Это одна из самых важных вещей, которые вы можете сделать после выхода новой версии. Ниже приводится пример перехвата в " wp_calculate_image_sizes Который вы можете разработать, чтобы соответствовать вашей теме.

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

function adjust_image_sizes_attr( $sizes, $size ) {
   $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px';
   return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'adjust_image_sizes_attr', 10 , 2 );

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

Код источник-сор-изображения отзывчивое

Новые функции были добавлены для атрибута srcset "А также" Размеры Может быть добавлено к изображению, которое было добавлено в WordPress через Media Manager, в дополнение к изображениям, добавленным для отображения содержимого. Функция wp_get_attachment_image_sizes Вернет атрибут по умолчанию Размеры Который можно изменить фильтром вашей темы в файле functions.php ». Функция wp_get_attachment_image_srcset вернет атрибут srcset »Которая будет содержать все доступные размеры запрошенного изображения. Документацию и примеры использования этих новых функций можно найти справочник разработчиков.

Конфигурация адаптивных изображений для вашей темы

С новыми функциями поставляется несколько новых скобок, которые можно использовать для обеспечения нового уровня поддержки адаптивных изображений, который наилучшим образом соответствует вашей теме. Крюк max_srcset_image_width "Разрешит разработчику темы отфильтровать максимальную ширину изображения для включения в" srcset ». Крючок wp_calculate_image_srcset »Будет фильтровать атрибуты« srcset »Изображения, пока крючок (фильтр)« wp_calculate_image_sizes «Разрешит разработчику темы настроить» Размеры Чтобы лучше соответствовать точкам останова изображения в своей теме.

Если вы ищете пример того, как лучше всего отфильтровать " Размеры Прекрасным примером для изображения станет новая тема «двадцать шестнадцать». В файле functions.php этой темы две последние функции фильтруют атрибут " Размеры Чтобы реагировать на различные точки останова изображения в теме.

адаптивные фильтры image WordPress tutorial #

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

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

 

Эта статья содержит комментарии 0

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх