Hur lägger man in en egen header i WordPress?

Idag fick jag en fråga av en klasskompis som jag inte kunde svara på.

“Lynn, hur lägger jag in en header för min blogg när jag använder ett tema som inte stödjer egna headers?”

Ok, jag vet var det ska ändras, och jag vet på ett ungefär hur koden ska se ut, men att svara på en sådan fråga på rak arm utan att kunna se efter ordentligt i koden var inte riktigt min grej. Jag hade dock ett liknande tema på en av mina bloggar hemma, så när jag kom hem blev jag så klart tvungen att prova… Så här kommer en snabbinstruktion.

För teman som inte har stöd för att byta ut header-bilder i det grafiska gränssnittet så ser koden som visar bloggnamnet i header.php vanligtvis ut ungefär som nedan:

<h1 id="header">
<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
</h1>

För att ta bort bloggnamnet och istället lägga in en bild så tar man bort koden ovan (tänk på att aldrig radera utan att istället koda bort med taggarna <!– och –>) och lägger in koden nedan.

<div id="header">
<div id="headerimg">
</div>
</div>

Sedan lägger man till koden nedan i temats css-fil, men byter ut URL:en till den som leder till bilden som ska användas. När man laddar upp bilden under “Media” och sedan klickar på den så finns hela länken där. Koden “repeat-x top left” kan ändras för att få bilden att ligga till höger, vänster eller centrerad, och efter “height” ställer du in hur många pixlar hög bilden är.

#header {
background: url("/wp-content/uploads/filnamnet.jpg") repeat-x top left;
height: 250px; }

Lycka till!

Tips: Mer information finns som vanligt i WordPress codex.

No Comments Yet.

Leave a Reply

Your email address will not be published. Required fields are marked *