lille-web webdesign

Søgemaskineoptimeret WordPress theme

Den seneste version af WordPress version 2.6 (august 2008) er som tidligere versioner et meget stabilt og brugervenligt system. WordPress kan forbedres med en mængde af fine søgemaskineoptimerings-plugin. Installationen af disse SEO-plugin fungerer som stor set alt andet nemt og smertefrit i WordPress.

Desværre er langt de fleste themes bygget lidt forkert op. Dette gælder også det medfølgende default theme: WordPress Default 1.6
Her en kort gennemgang af, hvordan du søgemaskineoptimerer dit WordPress theme.


Øverst ses bloggens titel (Søgemaskineoptimeret WP theme)

titel i wordpress

Denne titel vises i en overskrift, som lidt forenklet ser sådan ud:

<h1>Søgemaskineoptimeret WP theme<h1>

En brug af <h1> er normalt ikke hensigtsmæssigt. Overskriften <h1> skal bruges til den vigtigste overskrift indeholdende de vigtigste keywords.
Mange vælger at kalde deres Wordpress blog et skørt navn: Lille-mors blog, Livet fra min sofa, Udsigt fra en altan etc. Når disse skøre intetsigende navne står i en <h1>, fortæller man søgemaskinerne at: Lille-mor, sofa, udsigt og de andre ord er det vigtigste!

Ændring at WordPress theme koden - BLOGGENS OVERSKRIFT

Lad os udskifte <h1> med <p> ( <p> = Paragraph på dansk kaldet brødtekst )

Log in i WordPress vælg menupunktet Design

Design i WordPress

Vælg menupunktet Theme Editor og i højre side vælges filen Header (header.php)

Theme editor

Scrolle ned i bunden af filen - her er linien markeret!

h1 i theme

Her ses <h1> " noget kode!" </h1>

h1 koden

Her er <h1> skiftet ud med <p> og </h1> med </p> ( Begyndelse og slutning af koden )

p koden

Se på din web-blog igen - nu efter <h1> er udskiftet med <p> er designet ikke så pænt.

head i WordPress

Defor skal du nu vælge Stylesheet (style.css) ( stadig i højre side i Theme Editor )

stylesheet

Rul ned i bunden og indsæt helt nederst i en nye linie denne kode ( Det røde felt! - markèr - kopier - indsæt )


/* min egen tilføjelse */
div#headerimg p {font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif; font-weight: bold; font-size: 4em; text-align: center; padding-top: 70px; margin: 0;}
div#headerimg p a:hover, div#headerimg p a {text-decoration: none; color: white;}

Sådan!

Nyt CSS

Slut på første del af processen...

Ændring at WordPress theme koden - INDLÆGS OVERSKRIFT

Nu skal vi udskifte <h2> som står rundt om titlen på de enkelte indlæg med <h1>. eks. "Hello World!"

Hello world!

Tilbage i Theme Editor vælges Main Index Template (index.php)

Index template

Næsten øverst i koden finder du kode-stumpen, som skal ændres:

koden er markeret

Her ses <h2> " noget kode!" </h2>

h2 i theme

Her er <h2> skiftet ud med <h1> og </h2> med </h1> ( Begyndelse og slutning af koden )

h1 i theme

Bliv nu i Theme Editor - der er nemlig en fil mere, der skal ændres. Det er filen Single Post (single.php), her skal <h2> også ændres til <h1>
I starten af koden finder du:

post h2

Som før udskiftes den til <h1>

post h1

Sådan!
NB! Samme ændring skal også laves i filen Page Template (page.php) .... jeg tror, du ved hvordan!

Se nu igen på din web-blog - nu efter <h2> er udskiftet med <h1> - er designet bestemt ikke pænt. Faktisk kan man slet ikke se titlen Hello World! - men bare rolig, den er der, den er bare skrevet med hvid skrift på hvid baggrund. Det må vi ændre.

titlen visese ikke

Tilbage i Theme Editor skal du igen vælge Stylesheet (style.css)

Rul ned i bunden og indsæt igen helt nederst i en nye linie denne kode ( Det røde felt! - markèr - kopier - indsæt )


/* min egen tilføjelse 2 */
.post h1 {font-size: 1.6em; text-align:left; padding:0; margin: 30px 0 0 0;}
.post h1, .post h1 a, .post h1 a:visited {color: #333;}
.post h1 a:hover{text-decoration: none; color: #06c;}

God arbejdslyst!


Læs mere om søgemaskineoptimering og søgeoptimering.