Как отключить автовыделение и автозагрузку изображений в WordPress

Автор: Николай Панин | Опубликовано: 02.04.2026

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

Что такое автовыделение и автозагрузка изображений в WordPress

Автовыделение в WordPress — это автоматическое добавление CSS-классов и атрибутов (например, alignleft, wp-image-123), а также обёртывание изображений в теги, которые влияют на их стили и расположение. Это упрощает стилизацию, но иногда мешает кастомизации.

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

Почему стоит отключить автовыделение и автозагрузку

Причины отключения могут быть разными:

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

Как отключить автовыделение изображений в WordPress

Для отключения автоматического добавления классов и обёрток можно воспользоваться фильтрами WordPress, которые влияют на содержимое при вставке изображений.

Добавьте следующий код в файл functions.php вашей темы или в плагин:

function wplessons_remove_image_attributes($html, $id, $caption, $title, $align, $url, $size, $alt) {
    // Удаляем класс align
    $html = preg_replace('/class=".*?align[a-z]+.*?"/', '', $html);
    // Удаляем класс wp-image-xxx
    $html = preg_replace('/class=".*?wp-image-\d+.*?"/', '', $html);
    // Удаляем обёртку <figure> и <figcaption>
    $html = preg_replace('/<figure.*?>|<\/figure>|<figcaption.*?>.*?<\/figcaption>/s', '', $html);
    return $html;
}
add_filter('image_send_to_editor', 'wplessons_remove_image_attributes', 10, 8);

Этот код удалит основные классы и обёртки, которые WordPress добавляет при вставке изображений через визуальный редактор.

Объяснение кода

Функция wplessons_remove_image_attributes получает HTML-код вставляемого изображения и с помощью регулярных выражений удаляет классы align и wp-image-, а также обёртки <figure> и <figcaption>. Это позволяет получить более "чистый" HTML для последующей кастомной стилизации.

Как отключить ленивую загрузку (автозагрузку) изображений в WordPress

Начиная с версии 5.5, WordPress по умолчанию добавляет атрибут loading="lazy" к тегам <img>. Чтобы отключить эту функциональность, можно использовать фильтр:

function wplessons_disable_lazy_loading($value) {
    return false;
}
add_filter('wp_lazy_loading_enabled', 'wplessons_disable_lazy_loading');

Этот код полностью отключит ленивую загрузку на сайте.

Отключение ленивой загрузки для конкретных изображений

Если нужно отключить ленивую загрузку не для всех, а только для некоторых изображений, например, для логотипа или первого изображения в посте, можно использовать более тонкий подход:

function wplessons_lazy_loading_exceptions($default, $image, $context) {
    // Отключаем lazy loading для изображений с классом no-lazy
    if (strpos($image, 'class="no-lazy"') !== false) {
        return false;
    }
    return $default;
}
add_filter('wp_lazy_loading_enabled', 'wplessons_lazy_loading_exceptions', 10, 3);

В этом случае добавляйте класс no-lazy к тегу <img>, чтобы отключить ленивую загрузку для конкретного изображения.

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

Если вы не хотите писать код, можно использовать плагины, которые позволяют гибко управлять автовыделением и ленивой загрузкой:

Disable Lazy Load — простой плагин для отключения ленивой загрузки.
Clearfy — популярный плагин оптимизации, который позволяет управлять загрузкой изображений и отключать лишние классы.
Clearfy Pro — расширенная версия с дополнительными опциями оптимизации и управления медиа.

Как проверить отключение автовыделения и автозагрузки

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

Изображения не содержат классов, таких как alignleft или wp-image-XXX.
Отсутствует обёртка <figure> вокруг изображений.
Тег <img> не содержит атрибута loading="lazy", если вы отключили ленивую загрузку.

Если всё выполнено корректно, вы получили полный контроль над выводом и загрузкой изображений на сайте.

Дополнительные рекомендации по оптимизации изображений

Отключение автовыделения и автозагрузки — это часть общей работы по оптимизации изображений. Рекомендуется также:

Использовать современные форматы изображений, такие как WebP.
Оптимизировать размеры и вес изображений перед загрузкой.
Использовать CDN и кеширование.
Применять плагины для оптимизации, например, Clearfy Pro.

Вывод

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