向从帖子内容获取的<img>添加类

时间:2015-11-18 作者:Behseini

你能让我知道我怎样才能把一个类添加到从帖子内容获取的图像中吗?我有一个页面叫做promotion 它只包含我上传的一张图片Add Media 现在在第页我有

<div class="container">
  <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>  
        <?php the_content(); ?>
    <?php endwhile; ?>
<?php endif; ?>  
</div>
在前端,我得到了以下信息:

<img class="size-full wp-image-2202 alignright" src="http://rumioptical.com/wp-content/uploads/2014/11/Promotion-Banner.jpg" alt="Promotion Banner" width="800" height="640">
但我只需要

<img class="img-responsive" src="http://rumioptical.com/wp-content/uploads/2014/11/Promotion-Banner.jpg" alt="Promotion">
删除size-full wp-image-2202 alignright 类别和widthheight 属性并添加img-responsive

2 个回复
SO网友:John Hanusek

输出到\\u content()的图像很可能是通过admin中的Media按钮手动添加的。您应该能够从此点添加自己的类。在插入介质模式中选择对齐等时,WP系统会添加默认类。

enter image description here

SO网友:cjbj

将图像插入帖子的那一刻,钩子image_send_to_editor 被调用。钩子的输入是html,也可能是标题短代码。像这样:

[caption id="attachment_999" align="alignright" width="150"]
<a href="http://www.example.com/wp-content/uploads/2016/06/my-image.jpg">
<img src="http://www.example.com/wp-content/uploads/2016/06/my-image-150x150.jpg" alt="My colourful image" width="150" height="150" class="size-thumbnail wp-image-101" />
</a>
Look at how colourful this is!
[/caption]
钩子截取此字符串,允许您操纵它:

add_filter (\'image_send_to_editor\', \'wpse_209128_filter_image\');
function wpse_209128_filter_image ($html) {
    // first, remove the image and caption dimensions
    $html = preg_replace (\'/(width|height)=\\"\\d*\\"\\s/\', \'\', $html);
    // second, replace the class on the img tag
    $html = preg_replace (\'/class=\\"([^"]*)\\", \'class="img-responsive"\', $html);
return $html;
}
注意,一旦在帖子中插入了img,用户仍然可以编辑html并把事情搞砸。

相关推荐

Remove <p></p> after images

我对<p></p> 出现在my之后的标记<img....>. 以下是我在本地主机上查看生成的页面时显示的内容。。。<img src=\"/wp-content/themes/wunderful/assets/images/feedback-danielle.png\" alt=\"Danielle Johnson Deal Town FC Treasurer\"> <p></p> 请注意随机生成的<p>&