Change chèn HTML cho hình ảnh Wordpress

Question

này hoặc cái gì đó tương tự là những gì Wordpress thường tạo ra khi bạn chèn một hình ảnh trong một trang hoặc bài:

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

nào xử lý để:

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

Tôi muốn hoàn toàn thay đổi HTML đang được tạo khi chèn hình ảnh. Kích thước, định vị và vân vân sẽ được thực hiện với CSS.

Đây là HTML mà lý tưởng nên được sử dụng:

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

đâu nó nói img-nhỏ-left tôi muốn đặt lớp cho CSS mà điều khiển kích thước và vị trí của hình ảnh. Đây là các lớp học:

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 

Ở đâu trong chủ đề Wordpress hoặc xung quanh, tôi có thể thay đổi HTML chèn không?

Và: Có thể hơi phức tạp khi làm việc đó với hộp thoại chèn hình ảnh phụ trợ tiêu chuẩn, phải không? Ý tưởng? Các khả năng khác mà Wordpress muốn cung cấp có thể rơi trở lại cách điều trị gần nhất mà tôi có ý định.

Để tham khảo, đây là CSS hình ảnh (trong cú pháp 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 

Để làm cho hình ảnh và chú thích nhìn đẹp là một mảnh tốt công việc khó khăn, vì vậy tôi không muốn bỏ lỡ khi tôi chuyển đổi thiết kế tĩnh thành một chủ đề Wordpress đang hoạt động.

Answer 1

Đây là bộ lọc chính xác bạn nên sử dụng:

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

Ví dụ:

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

Bạn có thể sử dụng bộ lọc sau:

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

} 

Nguồn: Plugin API/Filter Reference/img caption shortcode « WordPress Codex