Temaer: blokktemaer og klassiske temaer

Modul 5: Temaer og utvidelser · Lesetid: 9 minutter

Læringsmål: Etter denne leksjonen kan du forklare forskjellen mellom blokktemaer og klassiske temaer, og velge et tema med omhu.

Nøkkelbegreper: tema, mal-hierarki (template-hiërarki), blokktema, mal (template), malsdel (template part), theme.json, Site-editor, klassisk tema, PHP-maler, Customizer, widgeter, sidebygger, lock-in, temamappe

Hva et tema gjør

Et tema bestemmer hvordan nettstedet ditt ser ut og hvordan sider er bygget opp: toppen med logo og meny, bredden på innholdet, skrifttyper og farger, bunnteksten, hvordan en innleggsoversikt eller et søkeresultat ser ut. Selve innholdet (tekstene, sidene og bildene dine) ligger i databasen og forblir intakt når du bytter tema.

Hvert tema ligger i en egen mappe under wp-content/themes/, for eksempel wp-content/themes/twentytwentyfive/. I den mappen ligger det alltid en style.css med en topptekst som beskriver temaet (navn, versjon, utvikler). Det ser du nærmere på i leksjon 5.2.

Siden WordPress 5.9 (begynnelsen av 2022) finnes det to typer temaer, og de fungerer helt forskjellig.

Klassiske temaer

Et klassisk tema består av PHP-filer: header.php, footer.php, single.php, page.php, index.php, og så videre. Hvilken fil som brukes for hvilken side, følger mal-hierarkiet (leksjon 1.2). Du tilpasser det:

• i Customizer (Utseende > Customizer): logo, farger, valg som temaet tilbyr;
• med widgeter (Utseende > Widgeter): blokker i sidefeltet eller bunnteksten;
• med menyer (Utseende > Menyer, leksjon 4.3);
• i koden, med et undertema (child theme) (leksjon 5.2).

Mange kjente temaer er (fortsatt) klassiske eller hybride. De fungerer utmerket og vil bli støttet i mange år fremover.

Blokktemaer

Et blokktema er bygget opp av de samme blokkene som innholdet ditt. Temaet har:

• maler (templates) som HTML-filer med blokker, i mappen templates/: index.html, single.html, page.html, 404.html;
• malsdeler (template parts) i parts/: header.html, footer.html;
• en fil theme.json med stilinnstillingene: fargepalett, skrifttyper, skriftstørrelser, bredde på innholdet, avstand mellom blokker.

Et lite utdrag av theme.json:

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primair", "color": "#1e3a5f", "name": "Primær" },
        { "slug": "accent", "color": "#e8a33d", "name": "Aksent" }
      ]
    },
    "layout": { "contentSize": "720px", "wideSize": "1200px" }
  }
}

Du tilpasser det i Site-editor (Utseende > Redigeringsverktøy): du redigerer toppen, bunnteksten og malene med blokker, og under Stiler velger du farger, skrifttyper og avstand for hele nettstedet.

En viktig forskjell du bør kjenne til: det du tilpasser i Site-editor, lagres i databasen, ikke i temafilene. En oppdatering av temaet overskriver derfor ikke tilpasningene dine. Men det betyr også: en tilpasset mal i databasen går foran malen i temaet. Hvis utvikleren slipper en forbedret mal, ser du den ikke så lenge din tilpassede versjon finnes. I Site-editor kan du «tilbakestille» en mal til temaets versjon.

Sidebyggere

En sidebygger (som Elementor, Divi eller WPBakery) er en utvidelse eller et tema med en egen redigerer der du drar og former sider. De er populære fordi de gir mange muligheter uten kode. Vær bevisst på ulempene:

• Lock-in: formateringen ligger i et eget format (ofte shortcodes eller egne data i wp_postmeta). Skrur du av byggeren, blir det ofte igjen et rot av koder av sidene dine. Å bytte betyr som regel at du må bygge alt på nytt.
• Tyngre: mange byggere laster inn ekstra skript og stilark på hver side. Det kan gjøre nettstedet ditt tregere (modul 6).
• Enda en komponent å holde oppdatert, med egne oppdateringer og egne sårbarheter.

En sidebygger er ikke et feil valg, men gjør det bevisst. For mange nettsteder kan det du ønsker, også løses med et blokktema og mønstre.

Å velge et tema

Dette ser du etter, i denne rekkefølgen:

1. Opprinnelse: temamappen på wordpress.org (kontrollert av frivillige) eller en kjent utvikler med egen nettside. Aldri en «gratis» kopi av et betalt tema fra en nedlastingsside: den inneholder ofte en bakdør (leksjon 5.3).
2. Vedlikehold: når ble temaet sist oppdatert? Et tema uten oppdateringer det siste året blir en risiko.
3. Blokk eller klassisk: passer det med hvordan du ønsker å jobbe? Et blokktema hvis du vil kunne tilpasse i Site-editor, et klassisk tema hvis du vil videreføre et eksisterende nettsted på samme måte.
4. Hva det tar med seg: et tema som «kan alt» (slider, portefølje, kontaktskjema, SEO) binder funksjonene til temaet. Bytter du senere, mister du dem. Funksjoner hører hjemme i utvidelser, utforming i temaet.
5. Tilgjengelighet og hastighet: i temamappen på wordpress.org kan du filtrere på kjennetegnet «Tilgjengelighet klar» (accessibility-ready). Se demoen av temaet i PageSpeed Insights (leksjon 6.1).
6. Språk: er temaet oversatt til norsk, eller kan du tilpasse tekstene selv?

Å bytte tema

Ved et temabytte beholdes innholdet ditt, men alt rundt det endrer seg. Gjør det aldri rett og slett på det levende nettstedet:

• Prøv det nye temaet først med Forhåndsvisning (under Utseende > Temaer), eller enda bedre, i et testmiljø (staging) (leksjon 8.3).
• Kontroller deretter menyer (leksjon 4.3), widgeter, logo, forsiden og de innholdstypene det gamle temaet leverte (leksjon 4.2).
• Shortcodes fra det gamle temaet dukker opp som ren tekst ([slider id="3"]) på sidene dine.

Oppsummering

• Et tema bestemmer utformingen og oppbyggingen; innholdet ligger separat i databasen.
• Klassiske temaer er PHP-maler, tilpasset med Customizer, widgeter og menyer.
• Blokktemaer er bygget opp av blokker og theme.json, og tilpasses i Site-editor; disse tilpasningene ligger i databasen.
• Sidebyggere tilbyr mye, men binder deg og kan gjøre nettstedet ditt tyngre.
• Velg et tema etter opprinnelse, vedlikehold og enkelhet; funksjoner hører hjemme i utvidelser, ikke i temaet.

Quiz

Oppgave

Oppgave A5.1: Hvilket tema bruker nettstedet ditt? Søk i kildekoden til forsiden din (Ctrl+U) etter /wp-content/themes/ og fyll inn navnet på temamappen som forekommer flest ganger. Bruker du et undertema (child theme) (leksjon 5.2), fyll da inn mappen til undertemaet og mappen til hovedtemaet (parentthema). Fyll også inn om det er et blokktema eller et klassisk tema, og hvordan du har funnet ut det. Programmet leser forsiden og style.css for det oppgitte temaet og sammenligner.

Les mer

For å jobbe i selve WordPress har vi ennå ikke egne artikler; den offisielle dokumentasjonen til WordPress er omfattende.

• Hva er et tema? (developer.wordpress.org, engelsk): https://developer.wordpress.org/themes/getting-started/what-is-a-theme/
• Temaer på wordpress.org: https://wordpress.org/themes/
• Site-editor (wordpress.org, engelsk): https://wordpress.org/documentation/article/site-editor/
• theme.json (developer.wordpress.org, engelsk): https://developer.wordpress.org/themes/global-settings-and-styles/