如何在图像中为Wordpost添加自动类

我想使用Bootstrap 3做一个响应式主题。但是, 我需要为每个发布图像自动添加CSS类.img-response, 因为我需要这些图像能够响应。

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

#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的类, 并且需要添加一个新类, 则可以引用与jQuery addClass等效的PHP。或者, 你可以简单地执行以下操作：

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

上面的代码有效..我用它来删除src和data-src进行图像延迟加载。希望这对你有用

#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');

唯一需要注意的是, 当你插入新图像时, 它将在编辑窗格中添加该类, 并且不会影响现有图像。

#3

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

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

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

注意：你可能同样希望覆盖.wp-caption类。

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

#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');

#5

当你在循环中显示帖子时, 你可以执行以下操作：

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

有关更多详细信息, 请参见https://codex.wordpress.org/Function_Reference/the_post_thumbnail。

#6

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

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

#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-response之后的空格, 以便它不会与其他类合并。

#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;
} 

#9

类不是在上载时添加的, 而是在图像发送到编辑器时添加的。你可以使用image_send_to_editor过滤器添加一个或多个类。本示例添加了一个fancybox类。

＃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 ));

＃11

你可以按照以下步骤在CSS中使所有图像响应：

我想在所有内容图像上应用CSS类(bootstrap).img响应

它使用LESS, 但是Sass版本几乎相同：

  img {
    @include img-responsive();
  }

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