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/.
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.
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.
Innledningsvis skal vi snakke om:
Forutsatt at du kjenner stien til stedet hvor WordPress er installert vil du finne de forskjellige temaene i WordPress’ undermappe:
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.
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.
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.
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.
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:
Til mappen “martin” har jeg kopiert samtlige filer fra mappen “default”, unntatt undermappen “images” ettersom jeg velger å plassere bildene et annet sted på webtjeneren.
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”:
Rediger variablene etter eget ønske. Når “style.css” er lagret og lastet opp til webtjeneren vil den være synlig under menyvalget “Presentation”.
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:
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.
<?php get_header(); ?><?php get_sidebar(); ?><?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?><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><?php the_time('j. F Y') ?> <!-- by <?php the_author() ?> --><?php the_content('Les resten av denne posten »'); ?><p>Postet i <?php the_category(', ') ?> | <?php edit_post_link('Rediger','','|'); ?> <?php comments_popup_link('Ingen kommentarer »', '1 kommentar »', '% kommentarer »'); ?></p><!--<?php trackback_rdf(); ?>--><?php endwhile; ?><?php else : ?><h2>Ikke funnet</h2><p><?php _e("Beklager, men det du søker finnes ikke."); ?></p><?php include (TEMPLATEPATH . "/searchform.php"); ?><?php endif; ?><?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:
De tre filene inneholder igjen funksjoner som inkluderer flere filer.
Filen “header.php” inkluderer kort fortalt informasjon i hodet på hver side. Her inkluderes blant annet:
Ideelt sett gjør du kun endringer i nedre del av “header.php” (for designendringer) ettersom resten stort sett kan parametersettes i WordPress’ administrasjonspanel.
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:
Merk at søkefeltet i “sidebar.php” inkluderes ved hjelp av filen “searchform.php”. Se for øvrig hierarkiet vist lenger opp i artikkelen.
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.
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:
I tillegg bør du oversette filen “locale.php” i mappen “wp-includes”. Denne inneholder navn på dager og måneder.
Flere steder i WordPress-filene vil du komme over følgende PHP-kode:
<?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:
<?php the_time('j. F Y') ?>Denne linjen vil vise f.eks. “9. mai 2005”.
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.
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.
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!
Som leser kan du gi et bidrag til produksjonen, til driften og til å skaffe utstyr til testing for å sikre regelmessige, uavhengige artikler, tester og vurderinger av høy kvalitet.
Husk å abonnere på nyhetsbrevet, det er gratis og du får alle artikler rett i innboksen.
Enda flere artikler? Besøk arkivet.
Dette er Martin Koksrud Bekkelund sitt private nettsted, hvor han skriver om forbrukerteknologi, teknologiledelse og hvordan teknologi, samfunn og politikk påvirker hverandre. Martin er innehaver av konsulentselskapet Nivlheim. Les mer...
© 1995-2024 Martin Koksrud Bekkelund
Opphavsrett • RSS og abonnement • Kontakt • Personvern og informasjonskapsler
Gi et bidrag