Отключение автоматического добавления width и height атрибутов изображений в WordPress

Вы можете удалить атрибуты width и height, отфильтровав вывод функции image_downsize, которая находится в файле wp-includes/media.php. Для этого вам нужно написать собственную функцию и выполнить её через файл functions.php вашей темы или в виде плагина.

Пример:

Удаление атрибутов width и height.

/**
 * Это модификация функции image_downsize() из wp-includes/media.php
 * Мы удалим все ссылки на ширину и высоту, поэтому тег img 
 * не будет добавлять атрибуты width и height к изображению, отправляемому в редактор.
 * 
 * @param bool false Отсутствие ссылок на высоту и ширину.
 * @param int $id ID вложения для изображения.
 * @param array|string $size Необязательный параметр, по умолчанию 'medium'. Размер изображения, массив или строка.
 * @return bool|array false при неудаче, массив при успехе.
 */
function myprefix_image_downsize( $value = false, $id, $size ) {
    if ( !wp_attachment_is_image($id) )
        return false;

    $img_url = wp_get_attachment_url($id);
    $is_intermediate = false;
    $img_url_basename = wp_basename($img_url);

    // попытка получить новый стиль промежуточного размера
    if ( $intermediate = image_get_intermediate_size($id, $size) ) {
        $img_url = str_replace($img_url_basename, $intermediate['file'], $img_url);
        $is_intermediate = true;
    }
    elseif ( $size == 'thumbnail' ) {
        // Возврат к старому миниатюрному изображению
        if ( ($thumb_file = wp_get_attachment_thumb_file($id)) && $info = getimagesize($thumb_file) ) {
            $img_url = str_replace($img_url_basename, wp_basename($thumb_file), $img_url);
            $is_intermediate = true;
        }
    }

    // У нас есть фактический размер изображения, но может потребоваться дополнительное ограничение, если content_width уже
    if ( $img_url) {
        return array( $img_url, 0, 0, $is_intermediate );
    }
    return false;
}

Привяжите новую функцию к хуку image_downsize:

/* Удаление ссылок на высоту и ширину из функции image_downsize.
 * Мы добавили новый параметр, поэтому приоритет 1, как всегда, и 
 * количество новых параметров — 3.
 */
add_filter( 'image_downsize', 'myprefix_image_downsize', 1, 3 );

Также не забудьте правильно масштабировать изображения в вашем CSS:

/* Размеры изображений и выравнивание */
.entry-content img,
.comment-content img,
.widget img {
    max-width: 97.5%; /* Гибкие изображения для записей, комментариев и виджетов */
}
img[class*="align"],
img[class*="wp-image-"] {
    height: auto; /* Убедитесь, что изображения с добавленными WordPress атрибутами height и width масштабируются правильно */
}
img.size-full {
    max-width: 97.5%;
    width: auto; /* Предотвращение растягивания полноразмерных изображений с атрибутами height и width в IE8 */
}

Надеюсь, это поможет вам.

С уважением,

Вы можете использовать фильтр post_thumbnail_html для удаления атрибутов:

function remove_img_attr ($html) {
    return preg_replace('/(width|height)="\d+"\s/', "", $html);
}

add_filter( 'post_thumbnail_html', 'remove_img_attr' );

Поместите этот код в файл functions.php вашей темы

Вы можете переопределить встроенные стили/атрибуты с помощью !important:

.wp-post-image {
    width: auto !important; /* или, возможно, 100% в случае использования сетки */
    height: auto !important; 
}

Это не самое чистое решение, но оно решает вашу проблему.

CSS решение:

img[class*="align"], img[class*="wp-image-"] {
    width: auto;
    height: auto;
}

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

PHP решение:

Это предотвратит добавление атрибутов width/height для любого нового медиа в редакторе WordPress (через 'Добавить медиа'). Примечание: это может также повлиять на подписи к изображениям!

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

add_filter( 'post_thumbnail_html', 'remove_widthHeight_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_widthHeight_attribute', 10 );

Лучшее решение — разместить jQuery в подвале сайта

jQuery(document).ready(function ($) {
    jQuery('img').removeAttr('width').removeAttr('height');
});

Добавьте этот фрагмент кода: (Применяется и к новому редактору Gutenberg)

function disable_add_img_width_height( $value, $image, $context, $attachment_id ) {
    // Отключаем добавление атрибутов width и height для изображений в контенте, цитатах и виджетах
    if ($context === 'the_content' || $context === 'the_excerpt' ||  $context === 'widget_text_content')
        return false;
    return $value;
}
add_filter( 'wp_img_tag_add_width_and_height_attr', 'disable_add_img_width_height', 10, 4 );

Вот простое решение на Javascript:

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
  $('img').each(function(){
  $(this).removeAttr('width')
  $(this).removeAttr('height');
 });
});
</script>

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

 $('.myspecificclass img').each(function()