CSS 如何在wordpress帖子的图像中添加自动类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20473004/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add automatic class in image for wordpress post
提问by Amit Sarker
I want to make a responsive theme with Bootstrap 3. However, I need to automatically add the CSS class .img-responsiveto every post image because I need the images to be responsive.
我想用 Bootstrap 3 制作一个响应式主题。但是，我需要自动将 CSS 类添加.img-responsive到每个帖子图像中，因为我需要图像具有响应性。
Please suggest me what I need to add in WordPress's functions.phpfile or any other file that will allow me to add the CSS class automatically.
请建议我需要在 WordPressfunctions.php文件或任何其他允许我自动添加 CSS 类的文件中添加什么。
回答by AhmadAssaf
since you need to have it for all of your post images, then you need to add a hook for the content and add
由于您需要为所有帖子图片使用它，因此您需要为内容添加一个钩子并添加
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;
}
now add the hook to the content
现在将钩子添加到内容中
add_filter ('the_content', 'add_responsive_class');
However, if you already have classes for the img and you need to add a new class then you can refer to PHP equivalent to jQuery addClass. Or, you can simply do this:
但是，如果您已经有 img 的类并且您需要添加一个新类，那么您可以参考PHP 等效于 jQuery addClass。或者，您可以简单地执行以下操作：
$existing_class = $img->getAttribute('class');
$img->setAttribute('class', "img-responsive $existing_class");
The code above works .. i use it to remove src and data-src for image lazy loading. Hope it works for you
上面的代码有效..我用它来删除图像延迟加载的 src 和 data-src。希望这对你有用
回答by Yaron
This approach is better: https://wordpress.stackexchange.com/questions/108831/add-css-class-to-every-image
这种方法更好：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');
Only caveat is that it adds the class within the edit pane when you insert new images and doesn't affect pre existing ones.
唯一需要注意的是，当您插入新图像时，它会在编辑窗格中添加该类，并且不会影响预先存在的图像。
回答by Syclone
I think the easiest way is to use CSS like this.
我认为最简单的方法是像这样使用 CSS。
.content img { height: auto; max-width: 100%; }
Where .contentis the area that contains your post content.
其中.content是包含您的帖子内容的区域。
Note: You may also want to override the .wp-captionclass as well like so.
注意：您可能还想像这样覆盖.wp-caption类。
.wp-caption { width: auto !important; }
回答by user793487
I had the same question, and adding this function to functions.php worked for me.
我有同样的问题，将此函数添加到 functions.php 对我有用。
function add_image_responsive_class($content) {
global $post;
$pattern ="/<img(.*?)class=\"(.*?)\"(.*?)>/i";
$replacement = '<imgclass=" img-responsive">';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
add_filter('the_content', 'add_image_responsive_class');
回答by Bertrand
When you display post in your loop, you could do :
当您在循环中显示帖子时，您可以执行以下操作：
the_post_thumbnail('thumbnail', array('class' => 'img-responsive'));
See https://codex.wordpress.org/Function_Reference/the_post_thumbnailfor more details.
有关更多详细信息，请参阅https://codex.wordpress.org/Function_Reference/the_post_thumbnail。
回答by super global user
You can use jquery code on the header.php file of your theme.
您可以在主题的 header.php 文件中使用 jquery 代码。
jQuery(function() {
jQuery(img).addClass('img-responsive');
});
回答by Lallex
Not quite sure how good this answer is performance wise but it works. Just put this in functions.php.
不太确定这个答案在性能方面有多好，但它有效。把它放在functions.php 中。
function img_responsive($content){
return str_replace('<img class="','<img class="img-responsive ',$content);
}
add_filter('the_content','img_responsive');
Please note that you need the space after class="img-responsiveso it doesn't merge with other classes.
请注意，您需要后面的空间，class="img-responsive因此它不会与其他类合并。
回答by Mitul Shah
I think you don't require to add class to make image responsive. just remove height width from featured image, image will become responsive definitely.
我认为您不需要添加类来使图像响应。只需从特色图像中删除高度宽度，图像肯定会变得响应。
There is code put in your function.php to remove height width
在您的 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;
}
回答by diggy
Classes are not added on upload, but when the image is sent to the editor. You can use the image_send_to_editorfilter to add one or more classes. This exampleadds a fancyboxclass.
类不会在上传时添加，而是在图像发送到编辑器时添加。您可以使用image_send_to_editor过滤器添加一个或多个类。这个例子添加了一个fancybox类。
回答by Yolexis Reyes
//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 ));
