torsdag 28. juli 2005 • 40 kommentarer
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!
Jeg har ikke trikset rundt med flere applikasjoner mot samme database, men ser ikke for meg at det bør være alt for vanskelig. Til testformål har jeg tidligere benyttet meg av to applikasjoner og databaser, så alt er adskilt.
Jeg er dog usikker på hvordan temaene håndteres, det vil si om de lagres i applikasjonen eller databasen. Vil tro det siste, hvilket i så fall vil vanskeliggjøre flere applikasjoner mot samme database dersom du skal benytte forskjellige temaer for test og drift. Hvis man derimot skal benytte det samme temaet i drift og test bør det fungere fint.
Fint om du i så fall poster en liten kommentar med eventuelle erfaringer.
Takk, Per. Angående RSS kan du jo starte med en artikkel jeg skrev om RSS for en tid tilbake.
Jeg har valgt å omgå hele WordPress-implementeringen av billedhåndtering, og gjør dette manuelt selv. Har derfor ikke gode kunnskaper om denne funksjonen. Har du sjekket plugins på WordPress Codex?
Hallo!
Har hatt god hjelp av denne siden, flott side!
Det jeg for tiden spekulerer i, (og ikke finner ut av) er hvordan jeg får satt opp et ”forfatterarkiv” slik at man kan velge å vise innleggene skrevet av forfatteren man velger å vise arkivet for.
Finner en del på engelsk, men finnes det noe på norsk?
Er ute etter norsk beskrivelse, fordi jeg er synshemmet og bruker ”skjermleser” for å lese informasjonen på skjermen, og ”talesyntesen” leser dessverre bare norsk
Og skal jeg bruke synet å lese med, klarer jeg ikke leste mye før jeg blir sliten og for smerter i øyne og hode.
leste det om å legge flere opp mot 1 database… ganske enkelt du må bare forandre pefix i wp-config.php – se under -
// You can have multiple installations in one database if you give each a unique prefix
$table_prefix = ‘wp_’; // Only numbers, letters, and underscores please! her er det bare å skifte navn: $table_prefix = ‘test1_’; neste $table_prefix = ‘test2_’;
på den måten kan du ha flere i en, men du må huske å forandre på dette før du installerer hver wordpress … ellers vill de bruke den samme databasen.. det bettyr samme tema / theme..
Ellers har jeg akkurat starta med dette og håper at jeg får en side med wordpress ganske snart… plages litt med design. Finner nok ut av det… Flott innføring på denne siden!!
Som gammel mann men helt fersking på php og WP: Tusen takk for informativ veiledning.
Har nylig innstallert WP med norsk språkpakke og tema med sidene vises som en blanding med norsk og engelsk tekst: http://www.blogg.wolfdog.no – noen anelse hvor feilen ligger og hva som må gjøres for å få rettet det opp?
Nytt spørsmål fra en “fersking”: Etter å ha aktivert det norske stilsettet er teksten på norsk untatt ordet Lenker i sidekollonna som har beholdt det engelske Links. På sida Links.php i det norske stilsettet står det Lenker – noen forklaring på hvorfor dette ikke vises korrekt i f t skjermbildet?
–
Per Olav
Jepp
Nytt dumt spm:
Akkurat nå prøver jeg å oversette kommentarene i “comments.php” og det ser ut til å fungere rimelig bra. Et spørsmål bare: æ, ø og å blir vist som ? (spørsmålstegn) på min lokale webserver, noen formening om hva jeg bør gjøre for å rette det opp.
Sidene på XAMPP bruker norsk tegnsett og nb_MO er lagt inn i include/languages.
Jeg har dessverre ingen erfaring med bbPress. Foreslår at du sjekker ut forumet deres.
Takk for tilbakemelding, jeg fant ut av det jeg plagdes med angående bbpress forumet.
Men jeg har et spørsmål angående wp versjon 2.12 jeg holder på å fornorsker et theme og det gikk i og seg selv ganske greit, problemet er å få norske dager og måneder, nå er det i riktig rekkefølge , men det står fremdeles march 2007 jeg har prøvd å laste ned nb_NO til wordpress laga language i wp-includes og lasta opp nb_NO.mo fila. Skrevet inn i wp-config.php det som skal skrives inn der. men det skjer ikke noe. Jeg fikk det til på min egen side men da hadde jeg en tidligere versjon av wp2.0 – Siden jeg holder på med theme til er modellflyklubben som jeg er medlem. Jeg lurer på om du vet noe om dette ?
siden : http://www.shmfk.no der ser du problemet – samme med meta jeg vill at det skal stå logg inn og ikke login—- noe forslag ?
Hei igjen, jeg lurte bare på om noen har opp levd at language fila ikke liv loade på noen servere? Jeg har lagd side for modellflyklubben jeg er medlem i, men får ikke nb_NO.mo fila til å loade. ikke noen annen language fil heller. Tror det er noe med servern som siden kjører fra ( http://www.shmfk.no ) jeg har posta på forum der går jeg inn i detalje om problemet:
“>
Håpte kanskje noen her har vært borti samme problemet og funnet ut av det.
Det jeg trur er at det kanskje er gettext modul som må enables på servern, har sendt de mail å spurt om det er skrudd på. http://www.golarge.no er det som hoster siden.
Trenger en pekefinger i riktig retning
En linjeavstand under siste linje i hver post skal være en tynn linje (1px høy) som skal markere slutten på posten før neste linje med teksten “skriv en kommentar”. På min lokale IIS vises linjen som den skal men når siden vises på nettet mangler linja. Alle filene er kopiert som de er fra min lokale pc til serveren. Hvor tror du jeg bør starte feilsøk?
Slike problemer er som regel ikke serverrelaterte, men det er alltid en god regel å utvikle på et identisk miljø som det man har i drift. Hvis du utvikler på Windows, men har en LAMP-server, er EasyPHP noe du bør vurdere.
Jeg ville startet feilsøking med Firefox og tillegget Firebug, så ser du forhåpentligvis raskt hvor problemet ligger.
Takk for svaret, Martin. Skal prøve det du foreslår. Jeg tror kanskje at “problemet” bunner i at jeg er blitt “ordblind” m h t å lese utsagnene. Dersom man klikker på Atferd som ligger under Kategorier kommer linja opp slik den skal, men i samme artikkelen under Siste innlegg mangler den. 5 kopper kaffe og nye briller kanskje?
Bare hyggelig å kunne være til hjelp. I tillegg kan jeg anbefale et av de norske WordPress-forumene.
Et kjapt søk på Google brakte meg til en side hvor man kan lese som følger:
[...] you cannot add any theme you want to your WordPress.Com blog. You are limited to the themes that WordPress.Com provides for you – you are not able to add any new themes to your WordPress.Com blog. For a fee, the best you can do is upgrade your WordPress.Com account so that you are able to edit the CSS for the template you’re currently using – - if you know how to edit/write CSS, that is.
Kortversjonen er altså at det kan du ikke. Hvis det er et absolutt krav bør du heller laste ned WordPress selv og få det installert på et egnet nettsted.
Jeg må bare si at jeg DIGGER designet på siden din. Skal jeg lese en blogg så faller jeg først og fremst for designet. Så leser jeg litt, og innholdet er jo selvsagt avgjørende for om jeg legger bloggen til under favoritter. Du skårer fult. Jeg tipper du er en person som er veldig glad i symetri og orden
Med RSS kan du abonnere på nye kommentarer som postes til denne artikkelen.
Du kan legge igjen et trackback fra ditt eget nettsted ved å benytte trackback-adressen til denne artikkelen. Følgende sider har allerede lagt igjen tracback:
[...] ress på norsk. Nå mangler jeg bare designet. Ser vel for meg at jeg henter noen tips fra Martin. Framover regner jeg med å fylle bl [...]
[...] vet f.eks. hvordan jeg kan torturere Hjorten, jeg har ikke giddet å skrive om hvordan man lager en WordPress tema fordi Bekkelund har gjort det for meg, og ikke noe om CSS kan jeg skrive siden bza har tatt CSS fra [...]
[...] har lenge gått og tenkt på å bytte tema, og da jeg oppdaget en post om hvordan lage eget tema hos Martin Bekkelund måtte det bare komme etterhvert. Målet var ikke å lage det hippeste som [...]
[...] Ditt eget WordPress-tema — Martin Bekkelund Fant den via Wordpress- Hvordan endre Header – Google Search __________________ remark.no | antimygg.no/zap | utelys.no | opplyst.no | kaffepads.no [...]
Enda flere artikler? Besøk arkivet.
Bekkelund.net er en blogg av Martin Bekkelund, hvor han lufter sine tanker om IT, politikk og friluftsliv, gjerne i en salig miks. Martin arbeider til daglig som rådgiver i IT-bransjen, hvor han veileder bedrifter og organisasjoner i strategisk bruk av IT. Besøk siden Om Martin for mer informasjon.
© 1995-2010 Martin Bekkelund
Opphavsrett • RSS • Kontakt
Lasse Marøen
28. juli 2005 22.43
Glimrende, Martin! Det var akkurat en sånn gjennomgang jeg trengte for å komme i gang, og jeg er sikkert ikke den eneste.
Et lite spørsmål: Har du noe tips til hva som er enkleste måte å leke med et theme uten å tukle med live data? Er det f.eks trivielt å sette opp en ekstra testblogg i samme wp-installasjon?