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

我想使用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【如何在图像中为Wordpost添加自动类】我有同样的问题, 并将此功能添加到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 variablethe_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" width="800" height="400" data-sizes="auto" data- src="http://img.readke.com/220526/00214224Z-0.jpg 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>