Afwisselende header voor je WordPress blog

Onlangs kreeg ik het verzoek van een klant om de header afbeelding te kunnen afwisselen.. automatisch. Elke keer opnieuw dat er een pagina of bericht opgevraagd zou worden zou er een andere header dan de vorige tevoorschijn moeten komen. Klinkt misschien ingewikkeld, maar gelukkig is er een extreem simpele oplossing voor in twee stappen.

Het eerste wat je moet doen is dat je bijvoorbeeld 6 verschillende header afbeeldingen maakt en deze opslaat op de volgende manier:

  • header_1.jpg
  • header_2.jpg
  • header_3.jpg
  • header_4.jpg
  • header_5.jpg
  • header_6.jpg

Voor dit voorbeeld is het belangrijk dat je .jpg bestanden gebruikt, maar feitelijk kun je natuurlijk net zo makkelijk .png of .gif gebruiken.

    Nadat je deze verschillende headerafbeeldingen hebt gemaakt moet je deze uploaden naar de images map in je theme.

De tweede stap behelst niet veel meer dan dat je naar je header.php bestand gaat en op zoek gaat naar het stukje code waar de header in opgeroepen wordt. In mijn voorbeeld was dat dit:

<a href="<?php echo get_settings('home'); ?>/"<img src="<?php bloginfo('template_url'); ?>/images/header.jpg" alt="<?php bloginfo('description'); ?>" /></a>

De volgende stap is slechts een kleine verandering door gebruik te maken van de php rand() functie en deze los te laten op het bovenstaande voorbeeld. Dan kom je op dit:

<a href="<?php echo get_settings('home'); ?>/"<img src="<?php bloginfo('template_url'); ?>/images/header_<?php echo(rand(1,6)); ?>.jpg" alt="<?php bloginfo('description'); ?>" / ></a>

Rest je alleen nog de wijziging op te slaan en that’s it. Een automatische roterende header in je WordPress blog. Simpel toch?

Over Remkus de Vries
Remkus de Vries is eigenaar van ForSite Media en WP Dimensie. Remkus werkt al jaren met WordPress en is ook actief in de (Nederlandse) WordPress Community. Je kunt 'm ook vinden op Twitter.

Laat wat van je horen

*