Kuckovic | Danske WordPress temaer

Om WordPress Tema Design

I denne artikel, vil du kunne læse om, hvordan du designer din egen header til WordPress.
Du skal væbne dig med tålmodighed, for nogle gange kan CSS drille!

Jeg vil gennemgå følgende punkter i denne artikel:

  1. Hvordan du ændrer logoet i din header
  2. Hvordan du tilføjer et Adsense felt i din header

1. Hvordan ændrer jeg logoet i min header?
At ændre ens logo i headeren er ikke et krævende stykke arbejde. Når du åbner din header.php-fil, kan du se hvor dit logo skal være.
Det  kan være at der i din header.php står noget lignende:

<div id=”logo”>
<img src=”Her kommer din URL til dit logo/>
</div>

Som du kan se ovenfor, hedder div-tagget “logo” og i din URL, kan du helt til sidst se hvad dit logo hedder og hvor du kan finde det.
I fleste tilfælde vil der stå noget lignende dette:

<div id=”logo”>
<img src=”/images/logo.gif/>
</div>

Allerede her, kan du se hvad dit logo hedder, og hvor dit logo er gemt henne.
Altså, dit logo hedder “logo.gif” og kan findes i mappen “images” – Så er det bare at finde billedet og ændre det til dit eget!
Når du har ændret det, skal du bare uploade det under samme navn, og husk samme format!
Så har du ændret dit logo :-)

2. Hvordan tilføjer jeg et Adsense felt i min header?
Denne del er lidt mere kompliceret – det kræver lidt kendskab til CSS, og meget meget lidt kendskab til PHP – faktisk skal du kun kunne én kode.
For at kunne indsætte en Adsense-blok i din header (eller andre steder på bloggen) skal du vide fra starten hvilken størrelse du vil have.
En “normal” banner-størrelse er 468×60, det er også den størrelse jeg vil gå ud fra i denne guide.
Nu starter vi – du skal gøre følgende:

  1. Oprette en Adsense bruger hvis du ikke har en. Det kan du gøre her
  2. Nu skal du åbne følgende filer:

    • Style.css (eller din primære CSS-fil (CSS-filer ender altid på “.css”))
    • Header.php
  3. Når du har åbnet de filer, skal du starte med at “lege” i CSS-filen. Du skal nemlig lave din “blok” hvor dit Adsense-indhold bliver vist. Vi gik jo ud fra størrelsen 468×60 – så det vil vi også gøre her.
    Herunder er der et eksempel på en CSS-fil, hvor jeg har lavet en blok til Adsense.

.Adsense {
width:468px;
height:60px;
border:none;
margin-left:Her skriver du i pixel (“??”px) hvor mange pixel blokken skal rykke ind fra venstre;
margin-top:Her skriver du i pixel (“??”px) hvor mange pixel blokken skal rykke ind fra toppen;
}

I de to værdier “margin-left” og “margin-right” kan du som sagt indsætte de pixel du vil, for at rykke blokken hel til den ønskede plads. Du kan faktisk rykke så meget rundt med den på siden som du ønsker. Husk! Hvis du får problemer med at få det til at virke, er du velkommen til at skrive til mig på support@kuckovic.com

Nu har du så lavet din blok, hvori dit Adsense-indhold kan være – smart ikk?
Nu skal vi bare have dit Adsense ind i headeren – så nu skal du åbne filen header.php.

Når du har åbnet header.php, kan du i filen se ét eller andet sted (forhåbentlig) at der står noget lignende: “<div id=”header”>”
Umiddelbart derefter, vil der komme et andet div-tag, som er en “class”. Den kan f.eks. hedde: “<div class=”logo”>”
Når du har fundet det sted hvor <div class=”logo”> slutter med et </div>, skal du indsætte den værdi du lige har lavet til Adsense.
Dvs. DIN kode skal se således ud (hvis vi stadig går ud fra at du har en class der hedder “logo”):

<div id=”header”>
<div class=”logo”><img src=”Her er der nok en URL til dit logo” /></div>
<!– Her skal du så indsætte DIN kode! -!>
<div class=”Adsense”>
Her kommer den kode som du har fået fra Adsense!
</div>
<— Afslutter <div class=”Adsense”>
</div> <— Afslutter <div id=”header”>

Nu tænker du nok: “Hvorfor skal jeg skrive “class” og ikke “id” – Det skal jeg fortælle dig!
Et punktum (.) betegner en “class” og en firkant (#) betegner et ID. Jeg skriver en artikel senere på min blog, om forskellen på ID og Class.
Når du har tilføjet din kode, og tilpasset positionen på din blok, skal du bare uploade de 2 filer via din FTP, og du skulle gerne have Adsense i din header efter ca. 10 minutter (Google skal gennemgå dine søgeord, for at optimere indholdet).

Spørgsmål vedr. denne artikel?
Så er du i hvertfald meget velkommen til at kontakte mig på support@kuckovic.com.
Og hvis du mangler en artikel om noget andet som du kunne tænke dig at vide lidt om, er du velkommen til at skrive det til mig i en mail eller en kommentar, og jeg skal forsøge at hjælpe dig.

Ha’ en kanon jul, og et rigtig godt nytår – pas på jer selv!
Aris Kuckovic

Udgivet af Aris Kuckovic den 24 - december - 2009 under Guide Tips&Tricks

Abonnér

VIDEO

TAGS

POPULÆRT