Sommige websites willen per pagina de afbeelding in de header kunnen wijzigen. De simpelste methode is die door per pagina een afbeelding te uploaden. We gaan er in deze howto van uit dat de div waarin de afbeelding geplaatst wordt als ID #headerImage heeft meegekregen.
We maken gebruik van de plugin Custom Field Template. Installeer de plugin via Plugins > Add New (Plugins > Nieuwe plugin). Na de installatie is onder Settings (Instellingen) de optie Custom Field Template beschikbaar. Vul hier de volgende code in onder Template Content (Sjabloon Inhoud):
[headerImage] label = Header
type = file
relation = true
hideKey = true
Na het configureren van de module kun je per pagina of post een afbeelding uploaden. Onder de editor staat de optie Custom Field Template met de mogelijkheid een afbeelding te kiezen. Je kunt slechts een afbeelding per keer uploaden.
Om de afbeelding in je thema te verwerken kun je de volgende code binnen de <head>-tag plaatsen.
<?php
$headerImage = get_post_custom_values('headerImage');
$fileid = $headerImage[0];$q1 = "SELECT meta_key, meta_value FROM {$wpdb->prefix}postmeta WHERE post_id = '{$fileid}'";
$r1 = mysql_query($q1);if(mysql_num_rows($r1) > 0)
{
while($row = mysql_fetch_array($r1, MYSQL_ASSOC))
{
if($row['meta_key'] == '_wp_attached_file')
{
$imageFile = $row['meta_value'];
}
}
?><style>
#headerImage {
background-image: url('<?=WP_CONTENT_URL?>/uploads/<?=$imageFile;>');
background-repeat: no-repeat;
}
</style><?php
}
?>
De div waarin wij werken heeft als ID #headerImage meegekregen. Bijvoorbeeld als volgt:
<div id="headerImage"></div>
Wil je deze default vullen met een achtergrond kun je de volgende code opnemen in style.css:
#headerImage {
background-image: url('images/defaultHeader.jpg');
background-repeat: no-repeat;
}