Teman: blockteman och klassiska teman

Modul 5: Teman och tillägg · Lästid: 9 minuter

Lärandemål: Efter den här lektionen kan du förklara skillnaden mellan blockteman och klassiska teman och välja tema med omdöme.

Nyckelbegrepp: tema, mallhierarki (template-hiërarchie), blocktema, mall (template), malldel (template part), theme.json, Webbplatsredigerare, klassiskt tema, PHP-mallar, Anpassare (Customizer), widgetar, sidbyggare, inlåsning (lock-in), temamapp

Vad ett tema gör

Ett tema bestämmer hur din webbplats ser ut och hur sidorna är uppbyggda: huvudet med logotyp och meny, innehållets bredd, typsnitt och färger, sidfoten, hur en inläggsöversikt eller ett sökresultat ser ut. Själva innehållet (dina texter, sidor, bilder) ligger i databasen och finns kvar när du byter tema.

Varje tema ligger i en egen mapp under wp-content/themes/, till exempel wp-content/themes/twentytwentyfive/. I den mappen finns alltid en style.css med en rubrik högst upp som beskriver temat (namn, version, skapare). Det ser du i lektion 5.2.

Sedan WordPress 5.9 (början av 2022) finns det två typer av teman, och de fungerar verkligen olika.

Klassiska teman

Ett klassiskt tema består av PHP-filer: header.php, footer.php, single.php, page.php, index.php, och så vidare. Vilken fil som används för vilken sida följer mallhierarkin (lektion 1.2). Du anpassar genom:

• Anpassaren (Utseende > Anpassa): logotyp, färger, alternativ som temat erbjuder;
• widgetar (Utseende > Widgetar): block i sidofältet eller sidfoten;
• menyer (Utseende > Menyer, lektion 4.3);
• kod, med ett barntema (lektion 5.2).

Många kända teman är (fortfarande) klassiska eller hybrida. De fungerar bra och får support i många år framöver.

Blockteman

Ett blocktema är uppbyggt av samma block som ditt innehåll. Temat har:

• mallar (templates) som HTML-filer med block, i mappen templates/: index.html, single.html, page.html, 404.html;
• malldelar (template parts) i parts/: header.html, footer.html;
• en fil theme.json med stilinställningarna: färgpalett, typsnitt, teckenstorlekar, innehållets bredd, utrymme mellan block.

Ett litet utdrag ur 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 gör ändringar i Webbplatsredigeraren (Utseende > Redigerare): du redigerar huvudet, sidfoten och mallarna med block, och under Stilar väljer du färger, typsnitt och utrymme för hela webbplatsen.

En viktig skillnad du behöver känna till: det du ändrar i Webbplatsredigeraren sparas i databasen, inte i temats filer. En uppdatering av temat skriver alltså inte över dina ändringar. Men det betyder också: en anpassad mall i databasen går före mallen i temat. Släpper skaparen en förbättrad mall, ser du den inte så länge din anpassade version finns kvar. I Webbplatsredigeraren kan du "återställa" en mall till temats version.

Sidbyggare

En sidbyggare (som Elementor, Divi eller WPBakery) är ett tillägg eller tema med en egen redigerare där du drar och formger sidor. De är populära eftersom de ger många möjligheter utan kod. Var medveten om nackdelarna:

• Inlåsning (lock-in): formateringen lagras i ett eget format (ofta shortcodes eller egen data i wp_postmeta). Stänger du av byggaren blir det ofta kvar en röra av koder i dina sidor. Att byta betyder oftast att du måste bygga om allt.
• Tyngre: många byggare laddar extra skript och stilmallar på varje sida. Det kan göra din webbplats långsammare (modul 6).
• Ännu en komponent att hålla koll på, med egna uppdateringar och egna säkerhetshål.

En sidbyggare är inget felaktigt val, men gör det medvetet. För många webbplatser går det du vill med ett blocktema och mönster (patterns).

Att välja ett tema

Det du bör titta på, i denna ordning:

1. Ursprung: temamappen på wordpress.org (kontrollerad av frivilliga) eller en känd skapare med egen webbplats. Ladda aldrig ner en "gratis" kopia av ett betaltema från en nedladdningssajt: den innehåller ofta en bakdörr (lektion 5.3).
2. Underhåll: när uppdaterades temat senast? Ett tema som inte uppdaterats under det senaste året blir en risk.
3. Block eller klassiskt: passar det hur du vill arbeta? Ett blocktema om du vill kunna anpassa i Webbplatsredigeraren, ett klassiskt tema om du vill fortsätta en befintlig webbplats på samma sätt.
4. Vad det tar med sig: ett tema som "kan allt" (slider, portfolio, kontaktformulär, SEO) binder dina funktioner till temat. Byter du senare tema förlorar du dem. Funktioner hör hemma i tillägg, formgivning i temat.
5. Tillgänglighet och hastighet: i temamappen på wordpress.org kan du filtrera på egenskapen "Tillgänglighet klar" (accessibility-ready). Titta på temats demo i PageSpeed Insights (lektion 6.1).
6. Språk: är temat översatt till ditt språk, eller kan du själv anpassa texterna?

Att byta tema

Vid ett temabyte finns ditt innehåll kvar, men allt runt omkring ändras. Gör det aldrig rakt av på din livewebbplats:

• Prova det nya temat först med Förhandsgranskning live (under Utseende > Teman), eller ännu hellre i en testmiljö (staging) (lektion 8.3).
• Kontrollera därefter menyer (lektion 4.3), widgetar, logotyp, startsidan och de inläggstyper det gamla temat levererade (lektion 4.2).
• Shortcodes från det gamla temat visas som vanlig text ([slider id="3"]) på dina sidor.

Sammanfattning

• Ett tema bestämmer formgivningen och uppbyggnaden; innehållet ligger separat i databasen.
• Klassiska teman är PHP-mallar, anpassade med Anpassaren, widgetar och menyer.
• Blockteman är uppbyggda av block och theme.json, och anpassas i Webbplatsredigeraren; de ändringarna sparas i databasen.
• Sidbyggare erbjuder mycket, men binder dig och kan göra din webbplats tyngre.
• Välj ett tema utifrån ursprung, underhåll och enkelhet; funktioner hör hemma i tillägg, inte i temat.

Quiz

Uppgift

Uppgift A5.1: Vilket tema använder din webbplats? Sök i källkoden för din startsida (Ctrl+U) efter /wp-content/themes/ och fyll i namnet på den temamapp som förekommer mest. Använder du ett barntema (child theme) (lektion 5.2), fyll då i mappen för barntemat och för föräldratemat (parent). Fyll även i om det är ett blocktema eller ett klassiskt tema, och hur du har fastställt det. Programmet läser startsidan och style.css för det angivna temat och jämför.

Läs mer

För arbete i själva WordPress har vi inte egna artiklar ännu; WordPress officiella dokumentation är omfattande.

• Vad är ett tema? (developer.wordpress.org, engelska): https://developer.wordpress.org/themes/getting-started/what-is-a-theme/
• Teman på wordpress.org: https://wordpress.org/themes/
• Webbplatsredigeraren (wordpress.org, engelska): https://wordpress.org/documentation/article/site-editor/
• theme.json (developer.wordpress.org, engelska): https://developer.wordpress.org/themes/global-settings-and-styles/