Tutorial: Joomla! templates begrijpen

 Begrijpelijke basis informatie over de opbouw van een Joomla! template.

Alle site templates (templates die uw website er anders uit laten zien) zijn te vinden in de templates map. Bijvoorbeeld, als uw template  "mytemplate" heet, dan zou het geplaatst moeten worden in de map "[pad-naar-Joomla!]/templates/mytemplate". 
Alle administrator templates (templates die verandering wat de administror backend van de site er uit ziet) kan worden gevonden in de administrator/templates map. Bijvoorbeeld, als uw beheerder template heet "myadmintemplate", dan zou het worden geplaatst in de map "[pad-naar-Joomla!]/administrator/templatemyadmintemplate". 

Typische template Mappen Structuur 

Het is het meest gebruikelijk om een template te hebben ten minste vier bestanden: 

• index.php
  - biedt de logica voor de weergave en positionering van modules en componenten.
• template.css
  - verzorgt de presentatie van de template met inbegrip van specificaties voor de marges, lettertypes, rubrieken, beeld grenzen, lijst opmaken, etc.
• templateDetails.xml
  - bevat meta-informatie over de template en wordt gebruikt door de Installer en de Template Manager.
• template_thumbnail.ext
  - vervangen. ext met de extensie formaat van de afbeelding (. jpg,. png,. gif)
  Meestal een 200x150 pixel afbeelding die wordt weergegeven wanneer de cursor over de template-naam wordt gehouden in de Template Manager. Dit geeft de administrator een momentopname van de template voor de toepassing ervan op de site. 

Een normale template voor Joomla! 1.5 zal de volgende mappen hebben: 

• CSS - bevat alle .css bestanden 
• html - bevat template 'override' bestanden voor core module output en chroom 
• beelden - bevat alle afbeeldingen die worden gebruikt door de template 

Het templateDetails.xml bestand bevat een variëteit van meta-data dat wordt gebruikt door de Template Manager tijdens de installatie en het onderhoud. Het is nuttig de verschillende onderdelen van het bestand te herkennen. Normaliter, wordt elke sectie van de gegevens ingesprongen om een beter leesbaar bestand te maken, maar dit inspringen is niet noodzakelijk. 

Basis Details 

Het eerste scherm van de Template Manager toont een lijst met beschikbare templates en fundamentele gegevens met betrekking tot de template. Elk van deze stukjes informatie wordt gehaald uit de templateDetails.xml bestand.
 

<install version="1.5" type="template">
<name>rhuk_milkyway</name>
<creationDate>11/20/06</creationDate>
<author>Andy Miller</author>
<authorEmail> Dit e-mailadres is beschermd tegen spambots. U heeft Javascript nodig om het te kunnen zien. </authorEmail>    <authorUrl>http://www.rockettheme.com</authorUrl>
<copyright></copyright>
<license>GNU/GPL</license>
<version>1.0.2</version>
<description>TPL_RHUK_MILKYWAY</description>

Bestandsstructuur

Alle bestanden die verband houden met de template zijn opgenomen. Elk bestand bevat de volledige pad informatie welke begint bij de template root. De Administrator's Installer gebruikt deze gegevens bij het opslaan van de bestanden tijdens de installatie. 
Een klein deel van de bestanden die zijn opgenomen in de template rhuk_milkyway wordt hieronder gegeven.

<files>
    <filename>index.php</filename>
    <filename>templateDetails.xml</filename>
    <filename>template_thumbnail.png</filename>
    <filename>params.ini</filename>
    <filename>images/arrow.png</filename>
    <filename>images/indent1.png</filename>
</files>

Talen

Sommige templates kunnen ook taal-bestanden bevatten voor de vertaling van statische teksten in de template. Merk op dat twee taal bestanden hieronder worden weergegeven. Het eerste bezit het taal bestand voor tekst die door de gebruiker zal worden bekeken. De tweede, geplaatst binnen <administration> tags, is voor tekst die zal worden bekeken door de beheerder.

<languages>
    <language tag="en-GB">en-GB.tpl_beez.ini</language>
</languages>
<administration>
    <languages folder="admin">
        <language tag="en-GB">en-GB.tpl_beez.ini</language>
    </languages>
</administration>

Module Posities 

De beschikbare Module Posities die gebruikt kunnen worden in het template zijn gedefinieerd. 

<positions>
    <position>breadcrumb</position>
    <position>left</position>
    <position>right</position>
    <position>top</position>
    <position>user1</position>
    <position>user2</position>
    <position>user3</position>
    <position>user4</position>
    <position>footer</position>
    <position>debug</position>
    <position>syndicate</position>
</positions>

Parameters 

Een template kan schermopties bieden, die kunnen worden gekozen door de administrator in de Template Manager. Bijvoorbeeld, de rhuk_milkyway template laat de administratorde kleuren van de randen, de achtergrond en de gedefineerde scherm breedte kiezen.

<params>
    <param name="colorVariation" type="list" default="white" label="Color Variation" description="Color variation to use">
        <option value="blue">Blue</option>
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="orange">Orange</option>
        <option value="black">Black</option>
        <option value="white">White</option>
    </param>
</params>

Voor meer informatie over het werken met parameters, zie: 
Vaststelling van een parameter in templateDetails.xml
Ophalen van parameter gegevens in een templatebestand

Het index.php bestand is het skelet van de website. Elke pagina die Joomla! levert is "index.php" aangevuld met een selectie van de inhoud uit de database. 

Het index.php bestand voor een template bevat een mengsel van code die wordt geleverd zoals het is, en php-code, die zal worden bewerkt voordat het wordt afgeleverd. De code is vertrouwd voor iedereen die een eenvoudige HTML-webpagina heeft gemaakt: er zijn 2 belangrijke punten - de <head> en <body>. Waarin index.php verschilt, is het gebruik van php-code voor de door u geselecteerde gegevens uit een database. 

Hier is een voorbeeld: 
Een traditie HTML kop sectie: 

<head>
<title>My Example Webpage</title>
<meta name="title" content="example"      />
<link rel="stylesheet" href="/www.example.com/css/css.css" type="text/css"      />
</head>

En hetzelfde op de Joomla! manier:

<head>
<jdoc:include type="head"      />
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>templates/mytemplate/css/css.css" type="text/css"      />
</head>

Dus, in plaats van dat deze header (kop) delen worden gedefinieerd in het index.php bestand, worden ze opgezocht in de database door stukjes php code. Het slimme is dat beide scripts dezelfde code leveren aan een gebruiker. Als u kijkt naar de code van een Joomla! website, alle <? Php blah /> zal zijn vervangen door de gewone html-code.

Goed template ontwerp 

Index.php moet zo kaal, als u kunt maken, zijn, want het zal telkens opnieuw worden verzonden wanneer er een nieuwe pagina wordt geladen.  Elementen zoals styling moeten worden geleverd in CSS-bestanden die zijn opgeslagen in de gebruikers-cache. De tutorials hier behandelt de technische aspecten voor het maken van uw index.php. 

Waarom index.php? 

Index.htm van oudsher de naam die gegeven op de homepage van een website. Dus wanneer een gebruiker naar www.example.org surft, levert de webserver www.example.org/index.htm. Omdat Joomla! is geschreven in PHP, is index.php het automatisch geserveerde bestand. Om het verder te compliceren, wanneer een gebruiker surft naar de joomla website, de index.php in de webserver root map wordt omgeleid naar de index.php van de huidige standaard template.