Już od pewnego czasu szukałam po internecie prostej metody dzięki, której mogła bym umieścić obrazek wyróżniający wpis w WordPress jako tło a nie jak jest standardowo w formie grafiki.
Domyślą funkcją umieszczania obrazka wyróżniającego (z ang. thumbnail) we wpisach jest:
the_post_thumbnail();
z jej pomocą obrazki wyświetlane są w formie zwykłej ikony o kreślonych wymiarach. Efekt jest więc taki jak byśmy dodali grafikę ręcznie do wpisu lub na zwykłej stronie.
Jak dodać obrazek wyróżniający (thumbnail) w tle
W celu dodania obrazka thumbnail w tle dowolnego obiektu blokowego HTML (np. div, article) na stronie musimy napisać odpowiednią funkcję PHP. Przykładowo może ona wyglądać tak:
<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<div id="custom-bg" style="background-image: url('<?php echo $image[0]; ?>')">
</div>
<?php endif; ?>
W powyższym przykładzie dodaliśmy ilustrację jako tło dla elementu DIV.
Trochę teorii – czyli jak to działa
Poniższy warunek sprawdza czy dany wpis posiada przypisany obrazek. W przypadku jego braku funkcja się nie wykona.
<?php if (has_post_thumbnail( $post->ID ) ): ?> <?php endif; ?>
Teraz pobieramy adres naszego obrazka i przypisujemy go do zmiennej $image.
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
Kolej na wypisanie naszego obrazka. W tym celu przyda nam się właściwość CSS background-image.
<div id="custom-bg" style="background-image: url('<?php echo $image[0]; ?>')"> </div>
Poniższy kod opisałam dość ogólnie. Nie powinien jednak on sprawiać większych problemów.
https://wordpress.aurainweb.pl/jak-dodac-ikone-wpisu-do-wordpress/
Źródła:
- https://stackoverflow.com/questions/11261883/how-to-get-wordpress-post-featured-image-url
- https://developer.wordpress.org/reference/functions/get_the_post_thumbnail/
- https://developer.wordpress.org/reference/functions/the_post_thumbnail/
Dodatkowe tagi:
miniaturka, obrazek wyróżniający, thumbnail jako tło a nie grafika
obrazek w tle nagłówka posta
wordpress obrazek w tle
dodanie obrazka do nagłówka
ikona wpisu
