更改为Wordpress图像插入的HTML

Question

当您在页面或帖子中插入图像时,Wordpress通常会产生这种或类似的东西:

[caption id="attachment_IMAGEID" align="ALIGNMENT" width="WIDTH"]
<img src="IMAGEURL" alt="" width="WIDTH" height="HEIGHT" 
  class="size-SIZE wp-image-IMAGEID" />IMAGECAPTION
[/caption]

哪个流程可以:

<div id="attachment_IMAGEID" style="width: WIDTH" class="wp-caption ALIGNMENT">
  <img src="IMAGEURL" alt="" width="WIDTH" height="HEIGHT" 
    class="size-SIZE wp-image-IMAGEID">
  <p class="wp-caption-text">IMAGE CAPTION</p>
</div>

我想完全更改插入图像时创建的HTML.使用CSS完成大小调整,定位等.

这是理想情况下应该使用的HTML:

<figure class="figure img-small-left">
  <img src="IMAGEURL" />
  <figcaption class="figure-caption">
    IMAGECAPTION
  </figcaption>
</figure>

如果它说img-small-left我想把CSS的类放在控制图像大小和位置的CSS上.这些是类:

img-small-right // small image, text wraps on the left
img-small-left // small image, text wraps on the right
img-medium // medium-sized image positioned in the center without wrap
img-medium-float // medium-sized image positioned left, text wraps right
img-large // large image, overflows the content width on both sides

在Wordpress主题或其周围可以更改插入HTML的位置？

而且:使用标准的后端图像插入对话框可能会有点棘手,不是吗？想法？Wordpress想要提供的其他可能性可以回归到我想要的最接近的治疗方式.

供参考,这里是图像CSS(采用SASS语法)

figure
  display: table
  img
    outline: 1px solid rgba(0,0,0,0.15)
    outline-offset: -1px
  &.img-small-right
    float: right
    margin: 0.2rem -3.5rem 1rem 1rem
    img
      width: auto
      max-width: 250px
      height: auto
  &.img-small-left
    float: left
    margin: 0.2rem 1rem 1rem -3.5rem
    img
      width: auto
      max-width: 250px
      height: auto
  &.img-medium
    margin: 1rem 0 1rem 2rem
    img
      width: auto
      max-width: 100%
      height: auto
  &.img-medium-float
    float: left
    margin: 0.2rem 1rem 1rem -10rem
    img
      width: auto
      max-width: 450px
      height: auto
  &.img-large
    margin: 1rem -6rem
    img
      width: 100%
      height: auto
  figcaption
    +FontSans
    font-size: 0.8rem
    line-height: 1.35
    display: table-caption
    caption-side: bottom
    color: lighten($Black,30%)
    margin: 0.4rem auto 0.1rem 0

为了使图像和字幕看起来很漂亮是一项很好的工作,所以当我将静态设计转换为有效的WordPress主题时,我不想错过它.

Answer 1

这是您应该使用的正确过滤器：

/**
 * Filters the image HTML markup including the caption shortcode.
 *
 * @since 2.6.0
 *
 * @param string $shcode The image HTML markup with caption shortcode.
 * @param string $html   The image HTML markup.
 */
return apply_filters( 'image_add_caption_shortcode', $shcode, $html );

例如：

function my_custom_markup( $shcode, $html ) {
    return str_replace( "caption", "something_new" , $shcode );
}
add_filter( 'image_add_caption_shortcode','my_custom_markup', 10, 2 );