更改 Wordpress 图像的插入 HTML

Posted 2023-03-05

【中文标题】更改 Wordpress 图像的插入 HTML

【英文标题】：Change inserted HTML for Wordpress images

【发布时间】：2018-04-03 04:11:28

【问题描述】：

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

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

哪些进程：

<div id="attachment_IMAGEID" style="width: WIDTH" class="wp-caption ALIGNMENT">
  <img src="IMAGEURL"    
    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 主题时，我不想错过这一点。

【问题讨论】：

尝试查看“post_thumbnail_html”等过滤器来修改img html输出。

@AndrewSchultz 你能进一步解释一下你的意思吗？我不是在寻找包含缩略图的方法，我想通常更改在帖子或页面中插入图像时使用的 HTML 的结构。由于 Wordpress 在其内部某处指定了该内容，因此应该找到该代码并将其替换为新代码。 （我只是希望如果 Wordpress 更新，它不会被覆盖）。

这个线程向您展示了如何使用我正在谈论的过滤器来修改输出图像的结构。 wordpress.stackexchange.com/questions/134014/…

你会考虑写一个简码吗？如果是，我可以在下面提供答案。我也认为这更好，因此您不必重写函数或添加可能会减慢 WP 的过滤器。

OP 需要一种向字幕短代码添加额外类的方法，这意味着修改字幕短代码模式，而不是在帖子编辑器文本视图中手动添加自定义类。

【参考方案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 );

【参考方案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