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.
Spróbuj looki do filtrów takich jak "post_thumbnail_html", aby zmodyfikować wyjście img html. –
@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). –
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 –