Du er ikke logget ind: Log ind eller opret profil
 
Artikler

Theming - hvad er det?

Theming betyder i Drupal terminologien, at arbejde med themes. Men hvad er så et theme? - Et theme er en samling af filer, som er ansvarlig for præsentationen/udseendet af et Drupal websted. Et theme bestemmer med andre ord, hvordan webstedet ser ud.

============================================
Af Kenneth Nielsen, Submit.dk © Er skrevet med udgangspunkt i Drupal 6. 
============================================

Et theme vil ofte indeholde mange forskellige typer filer som f.eks. stylesheets, grafik-filer og javascripts. Et theme kan også indeholde filer, som er knap så kendte, som f.eks. *.theme og *.tpl.php.

Førstnævnte ekstension (*.theme) anvendes til "rene" PHP themes og sidstnævnte (*.tpl.php) til themes, der anvender template-motoren (template engine) PHPTemplate. Alle filer, der benytter PHPTemplate, og som altså hedder noget med *.tpl.php, kalder man for template-filer.

Når du downloader Drupal, medfølger der 6 præ-installerede themes. De ligger placeret i mappen /themes. Men hvis du downloader nye themes (fra f.eks. drupal.org), eller udvikler egne themes, bør du altid placere dem i /sites/all. Du bør her oprette en mappe med navnet themes og i denne mappe placere en mappe med dine theme-filer. Opretter du et theme, som du f.eks. kalder for zebra skal du altså ende op med en sti som ser sådan ud: /sites/all/themes/zebra. Og i mappen zebra placeres så themets filer såsom grafik, css, javascripts samt template-filerne (filerne med *.tpl.php).

Hvad er en template engine?

Kort fortalt kan man sige, at en template engine er bindeleddet mellem programmør og designer. En template engine sørger for et output som kan forstås af en designer.

Bliv ikke forvirret af, at man til tider kalder en template engine for en theme engine. Det er én og samme ting.

Der findes en række forskellige template engines. Drupal benytter den template engine, der hedder PHPTemplate, og som bliver distribueret sammen med Drupal Core (selve Drupals kerne).

Som nybegynder indenfor Drupal, er det ikke nødvendigt at vide noget om template engines. Du bør blot vide, at det altid er nemmest at benytte et theme der benytter en template engine.

Præinstallerede themes

Når du downloader Drupal følger der 6 præ-installerede themes med. De har navnene: Bluemarine, Garland, Minelli, Pushbutton, Chameleon og Marvin. De fire førstnævnte benytter PHPTemplate, mens de to sidstnævnte er skrevet direkte i PHP.

Som tidligere nævnt, anbefales det at benytte themes der anvender PHPTemplate, idet disse er nemmere at benytte og nemmere at genanvende.

Themes der anvender PHPTemplate

Hvis du kigger på filerne i et af de præ-installerede themes som benytter PHPTemplate – f.eks. themet Garland (se: /themes/Garland), vil du se nogle mapper og en række filer.

De eneste filer der reelt er nødvendige er filerne garland.info, page.tpl.php og style.css. Men derudover finder du i Garland-themet bl.a. også filerne block.tpl.php, comment.tpl.php og node.tpl.php. Disse filer er tilstede fordi udvikleren af Garland-themet ønsker at "overrule" med nøjagtig samme navne, som blot ligger placeret et andet sted.

Template filen page.tpl.php, som altså sammen med garland.info og style.css udgør de vigtigte filer, består af et HTML-skelet af nogle enkle PHP-statements hist og pist, som henter de dynamiske data. Filen page.tpl.php har desuden referencer til de nødvendige stylesheets og javascripts. Lige præcis omkring referencer til stylesheets og javascripts er der dog en lille krølle på halen, som du kan læse mere om i afsnittet info-filen.

PHP koderne i page.tpl.php er forholdsvis enkle. Der er primært tale om enkle if-statements og henvisninger til include-filer.

Themes der IKKE anvender PHPTemplate

Hvis et theme er udviklet direkte i PHP er det et såkaldt "rent PHP theme". I et sådan tilfælde vil der som regel kun være 2 vigtige filer: *.theme og *.css. Er du ny indenfor Drupal kan det ikke anbefales, at du benytter denne type themes.

Downloads af eksisterende themes

Hvis du ikke har tid, lyst eller kompetencer til at udvikle dit eget theme, kan du gratis downloade themes fra f.eks. http://drupal.org/project/Themes, http://themegarden.org/drupal6/ eller et af de mange øvrige steder på nettet (husk: Google er din ven). Hvis du vil downloade et eksisterende theme skal du dog være opmærksom på et par ting. Mange themes kræver at din Drupal installation har en Template Engine. De nyeste versioner af Drupal har PHPTemplate integreret og her er det ikke noget problem – med mindre theme’et kræver en anden type engine. I så fald bør du nok holde dig fra det.
Vær også opmærksom på at nogle af de gratis themes har betingelser for brug. Bl.a. kan du komme ud for, at du ikke må benytte et givent theme, med mindre du har et link i bunden af din webside til theme’ets ophavsmand.

Hvor skal et theme installeres?

De præ-installerede themes der følger med Drupal, ligger placeret i mappe /themes. Men downloader du nye themes (eller udvikler dine egne) skal du placere dem i mappen /sites/all. Du bør her oprette en mappe med navnet themes og i denne mappe placere en mappe med dine theme-filer. Opretter du et theme som du kalder for zebra skal du altså ende op med stien: /sites/all/themes/zebra.

Hvordan afinstalleres et theme?

Inden du afinstallerer et theme er det vigtigt at du vælger Administration > Opbygning > Temaer. Her skal du sikre dig at det pågældende theme ikke er aktiveret og at det ikke er sat som default.

Herefter kan du ganske enkelt slette hele mappen med themet. Er det eksempelvis theme'et zebra, du vil slette, sletter du mappen /sites/all/themes/zebra.

Regions og blocks

Et theme består også af såkaldte regions (områder). Disse regions placeres efter behag af theme-udvikleren. I disse regions kan site-administratoren placere moduler (eksempelvis et søge-modul). Et moduls output kalder man for en block.

En region er med andre ord en pladsholder på siden, hvori site-administrator kan placere noget output – som regel ved at tildele blocks til den ønskede region.

I f.eks. det præ-installerede theme Garland er der 5 regions: Header, Content, Footer, Left sidebar og Right sidebar.

I eksemplet med søge-modulet udgør området med søgefeltet og søgeknappen altså blocken. Denne block kan så vises i en bestemt region - eksempelvis i Right sidebar, som i dette tilfælde findes i højre side af websiden (sjovt nok ...).

Regioner er altså noget der kodes ind i theme’et, hvorimod blocks oprettes/redigere af site-administrator uden modificering af koden.

Oprette egen block

Hvis du ønsker at oprette din egen block vælg da Administration > Opbygning > Blokke > Tilføj Block.

I feltet beskrivelse indtaster du et navn. I feltet indhold indtaster du de HTML-koder
der skal udgøre block’en. Eksempelvis:

<a href=http://www.submit.dk><img src=”images/submit.gif”/></a>

Indstil herefter egenskaberne for block’en ved at vælge Administration > Opbygning > Blokke. Her kan du bl.a. indstille i hvilken region blocken skal vises og om det kun er bestemte roller (typer af brugere på dit websted), der skal kunne se den pågældende block.

Stylesheets

Drupal indeholder et meget stort antal stylesheets. For at reducere faren for stylesheets der konflikter og lange loadtider tilbyder Drupal en CSS præ-processing engine. Denne engine identificerer de nødvendige stylesheets, fjerner alle linieskift og mellemrum og leverer alle styles i en kombineret enkelt fil. Denne engine er disabled som default, men kan aktiveres ved at vælge Administrator > Indstillinger > Ydelse. Det kan dog ikke anbefales at aktivere den sålænge du arbejder på dit theme.

De mange stylesheets ligger placeret forskellige steder i din Drupal-installation, dog typisk i undermapper til mappen /modules. Eksempelvis. /modules/system/admin.css og  /modules/help/help.css.

Det vigtiste stylesheet er dog style.css som ligger placeret i det enkelte theme. Dette stylesheet har højeste rang og styles i style.css vil overskrive eventuelle andre konfliktende styles i andre stylesheets.

Ønsker man selv at oprette ekstra stylesheets skal disse placeres i mappen til det enkelte theme (hvor også style.css ligger placeret).

Når man har flere stylesheets i themet end kun style.css, skal man modificere info-filen. Læs mere om dette i afsnittet info-filen.

Themeable functions

Themeable functions bruges, ligesom stylesheets, til at styre udseendet på webstedet. Her er der dog tale om PHP-kodning. Der findes over 125 af dem alene i Drupals standard-installation, og det kan derfor være svært at finde den enkelte themeable function. De starter dog alle med theme_ og kan findes i /modules og /includes.

Et eksempel er theme_password. Denne themeable function har til formål at formatere et password-felt i en formular. Funktionen ligger placeret i /includes/form.inc.

Man kan "overrule" alle eksisterende themeable functions. I stedet for at rette theme_password i /includes/form.inc  er det dog meget bedre, at oprette en tro kopi af funktionen, foretage rettelserne og derefter placere funktionen i et dokument der navngives template.php. Filen template.php gemmes i det aktuelle theme. Altså f.eks. sites/all/themes/zebra/template.php.

Når Drupals PHPTemplate engine opdager en fil med navnet template.php i det aktuelle theme, vil den læse denne fil før alle andre og benytte funktionerne fra denne fil.

Drupal vil lede efter themeable functions i en bestemt rækkefølge og herefter anvende den første den finder. Hierakiet bestemmes gennem en navnekonvention efter følgende principper:

  1. Først ledes efter themename_functionname (f.eks. zebra_password)
  2. Dernæst efter themeengine_functionname (f.eks. phptemplate_password)
  3. Til sidst theme_functionname (f.eks. theme_password)

At benytte den sidstnævnte mulighed i navnekonventionen – altså theme_functionname - vil resultere i en PHP-fejlmeddelelse, da en funktion med dette navn jo allerede eksisterer. For at "overrule" skal man istedet benytte themename_functionname eller themeengine_functionname.

Det er god kotyme at benytte metoden phptemplate_functionname fremfor themename_functionname, da førstnævnte nemt kan kopieres til andre themes uden at funktionens navn skal ændres.

Hvis det var funktione theme_password fra includes/form.inc, vi ville overrule ville vi altså tage en kopi af den, oprette en fil med navnet template.php, indsætte theme_password i denne fil, lave vores rettelse og omdøbe funktionen til at hedde phptemplate_password.

Info-filen

Fra og med Drupal 6 skal et theme indeholde en info-fil. Info-filen skal navngives med themets navn efterfulgt af .info. I tilfældet med det præ-installerede theme Garland, hedder info-filen af samme årsag garland.info. Herunder ser du indholdet af garland.info:

; $Id: garland.info,v 1.5 2007/07/01 23:27:32 goba Exp $
name = Garland
description = Tableless, recolorable, multi-column, fluid width theme (default).
version = VERSION
core = 6.x
engine = phptemplate
stylesheets[all][] = style.css
stylesheets[print][] = print.css

; Information added by drupal.org packaging script on 2008-12-11
version = "6.8"
project = "drupal"
datestamp = "1229018427"

Har du oprettet dit eget theme med eksempelvis navnet zebra kan du altså tage en kopi af garland.info, placere filen i dit theme og derefter omdøbe den til zebra.info. Ret så koderne til:

; $Id: garland.info,v 1.5 2007/07/01 23:27:32 goba Exp $
name = Zebra
description = Her kan du lave en beskrivelse af themet  
version = VERSION
core = 6.x
engine = phptemplate
stylesheets[all][] = style.css
stylesheets[print][] = print.css

; Information added by drupal.org packaging script on 2008-12-11
version = "6.8"
project = "drupal"
datestamp = "1229018427"

Som du kan se, henviser info-filen til style.css. Tidligere i denne artikel nævnte jeg, at såfremt du har brug for mere end ét stylesheet i dit theme, var der en lille krølle på halen. Krøllen består i at de(t) ekstra stylesheet(s) skal defineres i info-filen. Hvis du havde lavet to ekstra stylesheets med navnene zebra.css og jaguar.css skulle info-filen altså rettes til:

; $Id: garland.info,v 1.5 2007/07/01 23:27:32 goba Exp $
name = Zebra
description = Her kan du lave en beskrivelse af themet  
version = VERSION
core = 6.x
engine = phptemplate
stylesheets[all][] = style.css
stylesheets[all][] = zebra.css
stylesheets[all][] = jaguar.css
stylesheets[print][] = print.css

; Information added by drupal.org packaging script on 2008-12-11
version = "6.8"
project = "drupal"
datestamp = "1229018427"

3.8
Din bedømmelse: Ingen Gennemsnit: 3.8 (5 stemmer)

  • Det er gratis
  • Du kan skrive artikler og tips
  • Du kan få hjælp eller hjælpe andre 
  • - og meget mere …