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 );

Answer 2

您可以使用以下过滤器：

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

更改为Wordpress图像插入的HTML

2 个答案: