html - 更改为 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 放置类。这些是类:

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

您可以使用以下过滤器:

add_filter( 'img_caption_shortcode', 'my_img_caption_shortcode', 10, 3 );
function my_img_caption_shortcode( $empty, $attr, $content ){
    $attr = shortcode_atts( array(
        'id'      => '',
        'align'   => 'alignnone',
        'width'   => '',
        'caption' => ''
    ), $attr );

    if ( 1 > (int) $attr['width'] || empty( $attr['caption'] ) ) {
        return '';
    }

    if ( $attr['id'] ) {
        $attr['id'] = 'id="' . esc_attr( $attr['id'] ) . '" ';
    }

    return '<figure ' . $attr['id']
    . 'class="wp-caption ' . esc_attr( $attr['align'] ) . '" '
    . 'style="max-width: ' . ( 10 + (int) $attr['width'] ) . 'px;">'
    . do_shortcode( $content )
    . '<figcaption  class="figure-caption">' . $attr['caption'] . '</figcaption>'
    . '</figure>';

}

来源:Plugin API/Filter Reference/img caption shortcode « WordPress Codex