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

В WordPress теги <img> автоматически получают ряд атрибутов, таких как width, height, alt, class и другие. Однако в некоторых случаях необходимо изменить или полностью удалить определённые атрибуты для оптимизации загрузки страниц, улучшения SEO или стилистической доработки. Сделать это можно без установки дополнительных плагинов, прямо в теме или в дочерней теме.

Почему стоит удалять или изменять атрибуты img в WordPress

Атрибуты width и height помогают браузеру зарезервировать место под изображение, что улучшает CLS (Cumulative Layout Shift) и поведение сайта при загрузке. Но иногда эти размеры задаются некорректно или мешают адаптивной верстке.

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

Атрибуты class и style могут мешать кастомизации CSS или конфликтовать с плагинами и темами.

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

Как удалить атрибуты width и height из img в WordPress

Если вы хотите убрать атрибуты width и height из всех изображений в контенте, используйте фильтр the_content и регулярные выражения для удаления этих атрибутов.

function wpmart_remove_img_size_attributes($content) {
    return preg_replace('/\s(width|height)=\"\d*\"/i', '', $content);
}
add_filter('the_content', 'wpmart_remove_img_size_attributes');

Этот код удалит атрибуты width и height из всех <img> тегов в содержимом записей и страниц.

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

function wpmart_remove_thumbnail_size_attributes($html) {
    return preg_replace('/\s(width|height)=\"\d*\"/i', '', $html);
}
add_filter('post_thumbnail_html', 'wpmart_remove_thumbnail_size_attributes');

Как программно изменить или добавить атрибут alt в img WordPress

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

function wpmart_custom_alt_attribute($attr, $attachment, $size) {
    if (empty($attr['alt'])) {
        $attr['alt'] = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
        if (empty($attr['alt'])) {
            $attr['alt'] = 'Описание изображения для SEO';
        }
    }
    return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'wpmart_custom_alt_attribute', 10, 3);

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

Удаление или изменение атрибутов class и style в img

Иногда тема или плагины добавляют лишние классы или встроенные стили к изображениям, что мешает кастомизации. Чтобы очистить эти атрибуты, можно также применить фильтр wp_get_attachment_image_attributes и модифицировать поля class и style.

function wpmart_clean_img_class_style($attr) {
    // Убираем класс по умолчанию
    if (!empty($attr['class'])) {
        // Оставим только нужные классы, например, 'custom-img'
        $allowed_classes = ['custom-img'];
        $classes = explode(' ', $attr['class']);
        $filtered = array_intersect($classes, $allowed_classes);
        $attr['class'] = implode(' ', $filtered);
    }
    // Убираем встроенный стиль
    if (!empty($attr['style'])) {
        unset($attr['style']);
    }
    return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'wpmart_clean_img_class_style');

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

Удаление атрибутов img в Gutenberg блоках

Если вы используете редактор Gutenberg, атрибуты изображений формируются иначе, но можно использовать фильтр render_block для очистки HTML блоков с картинками.

function wpmart_filter_gutenberg_img_attrs($block_content, $block) {
    if ($block['blockName'] === 'core/image') {
        $block_content = preg_replace('/\s(width|height|style)=\".*?\"/i', '', $block_content);
    }
    return $block_content;
}
add_filter('render_block', 'wpmart_filter_gutenberg_img_attrs', 10, 2);

Этот код удалит указанные атрибуты из всех блоков изображений в Gutenberg, сохраняя только необходимые атрибуты для корректного отображения.

Практические советы и рекомендации

• Перед удалением атрибутов width и height убедитесь, что ваша тема поддерживает адаптивные изображения с помощью CSS (например, max-width: 100%; height: auto;).
• Для SEO всегда задавайте осмысленные alt атрибуты. Если не хотите писать вручную, используйте автоматическую генерацию через фильтры.
• Удаление лишних классов и стилей помогает избежать конфликтов с плагинами и темами, но будьте аккуратны, чтобы не нарушить дизайн.
• Если вы используете плагины кеширования или оптимизации, после внесения изменений очистите кеш, чтобы увидеть результат.

Заключение

Управление атрибутами тегов <img> в WordPress — важная задача для повышения производительности, адаптивности и SEO вашего сайта. В этой статье вы получили готовые решения и примеры кода, которые легко внедряются в functions.php вашей темы или дочерней темы, без необходимости ставить дополнительные плагины.

Если хотите расширить функционал по оптимизации сайта, обратите внимание на плагин Clearfy Pro, который помогает улучшать производительность и SEO без сложных настроек.