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

Question

Я хочу создать отзывчивую тему с помощью Bootstrap 3. Однако мне нужно автоматически добавлять класс CSS .img-responsive к каждому сообщению, потому что мне нужно, чтобы изображения были отзывчивыми.

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

Answer 1

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

Answer 2

При отображении пост в вашем цикле, вы можете сделать:

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

См https://codex.wordpress.org/Function_Reference/the_post_thumbnail для более подробной информации.

Answer 3

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

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

Answer 4

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

Существует код положить в 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; 
} 

Answer 5

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

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 equivalent to jQuery addClass. Или, вы можете просто сделать это:

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

Код выше работает .. я использовать его для удаления данных и SRC-Src для изображения отложенной загрузки. Надеюсь, он сработает для вас

Answer 6

У меня был тот же вопрос, и добавление этой функции в функции.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'); 

Answer 7

Не совсем уверен, насколько хорошо этот ответ является результативным, но он работает. Просто поставьте это в 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 так не сливается с другими классами.

Answer 8

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

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

Где .content это область, которая содержит ваш пост содержание.

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

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

Answer 9

Этот подход лучше: 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'); 

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

Answer 10

//all classes i need in a string 

$classes = 'img-responsive attachment-post-thumbnail size-post-thumbnail wp-post-image'; 

//then i use my variable 

the_post_thumbnail('post_thumbnail', array('class' => $classes)); 

Answer 11

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

I want to apply css class(bootstrap) .img-responsive on all content images

который использует меньше, но версия Sass это почти то же самое:

img { 
    @include img-responsive(); 
    }