Design dinamic în WordPress: afișarea aleatorie a imaginilor de fundal în header

Zona superioară a unui blog (antetul sau headerul) este primul element vizual pe care îl remarcă vizitatorii atunci când accesează site-ul. O modalitate excelentă de a oferi dinamism și prospețime paginii este afișarea unei imagini diferite în header la fiecare reîncărcare sau navigare între articole.

Există mai multe metode prin care poți implementa imagini aleatorii (random) în headerul unei teme WordPress, de la un simplu fragment de cod PHP până la funcționalitatea nativă oferită de sistemul de personalizare WordPress.

Metoda 1: Selectarea aleatorie a imaginii prin funcția PHP rand()

Cea mai directă metodă presupune pregătirea unui set de imagini cu dimensiuni identice și denumirea lor după un tipar numeric previzibil.

Pași de pregătire:

1. Creează imaginile dorite la dimensiunile exacte ale zonei de header (de exemplu, 1200 × 300 pixeli).
2. Denumește fișierele după un model uniform, cum ar fi: imagineheader_1.jpg, imagineheader_2.jpg, imagineheader_3.jpg.
3. Încarcă fișierele în folderul images al temei active (sau într-o temă copil / child theme).

Apoi, în fișierul header.php al temei, inserează următorul cod în locul unde se afișează elementul grafic de antet:

<?php
// Generăm un număr aleatoriu între 1 și 3
$random_num = rand(1, 3);
$theme_dir = get_stylesheet_directory_uri();
?>
<img src="<?php echo esc_url($theme_dir . '/images/imagineheader_' . $random_num . '.jpg'); ?>" 
     width="1200" 
     height="300" 
     alt="Antet dexblog" 
     class="site-header-image" />

Dacă în viitor dorești să adaugi mai multe imagini (de exemplu 5 sau 10), este suficient să modifici al doilea parametru al funcției: rand(1, 10).

Metoda 2: Fundal aleatoriu setat prin stil CSS inline

Dacă headerul conține text suprapus (cum ar fi titlul site-ului și sloganul), este preferabil să folosești o imagine de fundal (background image) aplicată pe containerul principal:

<?php
$random_num = rand(1, 4);
$header_bg = get_stylesheet_directory_uri() . '/images/header-bg-' . $random_num . '.jpg';
?>
<header class="site-header" style="background-image: url('<?php echo esc_url($header_bg); ?>'); background-size: cover; background-position: center;">
    <div class="header-content">
        <h1><?php bloginfo('name'); ?></h1>
        <p><?php bloginfo('description'); ?></p>
    </div>
</header>

Metoda 3: Funcționalitatea nativă WordPress Custom Header

WordPress oferă suport nativ pentru imagini de antet aleatorii direct din panoul de administrare, fără a fi nevoie să modifici codul manual. Dacă tema ta declară suport pentru antet personalizat în functions.php:

<?php
add_theme_support('custom-header', array(
    'width'          => 1200,
    'height'         => 300,
    'random-default' => true,
));
?>

Poți naviga în panoul de control la Aspect → Personalizare → Imagine de antet (Appearance → Customize → Header Image). Acolo poți încărca mai multe imagini și bifa opțiunea Afișează aleatoriu imaginile încărcate (Randomize uploaded headers). WordPress se va ocupa automat de alternarea lor la fiecare afișare.

Recomandări de performanță și bune practici

• Optimizarea imaginilor: Imaginile de header au dimensiuni mari; comprimă-le și folosește formate moderne precum WebP sau JPEG optimizat pentru a evita încetinirea vitezei de încărcare a site-ului.
• Dimensiuni perfect uniforme: Dacă imaginile au înălțimi diferite, reîncărcarea paginii va cauza deplasarea vizuală a conținutului (Cumulative Layout Shift – CLS), afectând experiența de navigare a utilizatorilor și scorul Google Core Web Vitals.