Cum se afișează imaginea reprezentativă a unei pagini?

Adaptat din acest subiect de pe forumurile WP:

<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'single-post-thumbnail'); ?>
<style>
  #banner-id {
    background-image: url('<?php echo $image[0]; ?>');
  }
</style>
<?php endif; ?>

Adăugați acest cod în șablonul paginii single, după the_post(). Recomand să aveți o imagine de antet implicită, astfel încât dacă pagina nu are o imagine reprezentativă, să se folosească aceasta.

'single-post-thumbnail' poate fi înlocuit cu un array care conține dimensiunile ideale pentru antet, de exemplu array(600, 30).

Deoarece utilizați imaginea în afara buclei, trebuie să obțineți mai întâi ID-ul postului. Apoi folosiți acel ID pentru a obține URL-ul imaginii reprezentative.

function wpse207895_featured_image() {
    //Execută dacă este o pagină singulară
    if ( is_singular() ) {

        $id = get_queried_object_id ();

        // Verifică dacă postul/pagina are imagine reprezentativă
        if ( has_post_thumbnail( $id ) ) {

            // Schimbă dimensiunea miniaturii, dar probabil vei avea nevoie de mărimea completă
            $image = wp_get_attachment_image_src( get_post_thumbnail_id( $id ), 'full' );

            $url = $image[0];

        } else {

            //Setează o imagine implicită dacă Imaginea Reprezentativă nu este setată
            $url = '';

        }
    }

    return $url;
}

Acum puteți folosi această funcție pentru a afișa URL-ul imaginii reprezentative în header.

<?php echo wpse207895_featured_image();?>

De exemplu:

<header class="site-header" style="background-image: url('<?php echo wpse207895_featured_image();?>');">
    ....
    ....
</header>

Am găsit că această soluție a funcționat pentru mine

Poți folosi Imaginea caracteristică a paginii ca imagine de fundal pentru un element astfel -->

<?php $backgroundImg = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full' );?>
<article class="banner" style="background-image(url('<?php echo $backgroundImg[0]; ?>'))"></article>

Dar aș recomanda să o folosești într-un element imagine, în atributul 'src' -->

<article class="banner">
 <?php $backgroundImg = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full' );?>
 <img src="<?php echo $backgroundImg[0]; ?>" alt="Imagine caracteristică">
</article>

și să setezi dimensiunea imaginii să se potrivească cu dimensiunea elementului banner.