Хук wp_lazy_loading_enabled позволяет включать или отключать ленивую загрузку (атрибут loading="lazy") для определенных HTML-тегов в конкретных контекстах. Этот атрибут помогает оптимизировать загрузку изображений и других медиа-элементов, загружая их только тогда, когда они появляются в видимой части экрана. Рассмотрим, как использовать этот хук для управления лениовой загрузкой в WordPress с примерами.
apply_filters( ‘wp_lazy_loading_enabled’, bool $default, string $tag_name, string $context )Хук wp_lazy_loading_enabled позволяет контролировать установку атрибута loading="lazy" для указанных тегов (например, <img>) в заданных контекстах (таких как get_avatar). Вы можете использовать его, чтобы отключить ленивую загрузку для определенных элементов, которые должны загружаться сразу, или, наоборот, чтобы включить ее для элементов, где она по умолчанию отключена.
Параметры
$default(bool) — По умолчаниюtrue(ленивая загрузка включена). Используйтеfalseдля отключения атрибута.$tag_name(string) — Имя HTML-тега (например,img).$context(string) — Контекст вызова фильтра, например, название функции (get_avatar,wp_get_attachment_imageи т.д.).
Основное использование
Применить хук можно через add_filter:
add_filter( 'wp_lazy_loading_enabled', 'custom_lazy_loading_filter', 10, 3 );
function custom_lazy_loading_filter( $default, $tag_name, $context ) {
// Логика для управления ленивой загрузкой...
return $default;
}
Пример 1: Отключение ленивой загрузки для аватаров
Функция get_avatar() добавляет атрибут loading="lazy" к элементам <img>. Чтобы отключить ленивую загрузку для аватаров, используем следующий код:
add_filter( 'wp_lazy_loading_enabled', 'disable_avatar_lazy_loading', 10, 3 );
function disable_avatar_lazy_loading( $default, $tag_name, $context ) {
if ( 'img' === $tag_name && 'get_avatar' === $context ) {
return false;
}
return $default;
}
Этот код проверяет, что текущий элемент — это <img> и что он загружается через get_avatar, после чего отключает ленивую загрузку.
Пример 2: Отключение ленивой загрузки для изображений в шорткодах
Иногда шорткоды могут добавлять изображения, для которых требуется мгновенная загрузка без отложенной загрузки. Следующий код отключит loading="lazy" для изображений, добавленных через шорткод my_shortcode_images:
add_filter( 'wp_lazy_loading_enabled', 'disable_lazy_loading_for_shortcode', 10, 3 );
function disable_lazy_loading_for_shortcode( $default, $tag_name, $context ) {
if ( 'img' === $tag_name && 'my_shortcode_images' === $context ) {
return false;
}
return $default;
}
Здесь мы проверяем, что загружается элемент <img>, и что вызов произошел из шорткода my_shortcode_images, после чего отключаем ленивую загрузку.
Пример 3: Управление ленивой загрузкой для виджетов
Для виджетов WordPress, особенно тех, которые появляются выше фолда, можно отключить ленивую загрузку, чтобы они быстрее отрисовывались. Например, отключим ленивую загрузку для изображений, отображаемых в виджете my_widget:
add_filter( 'wp_lazy_loading_enabled', 'manage_lazy_loading_for_widget', 10, 3 );
function manage_lazy_loading_for_widget( $default, $tag_name, $context ) {
if ( 'img' === $tag_name && 'my_widget' === $context ) {
return false;
}
return $default;
}
Этот код проверяет, что изображение загружается в контексте my_widget, и отключает ленивую загрузку для этих изображений.
Пример 4: Включение ленивой загрузки для фоновых изображений
Если фоновые изображения загружаются через функцию get_background_image, можно включить ленивую загрузку для оптимизации. В этом примере мы добавим loading="lazy" для всех фоновых изображений, загружаемых функцией get_background_image:
add_filter( 'wp_lazy_loading_enabled', 'enable_lazy_loading_for_background_images', 10, 3 );
function enable_lazy_loading_for_background_images( $default, $tag_name, $context ) {
if ( 'img' === $tag_name && 'get_background_image' === $context ) {
return true;
}
return $default;
}
Здесь ленивую загрузку включают для всех фоновых изображений, загружаемых через get_background_image, что может быть полезно для улучшения производительности сайта.
Заключение
Хук wp_lazy_loading_enabled предоставляет гибкий способ управления атрибутом loading="lazy" для различных элементов сайта в WordPress. Использование этого хука позволяет настраивать поведение загрузки изображений и других медиа-элементов, что помогает оптимизировать производительность и адаптировать сайт под конкретные нужды.