Joomla! Documentation™

Typische template map structuur

Joomla! CMS templates gebruiken een map- en bestandstructuur maar ze kunnen variëren van template tot template

• Site - templates (templates die veranderen hoe uw website eruit ziet) worden gevonden in de /templates map. Bijvoorbeeld, als uw template heet "mijntemplate", dan staat het in de map:

<pad-naar-Joomla!>/templates/mijntemplate

• Administrator templates (templates die veranderen hoe het beheergedeelte van de site eruit zien) worden gevonden in de /administrator/templates map. Bijvoorbeeld, als uw administrator template heet "mijnadmintemplate", dan wordt het gezet in de map:

<pad-naar-Joomla!>/administrator/templates/mijnadmintemplate

Template mappen

Een template voor Joomla! bevat over het algemeen de volgende mappen:

• css - bevat alle .css bestanden
• html - bevat template override bestanden voor de uitvoer van de core en module chrome
• images - bevat alle afbeeldingen die worden gebruikt door de template
• language - bevat extra taalbestanden die worden gebruikt door de template

Afhankelijk van de complexiteit en het ontwerp kan het ook bevatten:

• javascript - bevat ondersteunende Javascript die door de template wordt gebruikt voor extra functionaliteit

Voorbeeld structuur met bestanden

Standaard pad van een template is <root>/public_html/domeinnaam/template/<naam van uw template> die de volgende mappen en bestanden bevat op basis van uw template.

/css
/html
/images
/javascript
/language
component.php
error.php
favicon.ico
index.php
templateDetails.xml
template_preview.png
template_thumbnail.png 

Template bestanden

Over het algemeen bevat een template tenminste de volgende bestanden:

• index.php

Verzorgt de opbouw voor de weergave en posities van modules en componenten.

• component.php

Verzorgt de opbouw voor de weergave van de printervriendelijke pagina, "E-mail deze link naar een vriend." etc.

• error.php

Verzorgt de methode waarop fouten behandeld worden zoals de 404, pagina niet gevonden fout.

• favicon.ico

favicon icon bestand

• template.css

Verzorgt de visuele aspecten van de template, inclusief specificaties for margins, lettertypen, koppen, randen, lijstopmaak, etc. De .css bestanden kunnen ook in de /css map worden geplaatst.

• templateDetails.xml

Bevat meta-informatie in verband met het template en wordt gebruikt door de Installer en Templatebeheer.

• template_preview.ext - vervangt .ext met het extensie formaat van de afbeelding (.jpg, .png, .gif)

In het algemeen een 600x400 pixel afbeelding die getoond wordt als met de cursor geklikt wordt op de mininatuurweergave in Templatebeheer:Templates, niet Templatebeheer:Stijlen. Dit geeft de beheerder een pop-up scherm van het template voor het aan de site toe te wijzen.

• template_thumbnail.ext - vervangt .ext met het extensie formaat van de afbeelding (.jpg, .png, .gif)

In het algemeen een 200x150 pixel miniatuurafbeelding dat getoond wordt bij het bekijken van de Template-lijst in Templatebeheer:Templates, niet Templatebeheer:Stijlen . Dit geeft de beheerder een miniatuurweergave van het template voor het aan de site wordt toegekend.

Het templateDetails.xml bestand is verplicht voor Joomla! templates en wordt gevonden in de root template map van ieder template in de Joomla! templates map. Dit XML bestand bevat de basis meta-data die Joomla! nodig heeft om het als template optie in het beheergedeelte te tonen. Het bevat ook een verscheidenheid aan andere meta-data die gebruikt worden om informatie over het template en de auteurs te geven en definiëren bestanden en mappen die gebruikt worden door het template. Het detineert ook template taalbestanden, evenals parameters en instellingen die het template in het beheergedeelte biedt.

Het templateDetails.xml bestand gebruikt een tamelijk basic XML formaat en structuur. De XML gegevens in dit bestand worden opgesplitst in secties en specifiek opgemaakt om de verschillende onderdelen en parameters te genereren. De XML gegevens worden gelezen en ontleed door krachtige tools in de Joomla! core, daarna gegenereerd om het template te registreren en te tonen in Templatebeheer. Dit levert template-ontwerpers een relatief eenvoudige manier om koppelingen, instellingen en parameters te maken om in het template te gebruiken.

De implementatie van templateDetails.xml verschilt van template tot template, het kan eenvoudig of ingewikkeld afhankelijk van welke functies het template biedt. Het standaard Joomla! 3 Protostar template biedt een geweldig voorbeeld hoe dit bestand gebruikt wordt. De verschillende secties van het bestand worden hieronder uitgelegd.

XML formaat

De twee bovenste regels van ieder templateDetails.xml bestand moet beginnen met het definiëren van het XML formaat en doctype.

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

De volgende regel is ook verplicht aangezien het Joomla! vertelt dat de gegevens in dit bestand gebruikt worden door een extensie, in dit geval een template. Alle template-gegevens zitten in deze <extension> tag, en het bestand wordt afgesloten door deze tag </extension>.

<extension version="3.1" type="template" client="site">

Basisgegevens

In het eerste deel zetten template-ontwikkelaars informatie over het template. Informatie zoals namen, datums, contactinformatie, copyrights, versienummer en een eenvoudige beschrijving zijn gebruikelijk. Deze gegevens worden gebruikt in Templatebeheer en worden getoond in de lijst met beschikbare templates en kunnen ook in de bewerkvensters van de templates getoond worden.

Template Basisgegevens zoals te zien in Templatebeheer > Templates

Template-details voorbeeld

Protostar XML code voor basisgegevens:

<extension version="3.1" type="template" client="site">
	<name>protostar</name>
	<version>1.0</version>
	<creationDate>4/30/2012</creationDate>
	<author>Kyle Ledbetter</author>
	<authorEmail>admin@joomla.org</authorEmail>
	<copyright>Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.</copyright>
	<description>TPL_PROTOSTAR_XML_DESCRIPTION</description>

U ziet misschien dat de laatste regel van deze code, de beschrijving, een taalstring bevat en niet de daadwerkelijke beschrijving. Deze string verwijst naar een taalbestand in het template waarin de daadwerkelijke beschrijving staat. Dit is een voorkeur manier in Joomla! bij extensies die verspreid worden om internationale taalondersteuning te hebben, men kan echter eenvoudigweg de beschrijving intypen als vertaling niet belangrijk is. De taalbestanden worden ook gedefinieerd in het templateDetails.xml bestand, in de taal-sectie, die meer gedetailleerd later in dit artikel behandeld wordt.

Template beschrijving in Protostar

Template-details voorbeeld

Mappenstructuur

Alle mappen in verband met de template installatie staan hier. Alle bestanden en mappen in de root van de template map tijdens de installatie moeten hier staan. Ieder bestand binnen een map die hier staat wordt automatisch opgenomen. Idere map bevat de volledige pad informatie vanaf de root van de template. De Administrator installer gebruikt deze informatie bij het opslaan van de bestanden tijdens de installatie.

Hieronder staat de bestand en map structuur van het standaard Protostar template. Dit is een vrij standaard bestandsstructuur voor een basic Joomla! template.

	<files>
		<filename>component.php</filename>
		<filename>error.php</filename>
		<filename>favicon.ico</filename>
		<filename>index.php</filename>
		<filename>templateDetails.xml</filename>
		<filename>template_preview.png</filename>
		<filename>template_thumbnail.png</filename>
		<folder>css</folder>
		<folder>html</folder>
		<folder>images</folder>
		<folder>img</folder>
		<folder>js</folder>
		<folder>language</folder>
		<folder>less</folder>
	</files>

Bestandsmappen overzicht van J3 Protostar

Module posities

De beschikbare Module posities die gebruikt kunnen worden in het template zijn in dit gebied gedefinieerd.

Dit zijn de module posities die gedefinieerd zijn in het standaard Protostar template:

	<positions>
		<position>banner</position>
		<position>debug</position>
		<position>position-0</position>
		<position>position-1</position>
		<position>position-2</position>
		<position>position-3</position>
		<position>position-4</position>
		<position>position-5</position>
		<position>position-6</position>
		<position>position-7</position>
		<position>position-8</position>
		<position>position-9</position>
		<position>position-10</position>
		<position>position-11</position>
		<position>position-12</position>
		<position>position-13</position>
		<position>position-14</position>
		<position>footer</position>
	</positions>

De lijst met posities worden opgenomen tussen de <positions> tag. Elke <position> tag zorgt voor een module positie die beschikbaar is in de positie lijst in modulebeheer en andere gebieden van Joomla! waar module posities geselecteerd kunnen worden.

Het eenvoudige formaat van de positie lijst betekent dat het makkelijk aangepast kan worden. Bijvoorbeeld: voeg, om een nieuwe module positie aan de lijst toe te voegen, eenvoudig een nieuwe <position> tag binnen de <positions> tag toe met een unieke naam. Gebruik alleen kleine letters en geen spaties. Denk er aan, dat dit de positie alleen aan het beheergedeelte toevoegt en in andere template bestanden verdere ontwikkeling nodig is om de nieuwe positie op de website te genereren.

Talen

Sommige templates kunnen taalbestanden bevatten om statische teksten in het template te kunnen vertalen. Merk op dat de taalmap bestaat en de twee taalbestanden erin ook opgenomen worden. Hoewel de taalmap eerder gedefinieerd is, hebben deze bestanden hun eigen definities nodig. Deze methode vertelt Joomla! waar de taalbestanden, van de taalstrings uit het template, zich bevinden.

Het eerste bestand bevat het taalbestand voor tekst die door de gebruiker bekeken zal worden. Het tweede bestand, met de extensie .sys, of systeem, is voor tekst die bekeken zal worden in het beheergedeelte.

Dit is de taalmap en bestandsstructuur in het standaard Protostar template:

	<languages folder="language">
		<language tag="en-GB">en-GB/en-GB.tpl_protostar.ini</language>
		<language tag="en-GB">en-GB/en-GB.tpl_protostar.sys.ini</language>
	</languages>

Taalstrings worden in templates en in Joomla! gebruikt met het doel gebruik te maken van de uitgebreide internationale taalondersteunende functies in Joomla!. Deze methode biedt ontwikkelaars en gebruikers een relatief eenvoudig methode om welke tekst dan ook, die in template- en extensievensters gebruikt wordt, te vertalen. Joomla! controleert de taalbestanden op iedere taalstring die gebruikt wordt en laad de corresponderende tekst van de door de gebruiker gekozen taal in plaats van de string. In dit geval zijn er alleen bestanden voor Engels (en-GB), vertalingen in andere talen moeten geleverd worden door gebruikers of ontwikkelaars voordat ze door Joomla! gebruikt kunnen worden.

Meer informatie over taalbestanden:

• Aanmaken van een taal-definitiebestand
• Het laden van extra taalbestanden

Parameters

Protostar Geavanceerde parameters scherm

Een template kan weergave-opties en andere parameters bieden die door de beheerder in templatebeheer gekozen kunnen worden. Bijvoorbeeld, het standaard Protostar template biedt de beheerder de mogelijkheid verschillende kleuren en fonts te wijzigen en een logo toe te voegen. Deze parameters worden gevonden onder het Geavanceerd tabblad, welke ook gedefinieerd en aangemaakt is door de XML parameters.

Template parameters zijn opgenomen binnen een <config> tag, welke een <fields> tag bevat met een name attribuut met "params". Binnen de <fields> tag worden de parameter groepen en individuele parameters gedefinieerd. De <fieldset> tag wordt gebruikt om groepen met parameters te maken. Individuele parameters worden gedefinieerd met de <field> tag.

Elke <fieldset>, en <field> parameter binnen een <fieldset>, vereisen een unieke naam gedefinieerd door het name attribuut. Deze naam definieert de parameter zelf en wordt gebruikt om instellingen naar de website bestanden te leiden. Elke parameter moet een label attribuut en een description attribuut hebben. De label tekst verschijnt met de parameter op het instellingen-scherm om te bepalen waar de instelling voor gebruikt wordt en meer gedetailleerde informatie kan opgenomen worden in de beschrijving.

Een parameter veld kan vrijwel elk type formulier invoer zijn met bijbehorende opties, deze worden geselecteerd door het type attribuut. Alle nodige opties, zoals een radio-knop of selectie-keuzes, worden gedefinieerd via <option> tags. CSS class namen kunnen gedefinieerd worden via het class attribuut en een standaard parameter-instelling kan worden gedefinieerd met behulp van het default attribuut.

Hieronder vindt u de parameter-definities in het standaard Protostar template. In dit voorbeeld, gebruiken alle labels, beschrijvingen en opties taalbestand-definities uit de taalbestanden gedefinieerd in de voorgaande sectie, zowel als enkele uit de Joomla! core, ze kunnen dus, indien noodzakelijk, vertaald worden in verschillende talen.

	<config>
		<fields name="params">
			<fieldset name="advanced">
				<field name="templateColor" class="" type="color" default="#08C"
					label="TPL_PROTOSTAR_COLOR_LABEL"
					description="TPL_PROTOSTAR_COLOR_DESC" />

				<field name="templateBackgroundColor" class="" type="color" default="#F4F6F7"
					label="TPL_PROTOSTAR_BACKGROUND_COLOR_LABEL"
					description="TPL_PROTOSTAR_BACKGROUND_COLOR_DESC" />

				<field name="logoFile" class="" type="media" default=""
					label="TPL_PROTOSTAR_LOGO_LABEL"
					description="TPL_PROTOSTAR_LOGO_DESC" />
					
				<field name="sitetitle"  type="text" default=""
					label="JGLOBAL_TITLE"
					description="JFIELD_ALT_PAGE_TITLE_LABEL"
					filter="string" />

				<field name="sitedescription"  type="text" default=""
					label="JGLOBAL_DESCRIPTION"
					description="JGLOBAL_SUBHEADING_DESC"
					filter="string" />

				<field name="googleFont"
					type="radio"
					class="btn-group btn-group-yesno"
					default="1"
					label="TPL_PROTOSTAR_FONT_LABEL"
					description="TPL_PROTOSTAR_FONT_DESC"
				>
					<option value="1">JYES</option>
					<option value="0">JNO</option>
				</field>

				<field name="googleFontName" class="" type="text" default="Open+Sans"
					label="TPL_PROTOSTAR_FONT_NAME_LABEL"
					description="TPL_PROTOSTAR_FONT_NAME_DESC" />

				<field name="fluidContainer"
					type="radio"
					class="btn-group btn-group-yesno"
					default="0"
					label="TPL_PROTOSTAR_FLUID_LABEL"
					description="TPL_PROTOSTAR_FLUID_DESC"
				>
					<option value="1">TPL_PROTOSTAR_FLUID</option>
					<option value="0">TPL_PROTOSTAR_STATIC</option>
				</field>
			</fieldset>
		</fields>
	</config>

Het Protostar template toont een paar verschillende manieren waarop XML gebruikt kan worden in een template interface, maar er zijn veel meer mogelijkheden. In dit voorbeeld, bevat de <fieldset name="advanced"> tag alle parameters en het gebruikt het name attribuut om het "Geavanceerd" tabblad te maken in de interface. Alles wat noodzakelijk is om een ander tabblad in het interface te maken is nog een <fieldset> tag met een ander name attribuut. Met dit in gedachte is het relatief eenvoudig zo veel meer tabbladen en parameters te maken in een template als noodzakelijk.

Extra bronnen

• Meer informatie over het aanmaken van een Joomla! template
• Het aanmaken van een taaldefinitie-bestand
• Het laden van extra taalbestanden
• Het definiëren van een parameter in templateDetails.xml

Het index.php bestand is het skelet van de website. Iedere pagina die Joomla! oplevert is de "index.php" aangevuld met een selectie inhoud vanuit de database.

Het index.php bestand voor een template bevat een mix van code die uitgeleverd wordt zoals het is en php code, die veranderd wordt voor hij uitgeleverd wordt. De code ziet er vertrouwd uit voor iemand die een eenvoudige HTML pagina in heeft ontworpen: er zijn twee belangrijke secties - de <head> en de <body>. Waar index.php verschilt is het gebruik van php code om informatie vanuit een database in te voegen.

Hier is een voorbeeld:

Een traditionele HTML head 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 gedaan 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 onderdelen in het index.php bestand zijn gedefinieerd, worden de header onderdelen opgezocht in de database door stukjes php code. Het slimme deel is dat beide scripts dezelfde code aan een gebruiker leveren. Als je naar de code van een Joomla website kijkt zal alle <?php blah /> vervangen zijn door reguliere html code.

Goed template ontwerp

index.php zou zo eenvoudig mogelijk moeten zijn omdat het iedere keer opnieuw verstuurd wordt als een pagina verzonden wordt. Elementen zoals de styling zou in CSS-bestanden moeten worden aangeleverd, die de gebruikers-cache worden bewaard. De handleidingen hier behandelen de technische aspecten van het maken van uw index.php.

Waarom index.php ?

Index.htm is historisch de naam die is gegeven aan de homepage van een website. De webserver levert www.example.org/index.htm als een gebruiker navigeert naar www.example.org. Omdat Joomla! geschreven is in PHP, is index.php automatisch het aangeboden bestand. Om de zaken nog te compliceren verwijst, als een gebruiker naar een Joomla-website gaat, de index.php van de root-map door naar de index.php van het huidige standaard template.