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

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

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

По умолчанию WordPress при вставке изображения добавляет в тег <img> атрибуты width и height, соответствующие размерам файла. Это помогает браузеру резервировать место под картинку, но фиксированные размеры часто ломают адаптивность дизайн-макета. Кроме того, не всегда автоматически добавляемый alt тэг соответствует требованиям SEO или доступности сайта.

Удаление или изменение этих атрибутов вручную в редакторе неудобно и неэффективно. Лучше использовать фильтры WordPress, которые позволяют автоматически модифицировать вывод HTML с изображениями.

Удаляем атрибуты width и height из изображений

Для удаления атрибутов width и height можно использовать фильтр post_thumbnail_html (для миниатюр) и image_send_to_editor (для вставленных изображений в контент). Вот пример функции, которая удаляет эти атрибуты из HTML изображения:

function wp_pro_remove_img_dimensions($html) {
    // Удаляем width и height с помощью регулярных выражений
    $html = preg_replace('/(width|height)="\d*"/', '', $html);
    return $html;
}
add_filter('post_thumbnail_html', 'wp_pro_remove_img_dimensions', 10);
add_filter('image_send_to_editor', 'wp_pro_remove_img_dimensions', 10);

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

Что стоит учитывать

• Удаление размеров делает сайт более гибким, но может вызвать смещение контента при загрузке страниц, если CSS не предусматривает место под изображения.
• Рекомендуется использовать CSS-свойства max-width: 100% и height: auto для адаптивности.

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

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

function wp_pro_custom_image_alt($attr, $attachment, $size) {
    if (empty($attr['alt'])) {
        // Если alt пустой, задаём кастомный текст
        $attr['alt'] = 'Описание изображения для SEO и доступности';
    } else {
        // Можно дополнить или изменить существующий alt
        $attr['alt'] .= ' - дополнительный текст';
    }
    return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'wp_pro_custom_image_alt', 10, 3);

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

Советы по работе с alt

• Используйте информативные ключевые слова в alt без избыточного наполнения.
• Для декоративных изображений можно оставить alt="", чтобы избежать избыточных описаний для скринридеров.

Оптимизация атрибутов с помощью фильтра wp_pro_filter_content_images

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

function wp_pro_filter_content_images($content) {
    // Удаляем width и height из всех тегов img
    $content = preg_replace('/(width|height)="\d*"/', '', $content);
    
    // Пример замены alt для всех изображений
    $content = preg_replace_callback('/<img([^>]*)alt="([^"]*)"([^>]*)>/i', function($matches) {
        $old_alt = $matches[2];
        $new_alt = $old_alt . ' - оптимизировано wp-pro.ru';
        return '<img' . $matches[1] . 'alt="' . $new_alt . '"' . $matches[3] . '>';
    }, $content);
    return $content;
}
add_filter('the_content', 'wp_pro_filter_content_images');

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

Примеры полезных плагинов для управления атрибутами изображений

Хотя мы рассмотрели способы без плагинов, иногда удобнее использовать готовые решения:

• SEO Friendly Images — автоматически добавляет и оптимизирует атрибуты alt и title.
• Clearfy Pro — включает инструменты оптимизации вывода HTML, в том числе для изображений.

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

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

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