Как добавить автоматический класс в изображение для поста WordPress

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

function add_responsive_class($content){

        $content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
        $document = new DOMDocument();
        libxml_use_internal_errors(true);
        $document->loadHTML(utf8_decode($content));

        $imgs = $document->getElementsByTagName('img');
        foreach ($imgs as $img) {
           $img->setAttribute('class','img-responsive');
        }

        $html = $document->saveHTML();
        return $html;
}

теперь добавьте хук к содержимому

add_filter        ('the_content', 'add_responsive_class');

Однако, если у вас уже есть классы для img и вам нужно добавить новый класс, вы можете обратиться к PHP-эквивалент jQuery addClass. Или вы можете просто сделать это:

$existing_class = $img->getAttribute('class');
$img->setAttribute('class', "img-responsive $existing_class");

Приведенный выше код работает. Я использую его для удаления src и data-src для ленивой загрузки изображения. Надеюсь, это сработает для вас

Этот подход лучше: https://wordpress.stackexchange.com/questions/108831/add-css-class-to-every-image

function add_image_class($class){
    $class .= ' additional-class';
    return $class;
}
add_filter('get_image_tag_class','add_image_class');

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

Я думаю, что самый простой способ — использовать такой CSS.

.content img { height: auto; max-width: 100%; }

Где .content – это область, содержащая содержимое вашего сообщения.

Примечание. Вы также можете переопределить класс .wp-caption.

.wp-caption { width: auto !important; }

У меня был тот же вопрос, и добавление этой функции в functions.php у меня сработало.

function add_image_responsive_class($content) {
   global $post;
   $pattern ="/<img(.*?)class=\"(.*?)\"(.*?)>/i";
   $replacement = '<img$1class="$2 img-responsive"$3>';
   $content = preg_replace($pattern, $replacement, $content);
   return $content;
}
add_filter('the_content', 'add_image_responsive_class');

Когда вы отображаете сообщение в своем цикле, вы можете сделать:

the_post_thumbnail('thumbnail', array('class' => 'img-responsive'));

Подробнее см. https://codex.wordpress.org/Function_Reference/the_post_thumbnail.

Не совсем уверен, насколько хорош этот ответ с точки зрения производительности, но он работает. Просто поместите это в functions.php.

function img_responsive($content){
    return str_replace('<img class="','<img class="img-responsive ',$content);
}
add_filter('the_content','img_responsive');

Обратите внимание, что вам нужен пробел после class="img-responsive, чтобы он не сливался с другими классами.

Вы можете использовать код jquery в файле header.php вашей темы.

jQuery(function() {
  jQuery(img).addClass('img-responsive');
});

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

В ваш function.php добавлен код для удаления ширины высоты.

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 3 );

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

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

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

Я хочу подать заявку css class(bootstrap) .img-responsive для всех изображений содержимого

Здесь используется LESS, но версия Sass почти такая же:

  img {
    @include img-responsive();
  }

У меня следующий код, а так как посты из предыдущих версий... Не сработали...

Что я должен делать?

<figure class="image"><img class="lazyload p402_hide" alt="" 
 width="800" height="400" data-sizes="auto" data- 
src="https://br.clubnation.club/wp-content/uploads/2020/01/primeira- 
loja-oficial-de-harry-potter-sera-aberta-em-nova-york-2.jpg" data- 
 srcset="https://br.clubnation.club/wp- 
 content/uploads/2020/01/primeira-loja-oficial-de-harry-potter-sera-aberta- 
 em-nova-york-2.jpg 328w, https://br.clubnation.club/wp- 
 content/uploads/2020/01/primeira-loja-oficial-de-harry-potter-sera- 
 aberta-em-nova-york-3.jpg 380w, https://br.clubnation.club/wp- 
 content/uploads/2020/01/primeira-loja-oficial-de-harry-potter-sera- 
 aberta-em-nova-york-4.jpg 528w, https://br.clubnation.club/wp- 
 content/uploads/2020/01/primeira-loja-oficial-de-harry-potter-sera- 
 aberta-em-nova-york-5.jpg 704w" />
 <figcaption>A loja será inaugurada no próximo verão.
 (Fonte: Warner Bros/Divulgação)</figcaption></figure>