如何在图像中为 wordpress 帖子添加自动类答案

【问题标题】：How to add automatic class in image for wordpress post如何在图像中为 wordpress 帖子添加自动类
【发布时间】：2013-12-26 16:52:08
【问题描述】：

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

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

【问题讨论】：

标签： css wordpress twitter-bootstrap-3 wordpress-theming

【解决方案1】：

我有以下代码，并且由于帖子来自以前的版本......他们没有工作......

我该怎么办？

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

【讨论】：

【解决方案2】：

因为你需要为你所有的帖子图片添加它，那么你需要为内容添加一个钩子并添加

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 以进行图像延迟加载。希望对你有用

【讨论】：

DOMDocument 的好用处。我看到很多人建议在这种类型的应用程序中使用正则表达式。 +1
regex 比这快得多。考虑也使用javascript来做。使用 jquery，我猜你是这样的，只是 $("#main-content").find("img").addClass("img-responsive")..
@Juan 其他人也建议使用 JS 解决方案，答案是这意味着必须从 PHP 生成页面，然后此函数将在文档加载或您定义的任何其他钩子上运行.. 最好在生成的 PHP 文件中包含类，您将节省不必要的 DOM 操作，这些操作可以直接在后端完成，并且在您进行缓存的情况下也非常有用。另外，响应式图像可以通过 CSS 实现，并且使用 jQuery 来实现，因为您建议的解决方案需要启用 JS，这对于某些人来说可能并非总是如此
@Juan 您会惊讶于有多少人出于各种原因禁用它。一个好的编曲者不会假设任何东西，而是设计来捕捉所有情况，这就是渐进增强的原则。还有，你怎么知道他“迷路了”？你能读心术。无论如何，没有一个完美的解决方案，但你在评论中假设了这么多东西
此解决方案导致the_content() 函数使用<html> 和<body> 标签包装帖子内容。

【解决方案3】：

您可以让所有图片在 CSS 中响应，如下所述：

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

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

  img {
    @include img-responsive();
  }

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

这种方法更好：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');

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

【讨论】：

这个答案比别人好。应该标记为正确答案。
我个人最喜欢这个答案。向正在添加的图像添加类最容易。
我会说这是解决此问题的“WordPress 方式”。
最佳答案
这不适用于块编辑器

【解决方案6】：

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

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

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

注意：您可能还想像这样覆盖 .wp-caption 类。

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

【讨论】：

这应该是正确的答案。将整个内容包装在 div 中，并向其中添加一个名为 content 的类或任何您想要的名称。
叹息。仅仅因为您的方法与 OP 不同，并不意味着您是对的。您可以发表意见，但请将其放在对问题的评论中，因为这个答案完全是题外话。
@PatrikAlienus 这怎么跑题了？目的是使帖子中的所有图像都具有响应性。我的答案中的 CSS 将使帖子中的每个图像都具有响应性。如果我们知道所有图像的选择器，则无需为每个图像添加一个类。此解决方案使用的代码更少，不需要服务器处理。
@Syclone 他专门询问如何自动将特定类添加到图像中，因此这个答案是题外话。
@Syclone 他让你知道他的意图，这是真的。然而，只有在那之后，他才会问一个具体的问题。我相信您的答案因此而偏离主题，而不是因为您的解决方案更糟。不是大多数时候，但是您无法了解 OP 环境的每个细节，因此您应该避免偏离实际问题。这实际上非常重要，因为问答旨在服务于许多人，而不仅仅是一个人。

【解决方案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 后面需要空格，以免与其他类合并。

【讨论】：

如果类不是第一个属性怎么办？

【解决方案8】：

我有同样的问题，将这个函数添加到 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');

【讨论】：

这个答案应该被标记为已解决，因为这比其他答案好得多。这不会在 html 中插入 DOCTYPE、HTML 和 BODY 标记。
这个特定的代码不仅可以完美运行。它允许您在流行的主题通讯和新闻杂志上启用全局模式图像。当您启用任何 CDN 时，全局模式 ON 在其主题上被破坏。通过将这段代码添加到插件中，主题恢复了功能。他们应该雇用您来改进他们的代码，因为他们正在使用 wp-booster 并且他们不想修复它，他们只是说“CDN 可能无法在 Cloudflare 之外运行。

【解决方案9】：

我认为您不需要添加类来使图像响应。只需从特色图像中删除高度宽度，图像肯定会变得响应。

在你的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;
}

【讨论】：

Mitul，我已使用您的代码从帖子图像中删除了宽度和高度。这真的很有帮助。但在 Bootstrap 3.0 中，它不会使帖子图像响应

【解决方案10】：

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

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

【讨论】：

请注意，这是一个 JS 解决方案 .. 这意味着页面必须从 PHP 生成，然后此函数将在文档加载或您定义的任何其他挂钩上运行 .. 最好有生成的 PHP 文件中的类
这不是理想或专业的方式。好的解决方案是使用过滤器

【解决方案11】：

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

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

【讨论】：

感谢 Bertrand，但我需要我的所有帖子图片都能完全响应。所以，我想为所有帖子图片添加 class="img-responsive"。

【解决方案12】：

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

【讨论】：

这个钩子适用于新添加的图像..但不适用于他的旧帖子
正确。请注意，OP 正在创建一个新主题。