Temaer: bloktemaer og klassiske temaer

Modul 5: Temaer og plugins · Læsetid: 9 minutter

Læringsmål: Efter denne lektion kan du forklare forskellen mellem bloktemaer og klassiske temaer og vælge et tema med omtanke.

Nøglebegreber: tema, skabelonhierarki, bloktema, skabelon (template), skabelondel (template part), theme.json, Site-editor, klassisk tema, PHP-skabeloner, Customizer, widgets, sidebygger, lock-in, temamappe

Hvad et tema gør

Et tema bestemmer hvordan dit websted ser ud, og hvordan sider er bygget op: toppen med logo og menu, bredden på indholdet, skrifttyper og farver, bundteksten, hvordan en indlægsoversigt eller et søgeresultat ser ud. Selve indholdet (dine tekster, sider, billeder) ligger i databasen og bevares, når du skifter tema.

Hvert tema ligger i sin egen mappe under wp-content/themes/, for eksempel wp-content/themes/twentytwentyfive/. I den mappe ligger der altid en style.css med en header øverst, der beskriver temaet (navn, version, udvikler). Det ser du nærmere på i lektion 5.2.

Siden WordPress 5.9 (starten af 2022) findes der to slags temaer, og de fungerer helt forskelligt.

Klassiske temaer

Et klassisk tema består af PHP-filer: header.php, footer.php, single.php, page.php, index.php, og så videre. Hvilken fil der bruges til hvilken side, følger skabelonhierarkiet (lektion 1.2). Du tilpasser det:

• i Tilpasser (Udseende > Tilpasser): logo, farver, muligheder som temaet tilbyder;
• med widgets (Udseende > Widgets): blokke i sidebjælken eller bundteksten;
• med menuer (Udseende > Menuer, lektion 4.3);
• i koden, med et undertema (child theme) (lektion 5.2).

Mange kendte temaer er (stadig) klassiske eller hybride. De fungerer fint og understøttes stadig i mange år fremover.

Bloktemaer

Et bloktema er bygget op af de samme blokke som dit indhold. Temaet har:

• skabeloner (templates) som HTML-filer med blokke, i mappen templates/: index.html, single.html, page.html, 404.html;
• skabelondele (template parts) i parts/: header.html, footer.html;
• en fil theme.json med stilindstillingerne: farvepalet, skrifttyper, skriftstørrelser, bredden på indholdet, afstand mellem blokke.

Et lille uddrag af theme.json:

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

Du tilpasser det i Site-editor (Udseende > Editor): du redigerer toppen, bundteksten og skabelonerne med blokke, og under Formgivning vælger du farver, skrifttyper og afstand for hele webstedet.

En vigtig forskel du skal kende: det du tilpasser i Site-editor, bliver gemt i databasen, ikke i temafilerne. En opdatering af temaet overskriver altså ikke dine tilpasninger. Men det betyder også: en tilpasset skabelon i databasen går forud for skabelonen i temaet. Hvis udvikleren udgiver en forbedret skabelon, ser du den ikke, så længe din tilpassede version findes. I Site-editor kan du "nulstille" en skabelon til temaets version.

Sidebyggere

En sidebygger (som Elementor, Divi eller WPBakery) er en plugin eller et tema med sin egen editor, hvor du trækker elementer og designer sider. De er populære, fordi de giver mange muligheder uden kode. Vær opmærksom på ulemperne:

• Lock-in: opmarkeringen ligger i et eget format (ofte shortcodes eller egne data i wp_postmeta). Slår du sidebyggeren fra, bliver der ofte kun rod af koder tilbage af dine sider. At skifte betyder som regel, at alt skal bygges op igen.
• Tungere: mange sidebyggere indlæser ekstra scripts og stylesheets på hver side. Det kan gøre dit websted langsommere (modul 6).
• Endnu en komponent at holde styr på, med egne opdateringer og egne sårbarheder.

En sidebygger er ikke et forkert valg, men vælg det bevidst. For mange websteder kan det du ønsker, også klares med et bloktema og mønstre.

At vælge et tema

Det du skal lægge mærke til, i denne rækkefølge:

1. Oprindelse: temamappen på wordpress.org (kontrolleret af frivillige) eller en kendt udvikler med sit eget websted. Brug aldrig en "gratis" kopi af et betalt tema fra et downloadsite: den indeholder ofte en bagdør (lektion 5.3).
2. Vedligeholdelse: hvornår blev temaet sidst opdateret? Et tema uden opdateringer i det seneste år bliver en risiko.
3. Blok eller klassisk: passer det til den måde, du vil arbejde på? Et bloktema hvis du vil kunne tilpasse i Site-editor, et klassisk tema hvis du vil videreføre et eksisterende websted på samme måde.
4. Hvad det tager med sig: et tema der "kan det hele" (slider, portfolio, kontaktformular, SEO) binder dine funktioner til temaet. Skifter du senere tema, mister du dem. Funktioner hører hjemme i plugins, design i temaet.
5. Tilgængelighed og hastighed: i temamappen på wordpress.org kan du filtrere på egenskaben "Accessibility ready" (klar til tilgængelighed). Se temaets demo i PageSpeed Insights (lektion 6.1).
6. Sprog: er temaet oversat til dansk, eller kan du selv tilpasse teksterne?

At skifte tema

Ved et temaskift bevares dit indhold, men alt omkring det ændrer sig. Gør det aldrig uden videre på dit livewebsted:

• Prøv først det nye tema med Live forhåndsvisning (under Udseende > Temaer), eller bedre i et testmiljø (staging) (lektion 8.3).
• Kontroller derefter menuer (lektion 4.3), widgets, logo, forsiden og de indlægstyper det gamle tema leverede (lektion 4.2).
• Shortcodes fra det gamle tema vises som ren tekst ([slider id="3"]) på dine sider.

Opsummering

• Et tema bestemmer designet og opbygningen; indholdet ligger adskilt i databasen.
• Klassiske temaer er PHP-skabeloner, tilpasset med Tilpasser, widgets og menuer.
• Bloktemaer er bygget op af blokke og theme.json, og tilpasses i Site-editor; de tilpasninger ligger i databasen.
• Sidebyggere giver mange muligheder, men binder dig og kan gøre dit websted tungere.
• Vælg et tema ud fra oprindelse, vedligeholdelse og enkelhed; funktioner hører hjemme i plugins, ikke i temaet.

Quiz

Opgave

Opgave A5.1: Hvilket tema bruger dit websted? Søg i kildekoden på din forside (Ctrl+U) efter /wp-content/themes/, og skriv navnet på den temamappe der optræder flest gange. Bruger du et undertema (child theme) (lektion 5.2), så angiv mappen for undertemaet og mappen for hovedtemaet (parent). Angiv også om det er et bloktema eller et klassisk tema, og hvordan du har fastslået det. Programmet læser forsiden og style.css for det nævnte tema og sammenligner.

Læs mere

Vi har endnu ikke egne artikler om at arbejde i selve WordPress; den officielle dokumentation fra WordPress er omfattende.

• Hvad 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/