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

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

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

По умолчанию WordPress добавляет фиксированные width и height к тегам <img>, что помогает браузеру резервировать место под изображение и избежать сдвигов контента при загрузке. Однако фиксированные размеры могут мешать адаптивности, особенно на мобильных устройствах.

Атрибут alt важен для SEO и доступности, но иногда автоматически генерируемый alt-текст не подходит и требует корректировки или удаления.

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

Как удалить атрибуты width и height у изображений в контенте

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

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

function wptour_remove_img_dimensions($html) {
    // Убираем width и height из тегов img
    $html = preg_replace('/(width|height)="\\d*"/i', '', $html);
    return $html;
}
add_filter('post_thumbnail_html', 'wptour_remove_img_dimensions', 10);
add_filter('image_send_to_editor', 'wptour_remove_img_dimensions', 10);
add_filter('the_content', 'wptour_remove_img_dimensions', 10);

Этот код удалит атрибуты width и height из изображений в миниатюрах, при вставке в редактор и в самом контенте публикаций. Это простое и эффективное решение.

Особенности и советы

• Регулярное выражение обрабатывает все случаи с числовыми значениями.
• Если вы используете кастомные HTML-структуры, можно расширить фильтр.
• Убедитесь, что верстка сайта адаптивна, иначе удаление размеров может привести к визуальным ошибкам.

Как программно изменить или задать alt-атрибут изображений

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

function wptour_custom_alt_text($attr, $attachment) {
    // Проверка, если alt пустой, заменим на название файла
    if (empty($attr['alt'])) {
        $attr['alt'] = sanitize_text_field(pathinfo(get_attached_file($attachment->ID), PATHINFO_FILENAME));
    }
    // Можно дополнительно менять alt по своим правилам
    return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'wptour_custom_alt_text', 10, 2);

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

Пример удаления alt у всех изображений в контенте

Если нужно полностью удалить alt, можно сделать так:

function wptour_remove_alt_attr($html) {
    $html = preg_replace('/alt="[^"]*"/i', '', $html);
    return $html;
}
add_filter('post_thumbnail_html', 'wptour_remove_alt_attr', 20);
add_filter('image_send_to_editor', 'wptour_remove_alt_attr', 20);
add_filter('the_content', 'wptour_remove_alt_attr', 20);

Как влиять на атрибуты изображений в Gutenberg (блоки)

В редакторе Gutenberg изображения рендерятся через блоки, и фильтры выше не всегда срабатывают на этапе вставки. Чтобы влиять на атрибуты в блоках, можно использовать фильтр render_block для модификации сгенерированного HTML.

function wptour_filter_gutenberg_image_block($block_content, $block) {
    if ($block['blockName'] === 'core/image') {
        // Удаляем width и height
        $block_content = preg_replace('/(width|height)="\\d*"/i', '', $block_content);
        // Можно добавить или изменить alt
        $block_content = preg_replace('/alt="[^"]*"/i', 'alt="Изменённый alt"', $block_content);
    }
    return $block_content;
}
add_filter('render_block', 'wptour_filter_gutenberg_image_block', 10, 2);

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

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

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

Также полезен плагин WPRemark для автоматического анализа и исправления SEO-атрибутов изображений в комментариях и контенте.

Выводы и рекомендации по оптимизации атрибутов изображений в WordPress

Удаление или корректировка атрибутов width, height и alt — важная задача для адаптивных и SEO-ориентированных сайтов. Программные методы, показанные в статье, позволяют тонко настраивать вывод изображений без необходимости устанавливать дополнительные плагины.

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

Если вы хотите упростить задачу и получить дополнительные возможности, рассмотрите инструменты из WPSHOP.