Question

我想用Bootstrap 3创建一个响应主题。但是，我需要自动将CSS类.img-responsive添加到每个帖子图像中，因为我需要图像响应。

请在WordPress的functions.php文件或任何其他允许我自动添加CSS类的文件中建议我需要添加的内容。

Answer 1

因为您需要为所有帖子图片添加它，所以您需要为内容添加一个钩子并添加

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和data-src以进行图像延迟加载。希望它适合你

Answer 2

这种方法更好：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 3

我认为最简单的方法是使用这样的CSS。

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

.content 是包含您的帖子内容的区域。

注意：您可能还想覆盖 .wp-caption 类，如此。

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

Answer 4

我有同样的问题，并将此功能添加到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');

Answer 5

当你在循环中显示帖子时，你可以这样做：

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

有关详细信息，请参阅https://codex.wordpress.org/Function_Reference/the_post_thumbnail。

Answer 6

您可以在主题的header.php文件中使用jquery代码。

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

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

我认为您不需要添加类来使图像响应。只需从特色图片中删除高度宽度，图像就会明确响应。

你的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 9

上传时不会添加类，但会将图像发送到编辑器。您可以使用image_send_to_editor过滤器添加一个或多个类。 This example添加了fancybox类。

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

使用LESS，但Sass版本几乎相同：

  img {
    @include img-responsive();
  }

Answer 12

我有以下代码，并且这些帖子来自以前的版本……它们不起作用...

我该怎么办？

<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>

如何在wordpress帖子的图像中添加自动类

12 个答案: