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

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

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

Под автовыделением понимается автоматическое добавление атрибутов, например, class="alignleft", alignright или aligncenter, а также инлайновых стилей к тегам <img>. Это происходит при вставке изображения через редактор и влияет на визуальное расположение и поведение картинки.

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

Почему может понадобиться отключить эти функции

Несмотря на преимущества lazy loading, существуют ситуации, когда нужно отключить эту функцию:

• Конфликты с плагинами, которые тоже управляют загрузкой изображений.
• Нестандартные шаблоны и темы, где автоматические классы мешают верстке.
• Оптимизация SEO или UX, когда требуется полный контроль над атрибутами и порядком загрузки.

Также автовыделение может приводить к нежелательным отступам или позиционированию картинок, если тема не учитывает стандартные классы WordPress.

Как отключить автоматическое добавление классов выравнивания

Для отключения автоматических классов и стилей, которые WordPress добавляет к изображениям, можно использовать фильтр get_image_tag_class или обработать HTML через image_send_to_editor. Пример функции, которая удаляет классы выравнивания:

function wplessons_remove_image_alignment_classes( $class ) {
    // Удаляем классы alignleft, alignright, aligncenter
    $class = preg_replace( '/align(left|right|center)/', '', $class );
    // Очищаем лишние пробелы
    $class = trim( $class );
    return $class;
}
add_filter( 'get_image_tag_class', 'wplessons_remove_image_alignment_classes' );

Этот код нужно добавить в файл functions.php вашей темы или в плагин-муфта. Он удалит стандартные классы выравнивания из тегов изображений.

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

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

function wplessons_disable_lazy_loading( $default, $image, $context ) {
    // Отключаем lazy loading для всех изображений
    return false;
}
add_filter( 'wp_lazy_loading_enabled', 'wplessons_disable_lazy_loading', 10, 3 );

Этот код отключит lazy loading на всем сайте. Если нужно выключить только для определённых изображений, можно добавить условие внутри функции.

Отключение lazy loading на уровне темы или плагина

Если вы используете тему, где lazy loading реализован кастомно, или плагин, добавляющий свои скрипты, стоит проверить документацию и настройки. Например, плагин Clearfy Pro из WPShop позволяет гибко управлять оптимизацией загрузки изображений и может быть альтернативным решением без ручного кода.

Как проверить, что отключение сработало

После добавления кода на сайт:

• Обновите страницу с изображениями и посмотрите исходный код (Ctrl+U в браузере).
• Проверьте, что у тегов <img> отсутствует атрибут loading="lazy".
• Убедитесь, что классы alignleft, alignright и aligncenter не добавляются.
• Проверьте визуальное отображение, чтобы убедиться, что изменения не сломали верстку.

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

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

• Clearfy Pro — расширенные настройки оптимизации, включая lazy loading, кеширование и очистку кода без лишних сложностей.
• WP Rocket — мощный кеш-плагин с опциями управления lazy loading и оптимизации front-end.
• Smush — оптимизация и сжатие изображений, совместим с отключением стандартного lazy loading.

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

Пример комплексной функции для контроля изображений на сайте

function wplessons_customize_images() {
    // Убираем классы выравнивания
    add_filter( 'get_image_tag_class', function( $class ) {
        return preg_replace( '/align(left|right|center)/', '', $class );
    });

    // Отключаем lazy loading
    add_filter( 'wp_lazy_loading_enabled', '__return_false' );
}
add_action( 'after_setup_theme', 'wplessons_customize_images' );

Этот код объединяет оба решения и подходит для быстрого отключения автозагрузки и автоклассов изображений.