Hvad er et Child Theme og et Theme Framework?

af Georg Adamsen den 8. august 2009

i Temaer, TIPS

Prelovacs Amazing Grace og Blue Grace

Prelovacs Amazing Grace og Blue Grace

I begyndelsen kassererede jeg ofte temaer, fordi der var et eller andet, jeg ikke kunne lidt. F.eks. hvis et tema ikke viste forskel på over- og underkategorier. Senere rettede jeg det, hvis jeg lige umiddelbart kunne rette i filerne. Så kom WordPress version 2.7, men jeg opdagede først hen ad vejen, hvilke muligheder der var i den. Mine erfaringer er helt parallelle med andres (se fx How to make a child theme for WordPress). Dette indlæg prøver at forklare nogle af de begreber, jeg ikke forstod dybden af i begyndelsen: Child Theme og Theme Framework.

Et WordPress-tema er et sæt filer, som populært sagt styrer, hvordan en WordPress-installation vises frem for brugeren. Det skal forstås i bred betydning, for et tema kan faktisk ikke kun bestemme layoutet, men også et stykke på vej, hvilke oplysninger, der vises frem. Et væsentligt princip er, at man skelner mellem indhold og fremtræden. Et andet er, at man skelner mellem indhold og handlinger. Hvad der skal gøres med det, man skriver, skal ikke gemmes sammen med det, men har skrevet. Disse to principper er med til at muliggøre, at man kan skifte tema uden, at der sker noget med indholdet.

Men det sker tit, at man kan få lyst til at ændre i, hvordan ens blog eller WordPress-site fremtræder. En del tør ændre lidt i style.css, den fil, der langt på vej styrer layoutet. Er man mere modig, tør man måske også ændre i skabelonerne, dvs. de filer, der ved hjælp af programmeringssproget PHP og HTML bestemmer, hvilke data der i store træk skal vises de forskellige steder på bloggen. Eksempelvis er der en php-skabelon, som bruges, når man skal se en enkelt WordPress “side” (til forskel fra et indlæg).

Der er blot problemer med at rette i disse filer. Det væsentligste er måske, at temaerne opdateres, nogle med jævne mellemrum, andre, når der kommer en ny version af WordPress, som gør det nødvendigt. Hvis man ikke er meget forsigtig, kommer man nemt til at overskrive ens ændringer. Faktisk kan det næsten kun undgås, hvis man bruger et program, der kan sammenligne to eller tre (sæt af) filer på samme tid. Eller hvis man bruger et Child Theme.

Løsningen hedder altså Child Themes. Man opretter en ny style.css-fil i sin egen mappe. Den skal i headeren havde en linje, der begynder med “Template: ” og indeholde forælder-temaets mappenavn. Det er Child Themet, der skal være det aktive tema. Er der ingen sprogfiler, som automatisk bruges af child themet, er der dog ingen anden udvej end at oversætte de originale skabelonfiler.

Prelovacs temaer Amazing Grace og Blue Grace

Hvis du vil se et eksempel, så tjek Vladimir Prelovacs site (Vladimir bruger i øvrigt ikke længere Amazing Grace, det tema, der stadigvæk kører her på WordPress-bloggen). Man kan downloade en blå udgave: Blue Grace Classic.

Men man kan også downloade en sampak, hvis man kan kalde det det. Heri ligger Amazing Grace samt en mappe, der hedder “blueggrace”. I blueggrace-mappen ligger der grafikfiler til den blå udgave, et skærmbillede samt en style.css. (Inden længe vil jeg sikkert få lagt sampakken ud her på bloggen.)

/*
Theme Name: Blue Grace
Theme URI: http://www.prelovac.com/vladimir/wordpress-themes/blue-grace
Description: Blue Grace is a lightweight, super-optimized WordPress theme packed with features (SEO, Adsense & Widget Ready). <p>  <a href=”http://www.prelovac.com/vladimir/wordpress-themes/blue-grace”>Blue Grace</a> is created by <a href=”http://www.prelovac.com/vladimir/”>Vladimir Prelovac</a></p>
Version: 3.1
Tags: fixed width, widgets, valid CSS, valid XHTML, SEO, SEO friendly, adsense, custom header, three columns, clean,  right sidebar, blue,white, photoblogging, widget ready, simple, gravatars
Author: Vladimir Prelovac
Author URI: http://www.prelovac.com/vladimir/
Template: amazinggrace

The CSS/XHTML is released under GPL:  http://www.opensource.org/licenses/gpl-license.php
*/

De fleste linjer skal være der, men den eneste, der virkelig betyder noget, er “Template: amazinggrace”. Den linje betyder, at WordPress vil bruge alle filerne fra temaet Amazing Grace, hvis Blue Grace ikke har dem. Når WordPress leder efter index.php for at komme igang, vil den først kigge i Blue Grace’s mappe, dernæst i Amazing Grace-mappen. Undtagelserne er style.css og functions.php. Med mindre man benytter en teknik, som Kristin K. Wangen beskriver.

Precious

Kristin K. Wangens Precious

Kristin K. Wangens Precious

Kristin K. Wangen udnytter dette med sit tema Precious. Hun har programmeret temaet, ikke mindst functions.php, således, at man kan skrive nye skabeloner og automatisk få dem anvendt i stedet for hendes.

Prelovacs style.css indeholder alt det nødvendige. Men man kan også, som f.eks. Kristin K. Wangen gør det i et af sine Example Child Themes, importere den originale style.css. Alt, hvad man selv skriver derefter, vil tilsidesætte style-angivelserne i den originale, eftersom browserne normalt vælger den sidste, hvis der er to eller flere regler for nøjagtig samme selektor. Et importeret stylesheet tæller allerlavest. Principperne forklares f.eks. i Eric A. Meyers CSS: The Definitive Guide.

Kristins Child Theme viser også en anden ting, man kan gøre. Hun har to nye php-filer. Den ene af dem indsætter en navigeringsbjælke lige under headeren. Det kan lade sig gøre, fordi hun har skrevet forælderversionens header.php, sådan at man kan kalde sin egen.

Justin Tadlocks Hybrid

Justin Tadlocks Temaet Hybrid og websitet ThemeHybrid

Justin Tadlocks Temaet Hybrid og websitet ThemeHybrid

Justin Tadlock har skabt theme frameworket Hybrid, som han giver en grundig orientering om på themehybrid.com. På bloggen JustinTadlock.com fandt jeg artiklen “Why I created a WordPress theme framework“. Han skrev temaet til sig selv, til forskellige projekter, men i anden omgang har han optimeret den til andre.

Tadlock nævner, at Sandbox var det første rigtige theme framework, men at det var Thematic, som virkelig udnyttede det optimalt.

Ifølge Tadlock er et theme framework “et solidt kodet tema, som skal tjene som basis for andre projekter.” Det kan ske med child themes. Men er det ikke kun for udviklere, spørger han? Svaret er et klart nej. Der er en række fordele for os almindelige brugere.

  • Bundsolid kode, som opdateres og forfines hele tiden
  • Udviklere kan nå mere, så slutbrugere får flere valgmuligheder
  • Man kan nemt lægge et design ovenpå, f.eks. med årstidens farver
  • Man behøver ikke bekymre sig, når et tema opdateres. Det er i høj grad vigtigt, tilføjer jeg
  • Man behøver ikke flytte egne funktioner m.m. fra et tema til det næste. Det, tilføjer jeg, kræver, at et theme framework er meget gennemtænkt
  • Man kan opbygge en brugergruppe omkring et theme framework. Det er Tadlocks brugergrupper et eksempel på. Det kræver så også gode vejledninger og tutorials, hvilket også er vigtigt.

Tadlock opregner en række ting, som et theme framework skal kunne, selv om nogle af disse også bør være standard i andre temaer. Jeg nævner dem i en lidt anden rækkefølge.

  • Fokus på indholdet.
  • Gyldigt XHTML med semantisk-navngivne klasser og id’er. Indholdsfokuset drejer sig altså ikke kun om det umiddelbart visuelle. Det er vigtigt, at det er vel-kodet XHTML, fordi man så kan nå langt med CSS
  • Skudsikkert CSS med mange variationer
  • Dynamiske klasser, så brugerne kan style individuelle elementer i forhold til f.eks., hvilken side den besøgende er på
  • Tillade snart sagt hvilken som helst layout alene ved hjælp af CSS
  • Udstrakt brug af action og filter hooks, så child themes kan erstatte funktioner i forælder-temaet
  • Søgemaskinevenlig – SEO ready eller SEO friendly. Pointen er, at brugerne skal kunne finde indholdet
  • Understøtte populære plugins og løse gængse “problemer” i WordPress
  • Være kompatibel med ældre versioner af WordPress
  • Følge anbefalinger for tilgængelighed, så blinde, svagtseende og andre kan finde rundt og bruge skærmlæsere
  • Bruge mikroformater så godt som muligt
  • Bygge videre på andres erfaringer og fremskridt

Justin Tadlocks sites er – som også nogle af de andres – af meget høj kvalitet. Der skal nok være andre med lige godt materiale, men af og til skal man betale for kigge, og det har jeg valgt fra i denne omgang.

Andre Theme Frameworks

Et tema, der er beregnet til at lade andre bygge ud eller ovenpå, kaldes et theme framework. Den officielle definition på WordPress.org siger, at:

Et ‘theme framework’ er et tema, der er designet til at være et fleksibelt fundament, som kan tjene som et forælder-tema for at skabe ‘child themes’. Brugen af tema-frameworks i WordPress kan lette udviklingen af temaer …

I virkeligheden skal man måske bare, som Alister Cameron skriver i en kommentar til Justin Tadlock, kalde det et basis-tema.

Nogle af dem er oversat til dansk. Carrington Blog, Hybrid, Precious, Sandbox, The Buffet Framework, Thematic og måske også Vigilance er sådanne theme frameworks. Basis hører også til denne gruppe. For en dag eller to siden stødte jeg på Notes Blog Core Theme.

Hvis du vil videre mere

Blandt de temaer, jeg har kigget på i denne sammenhæng, er Hybrid og Thematic meget benyttede. Det kan virkelig betale sig at studere, hvad andre har gjort med disse temaer. Justin Tadlocks Hybrid har masser af materiale. Noget af det er kun tilgængelig, hvis man betaler $25. Man kan dog læse en hel del uden at betale noget.

En udmærket og grundig vejledning er “How to make a child theme for WordPress“. En anden god (men mere kortfattet) vejledning er Child Themes. I det hele taget er der som nævnt et væld af resourcer på Justin Tadlocks ThemeHybrid.com.

Jeg forventer at opdatere dette indlæg hen ad vejen (bl.a. fordi en version ikke blev gemt korrekt, så jeg mistede en del afsnit). Er der ting, der kan forstås eller forklares bedre, eller er der theme frameworks, der burde have været nævnt, så tøv ikke med at skrive en kommentar! 8-) Bemærk, at no-follow er slået fra her på sitet, så du får links tilbage, hvis du kommenterer osv. Så bare skriv løs! Det gælder selvfølgelig også, hvis du har spørgsmål til ovenstående eller kommentarer i al almindelighed.

Update: En del af det, jeg havde skrevet, forsvandt undervejs. Nu har jeg genskrevet et afsnit om Justin Tadlocks Hybrid. Mere følger sikkert hen ad vejen.

[ratings]

Thomas Clausen 10. august 2009 kl. 22.17

Hej Georg

Jeg er én af de mange brugere af Justin Tadlocks temaer, og er svært begejstret for det han laver. Jeg har da også oversat mange af dem + plugins til dansk.

Men jeg synes det er synd at du ikke nævner Ian Stewart. Du linker til hans site themeshaper.com, men hans framework får ingen ord med på vejen. Det fortjener det. Ian laver også et solidt Framework, og har nogle særdeles spændende child temaer.

Georg S. Adamsen 10. august 2009 kl. 23.37

Tusind tak for din kommentar!

Jeg har et indlæg på vej om Ian Stewart og hans framework, som jeg finder overordentlig interessant. Jeg havde et kort afsnit herom, men det røg også, da WordPress smed et langt stykke af min kladde væk.

Stewart gør meget ud af at få indholdet frem, dvs. han vægtlægger det semantiske. Det kan jeg vældig godt lide. Hans introduktion til at skrive temaer er også vældig, vældig god.

Jeg har endnu ikke kigget så meget på Child Themes til Thematic, men det gør jeg, inden jeg gør indlægget færdigt.

Mark 29. september 2009 kl. 08.40

Det er spændende med child-temaer. Og jeg kan kun ærgre mig over, at jeg ikke havde opdaget muligheden, da jeg redesignede mit eget tema. Temaet havde lækker grafik, men var håbløst bagud mht. til templates og brugte en version 1.5 udgave af the loop. Til WordPress-udviklernes ros skal det siges, at det virkede upåklageligt alligevel, men jeg savnede archive.php, search.php osv., så jeg tog al det grafiske og lagde oven på standardtemaet.

Jeg har også lavet alle mulige andre justeringer, og så har vi balladen. Jeg kan ikke opdatere til nyeste Kubrick uden minutiøst at gennemgå mine tilrettede filer med de nye.

Jeg har prøvet at oprette et child theme, men det gik ikke godt. Det er simpelthen for svært at finde mine rettelser og smide dem over i child temaet. Resultatet var i hvert fald nedslående. Derudover er jeg en lille smule i tvivl om det kun er style.css og evt. en functions.php et child theme can bestå af eller om man også kan lave en tilrettet page.php, archive.php osv. Og hvis man kan det, skal man så lave en fuldstændig udgave af den nye template eller kun en med de par tags man har tilføjet. Og hvad hvis det er et par tags, der skal fjernes? Tag’et the_time f.eks. Mit gær er at man laver hele templaten, men uden the_time i child themet.

Der er nogle spørgsmål, som jeg ikke rigtig kan finde svaret på.

Og så kan man sige, at den naturlige udvikling vil være, at man som bruger slet ikke skal bekymre sig om det.

I mere avancerede systemer, f.eks. Plone , der findes en custom mappe. Lige så snart, du piller det mindste ved en af temafilerne, så oprettes en kopi i custom-mappen. Og som med child themes så kikker Plone i custom før den kikker i selve temaet. Altså fuldstændig samme funktionalitet som WordPress’ child themes, men det foregår automatisk. Og det er nemt at fortryde dine tilrettelser. Du sletter det bare fra custom mappen.

Det er også derfor, at det er lidt pudsigt, at f.eks. Justin Tadlock og andre i WordPress-miljøet er helt oppe at køre over child themes. Det er forståeligt, ja, men det er bestemt ikke nyt og epokegørende. Men det er helt klart den vej WordPress og dets temaer kan og skal gå.

Georg S. Adamsen 29. september 2009 kl. 09.11

Hej Mark

Nej, det er noget værre bøvl, når temaerne opdateres. Hvis man har ens egne og originalfilerne, kan det sommetider lade sig gøre med programmer, der kan sammenligne tre hold tekster ad gangen, men det er stadig et krævende projekt. Det er sikkert hurtigere at starte forfra, hvis man har sit layout på plads og har lavet grafikfiler.

Man kan godt ændre andre filer. Kristin K. Wangen forklarer hvordan på wordprecisousss.org. Så vidt jeg har forstået, så er det noget, temaudvikleren skal indbygge. Jeg tager dog forbehold, for jeg stoler ikke på, at jeg har forstået al dokumentationen, hvis jeg ikke har prøvet det af i praksis! Så vidt jeg kan se, kan man dog kun ændre på en del af en fil, hvis det er en funktion i functions.php eller hvis det er style.css, hvor det er CSS-reglerne, der muliggør det.

Plones løsning lyder meget bedre. Når en del er glade for Child Themes, så tror jeg, udgangspunktet er, at man er og vil blive på WordPress. Mon ikke der var visse ting, der ville være anderledes, hvis det blev designet fra bunden af i dag, så man ikke behøvede at tænke på bagud-kompatibilitet? Men sådan er der så meget. WordPress er alt i alt et udmærket system og nemt at gå i gang med, og det er jo ikke så ringe.

Mark 1. oktober 2009 kl. 19.51

Jeg er også helt vild med WordPress og kan ikke fordrage Plone. Custom-funktionen er dog godt tænkt. Til gengæld vil det tage en almindelig it-interesseret ca. 1½ år at mestre Plone. Og det har sådan et halvfærdigt præg i forhold til WordPress, som så til gengæld ikke er helt så avanceret, men til gengæld stadig overskueligt nok for de fleste. Og som du siger, nemt at gå i gang med.

Det undrede mig bare, at mange fra WordPress-kernen ikke virker så velbevandrede i andre (og mere avancerede) cms’er. Men det er måske netop det, der gør dem til ‘kerne’-brugere af WordPress. For dem er der ikke andet.

Tak for tippet om wordprecious.org. Det vil jeg kikke på.

Gita Street 17. august 2011 kl. 12.08

Jeg kan se bloggen er af lidt ældre dato, men jeg kan se definitionen på WordPress.org ikke har ændret sig nævneværdigt. Er selv i gang med at tage stilling til hvordan jeg vil gribe WordPress tema-udvikling an.

God diskussion og feedback givet fra de andre. Dog en skam der ikke er nye kommentarer. Der må være sket en del, selvom jeg kan se nogen af disse frameworks lever i bedste velgående :-)

Georg S. Adamsen 23. september 2011 kl. 10.00

Tak for kommentarer. Bloggen er under genoplivning. En del nye(re) kommentarer er lagt ud nu!

Forrige indlæg:

Næste indlæg: