post

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:
[php]<a href="<?php echo get_settings(‘home’); ?>/"<img src="<?php bloginfo(‘template_url’); ?>/images/header.jpg" alt="<?php bloginfo(‘description’); ?>" /></a>[/php]
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:
[php]<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>[/php]
Rest je alleen nog de wijziging op te slaan en that's it. Een automatische roterende header in je WordPress blog. Simpel toch?

Reacties

  1. johan zegt:

    waar sla je die afbeeldingen op??

  2. Mike zegt:

    Met een vorig thema is het me gelukt met deze uitleg.
    Nu heb ik een ander thema en daarin kan ik de eerste code dus niet vinden, ook niet iets wat erop lijkt.
    Is het misschien toch mogelijk om het voor elkaar te krijgen, misschien moet ik wat toevoegen?
    Ik heb Lightword als thema http://wordpress.org/extend/themes/lightword

Laat wat van je horen

*