Martin Koksrud Bekkelund

Martin Koksrud Bekkelund

Teknologi • Samfunn • Politikk

Ditt eget WordPress-tema

28.07.05

Hva er WordPress?

WordPress er et personlig publiseringsverktøy med fokus på estetikk, webstandarder og tilgjengelighet.

(Oversatt sitat fra wordpress.org.)

Fortalt på en annen måte er WordPress et publiseringsverktøy som lar en eller flere brukere skrive artikler og publisere de på nett. Verktøyet er basert på scriptspråket PHP og lagrer data i en MySQL-database.

WordPress er gratis, basert på åpen kildekode og kan lastes ned fra http://wordpress.org/.

Hva er et WordPress-tema?

Et WordPress-tema er et sett filer som lar deg endre utseendet og / eller funksjonaliteten på artiklene som publiseres med WordPress. Det engelske navnet for tema er theme. Man kan laste ned ferdiglagde WordPress-temaer, eller man kan lage sitt eget tema dersom man ønsker å gi nettstedet et personlig utseende.

WordPress kommer som standard med to tema: Det gamle «WordPress Classic» av Dave Shea, som var standard til og med WordPress versjon 1.2.x, samt «WordPress Default» av Michael Heilemann som ble standard med WordPress versjon 1.5.

I denne artikkelen kan du lære hvordan du bygger ditt eget WordPress-tema.

Ditt eget WordPress-tema

Lasse mente det kunne være en god ide å skrive en veiledning til hvordan man oppretter sitt eget WordPress-tema for norske brukere. Ettersom jeg selv har skrudd til WordPress ved flere anledninger, deler jeg gjerne mine erfaringer med andre.

Det finnes en norsk oversettelse til WordPress, men jeg har foretrukket å oversette de nødvendige tekstene selv. Dette medfører at kun artiklene blir fornorsket, mens grensesnittet fortsatt er på engelsk.

Hvordan er et tema bygget opp?

Innledningsvis skal vi snakke om:

  • Hvor du finner temaene i din WordPress-installasjon
  • Hva de forskjellige filene i temaet benyttes til
  • Hvordan man veksler mellom de forskjellige temaene
  • Hvordan man redigerer et tema

Filer i en WordPress-installasjon

Forutsatt at du kjenner stien til stedet hvor WordPress er installert vil du finne de forskjellige temaene i WordPress’ undermappe:

  • wp-content/themes

Hvert tema har her en egen undermappe. For ditt eget tema kan navnet på mappen være hva som helst, men det kommer vi tilbake til senere.

Hva brukes filene til?

Med standardtemaet følger det med 15 filer og 1 undermappe. Undermappen benyttes for standardtemaet heter «images» og benyttes for bilder som benyttes av temaet.

Beskrivelse av filene:

Filnavn Beskrivelse
404.php Benyttes for HTTP-meldingen 404
archive.php Benyttes for å vise forskjellige arkivtyper, f.eks. kategorier, daglige arkiver, månedlige arkiver, årlige arkiver, søkeresultater, forfatterarkiv eller sidevisninger
archives.php Benyttes for å vise f.eks. månedlige arkiver
comments.php Benyttes for å vise kommentarer, evt. en tekst dersom det ikke eksisterer kommentarer
comments-popup.php Benyttes for å vise kommentarskjemaet i et separat vindu
footer.php Viser bunnteksten
header.php Viser overskriften / hodet
index.php Selve hovedfilen som igjen inkluderer de andre filene omtalt i denne tabellen.
links.php Viser pekere (linker) i sidemenyen
page.php Benyttes til sidevisning
search.php Benyttes som en egen søkeside
searchform.php Skjemaet som benyttes for søk
sidebar.php Filen som viser sidemenyen
single.php Viser enkeltposten når man velger en enkelt post, i motsetning til alle poster som f.eks. på hovedsiden
style.css Stilsettet som benyttes for temaet og som inkluderes i hodet / overskriften med filen «header.php»

Hva de forskjellige filene viser av informasjon skal vi komme nærmere tilbake til. Merk også at ikke alle filer nødvendigvis trenger å brukes, avhengig av hvilken funksjonalitet du ønsker å benytte deg av.

Hvordan veksle mellom forskjellige tema

I en standard WordPress-installasjon finner du et menyvalg som heter «Presentation». Under dette menyvalget kan du se hvilket tema som er aktivt, samt hvilke tema som er tilgjengelige for din WordPress-installasjon. For å aktivere et tema klikker du «Select» til høyre for temaet.

Forskjellige måter å redigere et tema

Under menyvalget «Presentation» finner du et undermenyvalg som heter «Theme Editor». Dette er i all enkelhet en tekstbehandler uten tilleggsfunksjonalitet. Øverst kan man velge hvilket tema man vil arbeide med, og til høyre finner man de forskjellige filene som tilhører det valgte temaet.

Personlig foretrekker jeg å redigere filene i temaet lokalt i min favoritt-tekstbehandler, hvor jeg har tilgang til funksjonalitet for behandling av tekst og med støtte for skriptspråk som bl.a. PHP som er sentralt i WordPress. Ved å redigere filene lokalt slipper du også å endre filrettighetene på webtjeneren, på den andre siden kan de således ikke redigere de med WordPress’ «Theme Editor».

Jeg anbefaler på det sterkeste at du tar en komplett sikkerhetskopi av din WordPress-installasjon før du starter. Arbeid alltid lokalt, eller på en test-installasjon.

Hvor starter jeg?

Din egen tema-mappe

Det første du trenger er en egen mappe under «wp-content/themes» for ditt tema. Jeg har valgt å kalle min mappe «martin», altså blir stien som følger:

  • wp-content/themes/martin

Til mappen «martin» har jeg kopiert samtlige filer fra mappen «default», unntatt undermappen «images» ettersom jeg velger å plassere bildene et annet sted på webtjeneren.

Hvordan vise ditt eget tema i WordPress

Det aller første du må gjøre (etter å ha kopiert alle filene til den nye mappen) for å få ditt tema synlig under «Presentation» er å redigere følgende linjer i filen «style.css»:

  • Theme Name: Temanavn
  • Theme URI: http://foo.bar/
  • Description: En kort beskrivelse
  • Version: 1.5
  • Author: Temaforfatterens navn
  • Author URI: http://foo.bar/tema/

Rediger variablene etter eget ønske. Når «style.css» er lagret og lastet opp til webtjeneren vil den være synlig under menyvalget «Presentation».

Hvordan filene henger sammen

Som omtalt i filoversikten, er filen «index.php» sentral i temaet. Denne inkluderer ønskede underfiler i et hierarkisk tre ved hjelp av forhåndsdefinerte WordPress-funksjoner skrevet i PHP. En funksjon i denne sammenheng er en forhåndsdefinert funksjonalitet som er laget eksplisitt for WordPress, for eksempel for å vise bunntekst, menyer, innhold, søkefelter, etc. I «index.php» finner man et utvalg WordPress-funksjoner, blant annet:

Funksjon Beskrivelse
get_header() Viser innholdet fra filen «header.php»
get_sidebar() Viser innholdet fra filen «sidebar.php»
the_content() Viser innholdet i hver enkelt post
get_footer() Viser innholdet fra filen «footer.php»

Funksjoner som ikke er omtalt i denne artikkelen bør du undersøke nærmere på egenhånd, for å vurdere hvorvidt du ønsker å endre, fjerne eller benytte de som de er. WordPress Codex har en glimrende oversikt over de forskjellige funksjonene, som anbefales for den som ønsker å grave mer i disse.

Selv har jeg satt sammen WordPress slik:

Martins WordPress-filstruktur

Din egen index.php

Jeg anbefaler at du starter med å sette sammen «index.php» uten design, slik at du kan kontrollere at semantikken og innholdet på siden er slik du ønsker.

Eksempel

  1. <?php get_header(); ?>
  2. <?php get_sidebar(); ?>
  3. <?php if (have_posts()) : ?>
  4. <?php while (have_posts()) : the_post(); ?>
  5. <h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent link til <?php the_title(); ?>"><?php the_title(); ?></a></h2>
  6. <?php the_time('j. F Y') ?> <!-- by <?php the_author() ?> -->
  7. <?php the_content('Les resten av denne posten »'); ?>
  8. <p>Postet i <?php the_category(', ') ?> | <?php edit_post_link('Rediger','','|'); ?> <?php comments_popup_link('Ingen kommentarer »', '1 kommentar »', '% kommentarer »'); ?></p>
  9. <!--
  10. <?php trackback_rdf(); ?>
  11. -->
  12. <?php endwhile; ?>
  13. <?php else : ?>
  14. <h2>Ikke funnet</h2>
  15. <p><?php _e("Beklager, men det du søker finnes ikke."); ?></p>
  16. <?php include (TEMPLATEPATH . "/searchform.php"); ?>
  17. <?php endif; ?>
  18. <?php get_footer(); ?>

Eksemplet bør gi deg en fornuftig side hva angår selve innholdet og senmantikken på siden. Hvis ikke kan du forsøke å ommøblere funksjonene i filen. Husk at det som skjer mellom linje 3 og 13 i eksemplet gjentas så mange ganger WordPress er parametersatt til å vise poster. Således bør du ikke putte inn funksjoner som hode, bunntekst eller sidemeny som hører naturlig hjemme på andre deler av siden.

Merk som nevnt at det ikke er tillagt struktur for design i eksemplet over. Du står fritt til å plassere eventuelle strukturelle XHTML-tagger i koden for å oppnå ønsket design, eksempelvis <div> og <span>

Hvis du er usikker på hva en funksjon gjør kan gjøre som følger. Skriv <!-- START --> på en egen linje før funksjonen og <!-- SLUTT --> på linjen under. Når siden er lastet i nettleseren kan du kikke i kildekoden og se hva som befinner seg mellom linjene du har lagt til.

Når du er fortrolig med innholdet i «index.php» kan du stilsette den med de stilene du ønsker, fortrinnsvis med klasser og identifikatorer.

I eksemplet over inkluderes det tre filer:

  • header.php
  • sidebar.php
  • footer.php

Filer inkludert i «index.php»

De tre filene inneholder igjen funksjoner som inkluderer flere filer.

header.php

Filen «header.php» inkluderer kort fortalt informasjon i hodet på hver side. Her inkluderes blant annet:

  • DOCTYPE
  • Diverse meta-tagger
  • Stilsett
  • Syndikering

Ideelt sett gjør du kun endringer i nedre del av «header.php» (for designendringer) ettersom resten stort sett kan parametersettes i WordPress’ administrasjonspanel.

sidebar.php

Filen «sidebar.php» inkluderer hele WordPress-menyen, tradisjonelt sett plassert vertikalt til høyre for innholdet. Her finner du funksjoner for å blant annet inkludere arkivlister, kategorilister, pekere, et søkefelt samt litt metainformasjon. Det er ikke nødvendig med store endringer i «sidebar.php», men du kan vurdere følgende:

  • Rekkefølgen på funksjonene
  • Fornorsking av overskrifter eller tekst
  • Legge til egne funksjoner (f.eks. siste kommentarer el.)
  • Parametersetting av kategori-funksjonen
  • Redigering av metainformasjon

Merk at søkefeltet i «sidebar.php» inkluderes ved hjelp av filen «searchform.php». Se for øvrig hierarkiet vist lenger opp i artikkelen.

footer.php

Filen «footer.php» inkluderer bunnteksten. Tradisjonelt putter man inn informasjon om kreditering, opphavsrett etc. i denne filen, samt oversetter teksten til norsk.

Skulle du ha behov for å redigere filer utenfor temaet, har WordPress Codex en liste over samtlige filer som inngår i en standard WordPress-installasjon.

WordPress på norsk

Standardtekstene i WordPress er på engelsk. Det er derfor nødvendig å oversette flere tekster til norsk, dersom man har et norsk nettsted. WordPress Codex har en artikkel som beskriver hvordan man oversetter, men du kommer langt med å gjennomgå filene i temaet, samt de som er beskrevet i denne artikkelen.

Jeg anbefaler at følgende filer i ditt WordPress-tema gjennomgås for oversettelse:

  • index.php
  • header.php
  • sidebar.php
  • searchform.php
  • archive.php
  • single.php
  • footer.php
  • comments.php
  • comments-popup.php

I tillegg bør du oversette filen «locale.php» i mappen «wp-includes». Denne inneholder navn på dager og måneder.

Endre datoformatering

Flere steder i WordPress-filene vil du komme over følgende PHP-kode:

  1. <?php the_time('F jS, Y') ?>

I standard WordPress vil denne vise f.eks. «May 9th, 2005». Ettersom dette ikke er korrekt datoformatering på norsk bør du bytte ut koden med denne:

  1. <?php the_time('j. F Y') ?>

Denne linjen vil vise f.eks. «9. mai 2005».

Stilsetting med CSS

Når du har funnet strukturen på siden din kan den stilsettes med CSS. I filen «header.php» finner du koblingen til stilsettet. Standard stilsett heter «style.css» og ligger i samme mappe som resten av tema-filene.

Merk at du ikke må endre filnavnet for stilsettet, ettersom WordPress benytter denne til å lese ut informasjon om det enkelte tema.

Identifikatorer og klasser

Når du skal stilsette din WordPress-installasjon må du undersøke hvilke funksjoner som benyttes én gang og hvilke som benyttes flere ganger. I funksjoner som benyttes flere ganger per side må du stilsette innholdet med klasser, mens du kan benytte identifikatorer for funksjoner som kun benyttes én gang.

Eksempelvis inneholder filen «sidebar.php» menyen til høyre i min blogg. Ettersom denne kun vises én gang per side har jeg puttet denne i en identifikator kalt «blogg_meny». Videre har jeg forskjellige under-identifikatorer for de forskjellige undergruppene i høyremenyen. I funksjonen som inkluderer artiklene på hovedsiden benytter jeg derimot klasser, ettersom de gjentas flere ganger for siden.

Videre hjelp

Denne artikkelen er ikke ment som en fullverdig dokumentasjon for hvordan du oppretter og oversetter ditt eget WordPress-tema, men som en kjapp innledning for å komme i gang med arbeidet.

Det anbefales et minimum av kunnskaper om PHP, SQL, XHTML og CSS for å arbeide med et tema.

For videre bistand anbefaler jeg i første omgang WordPress’ utmerkede onlinedokumentasjon, WordPress Codex. Her finnes informasjon om hvordan man kommer i gang med WordPress, bruker funksjonene, gjør endringer i design og funksjonalitet, problemløsere, fora for utviklere, og mye, mye mer.

Jeg deler dessverre ikke ut mine egne WordPress-filer, men hjelper gjerne til dersom du har spørsmål. Du kan kontakte meg via mitt kontaktskjema, så skal jeg svare så langt jeg har anledning.

Jeg tar ikke ansvar for feil som måtte forekomme på denne siden, og som således forårsaker feil på din installasjon, maskinvare, etc!

Martin skriver regelmessig om hvordan teknologi, samfunn og politikk påvirker hverandre. Legg igjen din e-postadresse og få nye artikler via e-post:

Flere artikler

Enda flere artikler? Besøk arkivet.

Om Martin

Martin Koksrud Bekkelund

Dette er Martin Koksrud Bekkelund sitt private nettsted, hvor han skriver om samspillet mellom teknologi, samfunn og politikk. Martin arbeider til daglig som direktør for produkt- og forretningsutvikling i et av Norges største selskaper. Les mer...

 

Facebook Twitter Instagram LinkedIn GitHub SlideShare Martin Koksrud Bekkelunds RSS-kanal

© 1995-2016 Martin Koksrud Bekkelund
OpphavsrettRSS og abonnementKontakt