Mandag, 19 marts 2012 12:44

Joomla Templates fra bunden - del 1

Skrevet af 
template joomla fra bunden template joomla fra bunden

Denne tutorial vil give en introduktion til at lave et Joomla template fra bunden. Jeg gennemgår de filer og den kode der er nødvendig for at opsætte et clean template. Koden præsenteres så den nemt kan kopieres og sættes ind i de respektive filer.

Det template der gennemgåes her, kan downloades fra template sektionen: Gratis Joomla Templates. Templatet kan ligeledes ses i funktion her: simpelt template.

Gennemgangen forudsætter kenskab til brug af FTP og en mindre forståelse for HTML. Joomla Startguide giver en gennemført forklaring på hvordan FTP benyttes. www.html.dk har nogle gode tutorials omkring HTML.

Filstrukturen for et Joomla template

Der skal kun to filer til for at lave et helt simpelt template, dem vil jeg beskrive her.

Dit nye template skal ligge i template mappen, denne finder du i roden af Joomla! installationen. Opret en mappe der hedder mittemplate i template mappen. I den skal der ligge to filer: index.php og templateDetails.xml.

Indhold i filerne

Følgende er en gennemgang af det kode der skal i de to filer, nederest i gennemgangen er den sammenhængende kode, der er nemmere at kopiere.

Forklaring af templateDetails.xml

templateDetails.xml er Joomlas reference til alle filer i dit template. De første linjer giver nogle information til Joomla, både når den skal finde rundt i dit template og når templatet skal installeres.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" 
 "http://www.joomla.org/xml/dtd/1.5/template-install.dtd">
<install version="1.5" type="template">


De efterfølgende tags giver information om templatet. Det eneste der er obligatorisk er <name> da dette bruges af Joomla, resten er ekstra information omkring templatet. Her har jeg taget de tags med som Joomla benytter sig af når templatet vises i kontrolpanelet, nemlig oprettelsedato, hvem der har lavet det, versionsnummer samt en kort beskrivelse af templatet.

        <name>MitTemplate</name>
        <creationDate>08-11-2010</creationDate>
        <author>Morten Munkholm</author>
        <version>1.0</version>
        <description>Mit nye template</description>


Dernæst defineres hvilke filer Joomla skal kigge efter når dit template skal vises til en besøgende. Disse to filnavne må ikke ændres, de er obligatoriske i et hvert template. Alle filer der har noget med dit template at gøre, skal listes her.

        <files>
            <filename>index.php</filename>
            <filename>templateDetails.xml</filename>
        </files>


Til sidst fortæller vi hvilke modul positioner der skal være til rådighed for Joomla samt afslutter <install> tagget der blev åbnet tidligere. Positionnavnene er valgfrie, ligeledes er antallet af positioner. Her har jeg kun taget én med og kaldt den left, for overskuelighedens skyld.

        <positions>
            <position>left</position>
        </positions>
</install> 


Hele templateDetails.xml

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" 
 "http://www.joomla.org/xml/dtd/1.5/template-install.dtd">
<install version="1.5" type="template">
        <name>MitTemplate</name>
        <creationDate>08-11-2010</creationDate>
        <author>Morten Munkholm</author>
        <version>1.0</version>
        <description>Mit nye template</description>
        <files>
            <filename>index.php</filename>
            <filename>templateDetails.xml</filename>
        </files>
        <positions>
            <position>left</position>
        </positions>
</install> 


Forklaring af index.php

index.php er som det kan ses på endelse en PHP fil. PHP er det der kaldes for et dynamisk webudviklings sprog (kort fortalt). I vores tilfælde betyder dette at index.php kan vise alt vores indhold dynamisk. PHP giver os mulighed for at vise alle modulerne på de forskellige positioner. Jeg vil ikke gå i dybere detajle med PHP her men vil gerne lave en post om det hvis der er interesse for det.

Lad os kigge på index.php.

Igen giver de første linjer noget information til Joomla samt noget information omkring siden til din browser. Den første linje sørger for at filen ikke kan tilgåes direkte, det vil sige at den skal tilgåes af selve Joomla, se eventuelt her: index.php.

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" 
 lang="<?php echo $this->language; ?>" >

<?php echo $this->language; ?> fortæller din browser hvilket sprog den skal forvente fra Joomla, hvis man kigger på kildekoden til www.joomlatoturials.dk kan man se at denne side er på dansk (da-dk).

Sidens header opsættes herefter. Linjen i midten sørger b.la. for at indsætte titlen på siden, meta information og javascript der altsammen administreres af Joomla, komponenter eller moduler.

<head>
<jdoc:include type="head" />
</head>


Endelig kommer vi til det vi reelt kan se på forsiden. <body> indeholder alt der bliver vist og det er derfor her, at vi skal bestemme vores modulers positioner i templatet. Vi skal også kunne vise indhold fra komponenter, eksempelvis en artikel eller en blog. Vi inkluderer altså alle moduler med position left i første linje og i næste linje inkluderes det indhold som det aktive komponent skal vise. Til sidst lukker vi <html> tagget.

<body>
<div style="float: left; width: 20%;"><jdoc:include type="modules" name="left" /></div>
<div style="float: left; width: 80%;"><jdoc:include type="component" /></div>
</body>
</html>


Hele index.php

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/css/style.css" type="text/css" />
</head>
<body>
<div style="float: left; width: 20%;"><jdoc:include type="modules" name="left" /></div>
<div style="float: left; width: 80%;"><jdoc:include type="component" /></div>
</body>
</html>


Opsummering af del 1

Vi har i denne tutorial kigget på hvordan man laver et helt strippet, simpelt template. Hvis du ønsker at lave dette template til en zip fil som kan installeres i Joomla skal du blot zippe din mittemplate mappe, zipfilen er klar til upload og installation med det samme. Husk at templatet kan downloades fra template sektionen: Gratis Joomla Templates.

Templatet kan ligeledes ses i funktion her: simpelt template. Læg mærke til adressen, der slutter på ?template=mittemplate, dette gør at du kan se din side i et hvilket som helst template du har installeret. Prøv eventuelt at skrive ?template=ja_purity istedet for. Jeg har i dette eksmpel afpubliceret alle moduler, undtagen Main Menu.


Templates fra bunden Del 2

Del to af denne tutorial vil kigge nærmere på hvad et klassisk template ellers benytter. Jeg har endnu ikke bestemt mig for præcis hvad den skal omhandle, men jeg vil blandt andet komme omkring CSS, component.php, billeder, give eksempler på god kodeskik og komme med eksempler på designs af simple og letanvendelige templates.

Hvis du har læst denne post og føler at der er noget der mangler en forklaring, så skriv endelig en kommentar, så skal jeg forsøge at svare så godt jeg kan og eventuelt uddybe dette emne i min næste post. I det hele taget er ris og ros meget velkomment da dette er min første post på www.joomlatutorials.dk og jeg ved, at man kun kan blive bedre ved at lytte til andre.

Læst 42353 gange Senest ændret Mandag, 19 marts 2012 13:06

3 kommentarer

  • Kommentar link AllanM Mandag, 27 Juli 2015 21:24 Skrevet af AllanM

    Er det mig der ikke kan se eller er der aldrig kommet del 2 ?

  • Kommentar link Rasmus Hoeks Torsdag, 03 maj 2012 15:03 Skrevet af Rasmus Hoeks

    @Kasper: Jamen det kunne det da... Jeg er desværre booket meget op for tiden.

    Men nu ved jeg tilfældigvis, at du trodsalt selv har ret godt styr på Joomla, så måske det skulle være en opgave for dig som gæsteblogger? ;P

    Her er trodsalt en del besøgende hver dag, så det kunne være en win/win situation for os begge.

    Drop mig en mail, hvis det har interesse.

  • Kommentar link Kasper Gadensgaard Torsdag, 03 maj 2012 14:56 Skrevet af Kasper Gadensgaard

    Hej Rasmus

    Super indlæg. Det kunne også være interessant at se nærmere på opbygningen af templates vha nogle af de frameworks der er udgivet til Joomla, fx Warp fra YooTheme eller Gantry fra RocketTheme.

Skriv en kommentar

Sørg for du indtaster de påkrævede oplysninger (*).
HTML kode er ikke tilladt.