2017-10-22 101 views
5

to lub coś podobnego, co Wordpress zwykle produkuje kiedy wstawić obrazek na stronie lub pocztą:Zmień włożona HTML dla Wordpress obrazów

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

który przetwarza do:

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

chcę całkowicie zmienić HTML, który jest tworzony po wstawieniu obrazu. Rozmiary, pozycjonowanie itd. Będą wykonywane za pomocą CSS.

To jest HTML, który powinien być idealnie zastosowane:

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

gdzie jest napisane img-small-lewo chcę umieścić klasę dla CSS, który steruje rozmiaru i położenia obrazu. Są to klasy:

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 

Gdzie w temacie Wordpress lub w jego okolicy mogę zmienić HTML wstawiania?

I: Może to trochę skomplikować, aby wykonać tę pracę za pomocą standardowego okna dialogowego wstawiania obrazów backendu, nie? Pomysły? Inne możliwości, które Wordpress chce zaoferować, mogą wrócić do najbliższej metody leczenia, którą zamierzam.

Dla porównania, tutaj jest obraz CSS (w składni 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 

Aby zdjęcia i podpisy piękny wygląd był dobry kawał ciężkiej pracy, więc nie chcę przegapić, że kiedy przekształcić statyczny projekt w działający motyw Wordpress.

+0

Spróbuj looki do filtrów takich jak "post_thumbnail_html", aby zmodyfikować wyjście img html. –

+0

@AndrewSchultz Czy możesz wyjaśnić, co masz na myśli? Nie szukam sposobów na dołączanie miniatur, chcę ogólnie zmienić strukturę kodu HTML, który jest używany, gdy obraz jest wstawiany do postu lub strony. Ponieważ Wordpress ma to gdzieś w sobie, powinno być sprawą znalezienia tego kodu i zastąpienia go nowym kodem. (Mam tylko nadzieję, że to nie jest miejsce, które jest nadpisane, jeśli Wordpress został zaktualizowany). –

+0

Wątek ten pokazuje, jak użyć filtra, o którym mówię, aby zmodyfikować strukturę wyjściowego obrazu. https://wordpress.stackexchange.com/questions/134014/how-do-i-change-modify-the-post-thumbnail-html-output –

Odpowiedz

1

ta jest poprawna filtr należy użyć:

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

Na przykład:

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

można wykorzystać następujący filtr:

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

} 

Źródło: Plugin API/Filter Reference/img caption shortcode « WordPress Codex

Powiązane problemy