Dec
9
Hur man skapar olika bakgrunder på olika sidor i WordPress
Har du nån gång funderat på att ha en annan bakgrund på dina sidor (pages) i WordPress och en annan på din förstasida. Nyligen gjorde jag en vanlig webbsida med WordPress som CMS och behövde precis vad jag nämnde nyss. Och med underbara WordPress finns det en lysande teknik hur du göra detta på ett enkelt och smidigt sätt. Så tänkte visa i detta exempel hur du har en skräddarsydd bakgrund på din första sida och en annan bakgrund på dina undersidor.
Problemet
Som standard så anropar WP <?php get_header(); ?> på alla sina sidor. I vårat exempel vill vi ha en skräddarsydd bakgrund för förstasidan och en standard sida på resten av undersidorna. Det går självklart att göra med vanliga HTML men det vill vi inte – opraktiskt och osmidigt.
Så här ser det ut som standard i din header.php:
Förstasidan och den är döpt till homepage.php:
Lösningen
Vi kommer använda WP inbyggda “Conditional Tags”. Läs mer om Conditional Tags här.
Öppna din texteditor och lägg till header.php och din CSS fil från din tema mapp. Hitta
tagen <body> och ersätt den kod biten med den här.
<body id="<?php if (is_page_template ('homepage.php')){echo "home-bg";} ?>">
Eftersom att vi har skapat en specifik sida för förstasidan som vi döpte till homepage.php. Nya raden säger säger typ att: om detta är template hompage.php då ska vi echo (visa) ut stilen vi använder i CSS filen som heter #home-bg. Med #home-bg har vi lagt en skräddarsydd bakgrund som ska användas på förstasidan. Nu behöver vi en annan bakgrund för resten av sidorna och det gör vi genom att lägga in den direkt i body tagen i CSS filen.
body#home-bg {
background: url(style/images/bg.png) top center repeat-x;
}
body {
background: #fff url(style/images/page-bg.png) top center repeat-x;
}
Använd flerfaldig bakgrunder på olika sidor
Du kanske vill ha fler olika bakgrunder beroende vart man är på sidan. Då skulle du kunna gör det på följande sätt. Som ovanför är is_page_template själva sidan och echo är stilen på sidan. Om ingen av följande sidor nämns så visas klassen #default.
<body id="<?php if (is_page_template('home.php')){
echo "home";
}
elseif (is_page_template('contact.php')){
echo "contact";
}
else {
echo "default";
}?>" >
Och din CSS kan se ut så här:
body#default {
background:url(images/default-bg.jpg) top center no-repeat #000000;
}
body#home {
background:url(images/home.png) top center no-repeat #000000;
}
body#contact {
background:url(images/contact.png) top center no-repeat #000000;
}
Johan jobbar som Interaktiondesigner på Cypoint där han får syssla med interaktionsdesign, webbdesign och visuell kommunikation som är riktat till E-handel, webb och mobila lösningar. Se mer om Johan Pettersson.
Peter (December 7, 2009 at 14:47)
Väldigt bra artikel med kanontips. Tack för det..
Stefan Persson (December 7, 2009 at 15:49)
Bra skrivet. Vill bara nämna att det finns en kodsnutt
som du kan använda i. Då slipper du använda dig av en massa if och elseif.Johan (December 7, 2009 at 16:18)
Ser att taggarna inte svarade som du hade med i din kommentar Stefan. Är intresserad och höra vad du skulle säga, kan du lägga mellanslag på sluttagen så länge.
Tack annars för kommentarerna!
Stefan Persson (December 7, 2009 at 22:51)
Jag gör ett nytt försök Johan.
Det jag ville ha sagt var att man i body-taggen kan lägga till denna kodsnutt , istället för använda sig av if och elseif.
Mer om body_class finns att läsa här: Template Tags/body class
Stefan Persson (December 7, 2009 at 22:54)
Funkade inte så bra för mig nu heller
men följ länken ovan så ser du vad jag menar.
Johan (December 7, 2009 at 23:53)
Absolut du har rätt. Det är faktiskt det man borde använda om man har senaste WP. Nu när du säger det så såg jag att body_class var nytt inför WP 2.8 när jag forskade runt men gick inte in så mycket på det.
Tack för upplysningen.
Anton Ranestam (December 8, 2009 at 11:23)
Tack så mycket!
Johannes Holmberg (December 15, 2009 at 20:23)
Bra tips! Väl skrivet Johan
Gustav (January 17, 2012 at 23:11)
Mycket bra tips! Stort tack!