Как изменить вывод атрибутов img в WordPress: практические примеры и советы

Автор: Анна Егорова | Опубликовано: 08.01.2026

Почему важно контролировать атрибуты img в WordPress

Изображения на сайте играют ключевую роль в визуальном восприятии и SEO-оптимизации. WordPress автоматически генерирует теги <img> с набором атрибутов, таких как src, alt, width, height и другие. Однако по умолчанию не всегда выставляются все необходимые атрибуты или их значения не соответствуют требованиям вашего проекта. Например, может быть важно добавить loading="lazy" для ленивой загрузки, добавить srcset для адаптивных изображений или изменить alt для лучшей SEO-оптимизации.

Контроль над атрибутами позволяет повысить производительность сайта, улучшить доступность и SEO, а также адаптировать вывод под уникальные задачи.

В этой статье мы разберём, как в WordPress изменить вывод атрибутов <img> тегов, используя фильтры и хуки, а также приведём практические примеры с кодом.

Как WordPress формирует теги <img> и где вмешаться

Основной функцией, которая генерирует HTML для изображений в WordPress, является wp_get_attachment_image(). Она возвращает тег <img> с набором атрибутов, которые формируются внутри функции wp_get_attachment_image_attributes(). Именно этот фильтр позволяет изменять атрибуты перед выводом.

Для изменения атрибутов изображений используют фильтр wp_get_attachment_image_attributes. Он принимает массив атрибутов и ID вложения, а возвращает модифицированный массив.

Пример базового подключения нашего фильтра:

add_filter('wp_get_attachment_image_attributes', 'wptests_change_img_attributes', 10, 3);

Этот фильтр сработает при каждом вызове функции вывода изображения, например, при <?php the_post_thumbnail(); ?> или <?php echo wp_get_attachment_image($id, 'full'); ?>.

Пример 1: Добавление атрибута loading="lazy" для всех изображений

Ленивая загрузка (lazy loading) позволяет ускорить загрузку страниц за счёт того, что изображения подгружаются только при прокрутке до них. В WordPress с версии 5.5 она включена по умолчанию, но иногда нужно принудительно добавить или изменить этот атрибут.

function wptests_change_img_attributes($attr, $attachment, $size) {
    // Добавляем атрибут loading="lazy"
    $attr['loading'] = 'lazy';
    return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'wptests_change_img_attributes', 10, 3);

Этот код добавит атрибут loading="lazy" ко всем изображениям, независимо от того, есть он или нет.

Пример 2: Динамическое изменение alt для изображений без описания

Атрибут alt важен для SEO и доступности. Если в библиотеке медиафайлов у изображения нет заполненного alt, его выводят пустым. Мы можем подставить кастомное значение, например, название сайта с добавлением идентификатора.

function wptests_fill_empty_alt($attr, $attachment, $size) {
    if (empty($attr['alt'])) {
        $title = get_the_title($attachment->ID);
        if (!$title) {
            $title = 'Изображение на сайте wptests.ru';
        }
        $attr['alt'] = $title;
    }
    return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'wptests_fill_empty_alt', 20, 3);

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

Пример 3: Удаление width и height для адаптивного дизайна

По умолчанию WordPress добавляет фиксированные атрибуты width и height к изображениям, что помогает избежать сдвигов контента (CLS), но иногда это мешает адаптивности, особенно если стили CSS управляют размерами.

Чтобы удалить эти атрибуты, можно написать:

function wptests_remove_img_dimensions($attr, $attachment, $size) {
    if (isset($attr['width'])) {
        unset($attr['width']);
    }
    if (isset($attr['height'])) {
        unset($attr['height']);
    }
    return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'wptests_remove_img_dimensions', 15, 3);

Этот подход полезен, если вы полностью контролируете размеры через CSS и хотите избежать конфликтов.

Как использовать WPShop Clearfy Pro для оптимизации вывода изображений

Плагин Clearfy Pro предлагает расширенные настройки оптимизации, включая управление атрибутами изображений, автоматическое добавление атрибута loading="lazy", удаление лишних атрибутов и улучшение SEO.

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

Добавление пользовательских атрибутов для изображений в Gutenberg и классическом редакторе

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

Пример добавления атрибута data-custom к изображению в классическом редакторе:

function wptests_add_custom_data_attribute($html, $id, $caption, $title, $align, $url, $size, $alt) {
    $custom_data = ' data-custom="wptests"';
    $html = str_replace('<img ', '<img' . $custom_data . ' ', $html);
    return $html;
}
add_filter('image_send_to_editor', 'wptests_add_custom_data_attribute', 10, 8);

Это позволит добавлять свои атрибуты, которые можно использовать для стилизации или JavaScript.

Заключение. Рекомендации по работе с атрибутами img в WordPress

Всегда используйте фильтр wp_get_attachment_image_attributes для массовых изменений атрибутов изображений.
Для ленивой загрузки используйте атрибут loading="lazy", если ваш шаблон или плагины не добавляют его автоматически.
Заполняйте атрибут alt для всех изображений — это важно для SEO и доступности.
Если у вас адаптивный дизайн, подумайте об удалении фиксированных размеров width/height и контроле размеров через CSS.
Для сложных оптимизаций рассмотрите использование плагина Clearfy Pro, который автоматизирует многие задачи.
Не забывайте тестировать изменения на разных устройствах и браузерах, чтобы убедиться в правильности отображения.