kaxigt.com

Jag skriver om webben för webben

Dynamisk bild i din header alternativ 1

Postad: 20 februari 2009 | PHP/ASP/SSI · Wordpress | No Comments
Lästid: < 1 minut

Visst kan det vara trevligt med en eller flera bakgrundsbilder som är dynamiska. Jag hade förut ett script som hette php-random image men det var ganska komplicerat med många koder som skulle infogas och det blev lätt fel. Nyligen så sprang jag på en sida som tipsade om samma funktion, fast på ett betydligare enklare sätt.

Den här koden byter inte själva div-blocket header utan bilden som du med css normalt har infogat som bakgrund i div-blocket header.

Denna post innehåller kod-snippar som du kan använda. Det är alltid bra att ta en backup av din stilmall och funktionsfil innan.

Börja här:

  1. Tänk på att du måste ha samma mått på alla bilder, kika hur du har angett märkningen i din css-mall
  2. Döp bilderna till enkla namn som du vet bara ska vara till detta ändamål, ex header1.jpg, header2.jpg
  3. Ladda upp så många bilder du vill ha och lägg dessa i mappen som du har dina bilder
  4. Sökvägen blir denna om din mapp heter images:wp-content/themes/ditt_tema/images

Fortsätt här:

  1. Öppna upp din header.php i en texteditor
  2. Skriv sedan in koden här under
<?php
$num = rand(1,10); //Ger en slumpad siffra mellan 1 och 10 där 10 är antalet bilder
<div id="header" style="background:transparent url(images/.jpg) no-repeat top left;"> 
?>
här kommer koden till header
</div>

Nu kommer du att ha en roterande bild som byts vid varje post eller ”page”. Det är också möjligt att du behöver byta ID till class beroende på vad du tidigare har angett i stilmallen. Testa och prova dig fram.

Hämtat från SM och WP-recipies.