Joomla - Template erstellen
Contents
Ordner und Dateien
Alle fett gedruckten Ordner und Datein sind zwingend erfoderlich, die anderen nur optional!
Ordner
TEMPLATE-NAME/css TEMPLATE-NAME/fonts TEMPLATE-NAME/html TEMPLATE-NAME/images TEMPLATE-NAME/javascript TEMPLATE-NAME/language
Dateien
TEMPLATE-NAME/favicon.ico TEMPLATE-NAME/index.php TEMPLATE-NAME/template_preview.png TEMPLATE-NAME/template_thumbnail.png TEMPLATE-NAME/templateDetails.xml TEMPLATE-NAME/css/personal.css TEMPLATE-NAME/css/positon.css TEMPLATE-NAME/css/print.css TEMPLATE-NAME/css/template.css TEMPLATE-NAME/language/de-DE/de-DE.TEMPLATE-NAME.ini TEMPLATE-NAME/language/de-DE/de-DE.TEMPLATE-NAME.sys.ini TEMPLATE-NAME/language/overrides/de-DE.override.ini
Datei | Beschreibung |
---|---|
template_preview.png | Abbild der Seite im Format 800 x 600 Pixel |
template_thumbnail.png | Abbild der Seite im Format 206 x 150 Pixel |
templateDetails.xml | siehe Installationsdatei |
print.css | siehe CSS - Print |
de-DE.TEMPLATE-NAME.ini | siehe Sprachdateien |
de-DE.TEMPLATE-NAME.sys.ini | siehe Sprachdateien |
de-DE.override.ini | siehe Sprachdateien |
index.html
Außerdem musst du noch in jedes Verzeichnis die Datei index.html mit dem folgendem Inhalt kopieren:
<html><body></body></html>
Installationsdatei (templateDetails.xml)
Erstelle die Datei und füge das folgende ein:
Kopf
Der Kopf der Datei sieht die folgt aus
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
<extension version="1.6" type="template" client="site">
<name>TEMPLATE-NAME</name>
<creationDate>DATUM</creationDate>
<author>AUTHOR</author>
<authorEmail>AUTHOR-EMAIL</authorEmail>
<authorUrl>AUTHOR-URL</authorUrl>
<copyright>Copyright (C) 2011 COPYRIGHT</copyright>
<license>LICENSE</license>
<version>VERSION</version>
<description>TPL_template_name_XML_DESCRIPTION</description>
Ordner und Dateien
Als nächstes musst du alle Ornder und Dateien untereinander auflisten
<files>
<folder>css</folder>
<folder>images</folder>
<folder>ORDNER-3<</folder>
<folder>...</folder>
<filename>index.php</filename>
<filename>template_preview.png</filename>
<filename>DATEI-3</filename>
<filename>...</filename>
</files>
Positionen
Hier musst du alle Positionen, die in der index.php verwendet werden, untereinander auflisten
<positions>
<position>debug</position>
<position>position-0</position>
<position>position-1</position>
<position>position-2</position>
<position>position-3</position>
<position>position-4</position>
</positions>
Sprachdateien (optional)
<languages folder="language">
<language tag="overrides">overrides/de-DE.override.ini</language>
<language tag="de-DE">de-DE/de-DE.tpl_TEMPLATE-NAME.ini</language>
<language tag="de-DE">de-DE/de-DE.tpl_TEMPLATE-NAME.sys.ini</language>
</languages>
Einstellungsfeld (optional)
Es folgen Einstellungen, die später im Admin-Bereich erscheinen (unter Erweiterungen > Templates > klick auf DEIN-TEMPLATE).Dabei wird zwischen basic und advanced Einstellungen unterschieden.
Schau unter Sprachdateien nach, um die Bedeutung von dem zuverstehen, was jeweils auf label und description folgt.
Dieser Teil muss du komplett an dein Template anpassen, es folgen nur einige Beispiele
<config>
<fields name="params">
<fieldset name="basic">
<field name="logo" type="media"
label="TPL_template-name_FIELD_LOGO_LABEL"
description="TPL_template-name_FIELD_LOGO_DESC" />
<field name="copyright" type="text" size="50" default="Copyright 2011 by XY"
label="TPL_template-name_FIELD_COPYRIGHT_LABEL"
description="TPL_template-name_FIELD_COPYRIGHT_DESC"
filter="string" />
</fieldset>
<fieldset name="advanced">
<field name="picturecredits_show" type="radio" default="1"
label="TPL_template-name_FIELD_PICTURECREDITS_SHOW_LABEL"
description="TPL_template-name_FIELD_PICTURECREDITS_SHOW_DESC">
<option value="0">JNO</option>
<option value="1">JYES</option>
</field>
<field name="picturecredits" type="textarea" rows="4" cols="25"
default="45"
label="TPL_template-name_FIELD_PICTURECREDITS_LABEL"
description="TPL_template-name_FIELD_PICTURECREDITS_DESC" />
</fieldset>
</fields>
</config>
Fuss
Am Ende fehlt schließlich noch
</extension>
Sprachdateien
Eigene Sprachdateien erstellen
Dateien
- TEMPLATE-NAME/language/de-DE/de-DE.TEMPLATE-NAME.ini
- TEMPLATE-NAME/language/de-DE/de-DE.TEMPLATE-NAME.sys.ini
Beispiel de-DE.TEMPLATE-NAME.ini
TPL_template-name_XML_DESCRIPTION="beschreibung-deines-templates"
TPL_template-name_LOGO_TITLE="Logo"
TPL_template-name_TOTHETOP="Nach oben"
TPL_template-name_FIELD_COPYRIGHT_DESC="Bsp. Copyright 2011 by XY"
TPL_template-name_FIELD_COPYRIGHT_LABEL="Copyright-Informationen"
TPL_template-name_FIELD_LOGO_DESC="Wähle ein Bild aus"
TPL_template-name_FIELD_LOGO_LABEL="Logo"
Beispiel de-DE.TEMPLATE-NAME.sys.ini
TPL_template-name_XML_DESCRIPTION="beschreibung-deines-templates"
TPL_template-name_POSITION_DEBUG="Debug"
TPL_template-name_POSITION_POSITION-0="Search"
TPL_template-name_POSITION_POSITION-1="Mainmenu"
Sprachdateien überschreiben
Es ist auch möglich die bereits installierten Sprachdateien zu überschreiben. Erstelle hierzu die folgende Datei:
Datei
Beispiel de-DE.override.ini
Wir überschreiben MOD_BREADCRUMBS_HERE aus der Datei /language/de-DE/de-DE.ini, indem wir in die neu erstellte Datei das folgende hineinschreiben:
MOD_BREADCRUMBS_HERE="hier-mein-neue-text"
index.php
Kopf der Datei
Kein direkter Zugriff
Um eine direkten Zugriff zuverhindern, fügst du folgendes in die Datei ein
<?php
// no direct access
defined('_JEXEC') or die;
Parameter
Als nächstes Speicherst du die Parameter des Templates, die du in der templateDetails.xml under fields eingefügt hast. Die Parameter in diesem Beispiel wären logo, copyright und MEIN-PARAMETER.
// get params
$logo = $this->params->get('logo');
$copyright = $this->params->get('copyright');
$MEIN-PARAMETER = $this->params->get('MEIN-PARAMETER');
$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$templateparams = $app->getTemplate(true)->params;
Javascript-Dateien
// javascript
$doc->addScript($this->baseurl.'/templates/'.$this->template.'/javascript/MEINE-DATEI.js', 'text/javascript', true);
?>
HTML-Anfang
Der Schritsatz, Spracheinstellungen, Pfade, etc. werden automatisch eingefügt:
<?php echo $this->charset ?>
<?php echo $this->language;?>
<?php echo $this->baseurl ?>
<?php echo $this->template ?>
<?php echo $this->direction; ?>
Der Code sieht dann so aus
<?php echo '<?';?>xml version="1.0" encoding="<?php echo $this->charset ?>"?>
<!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;?>" dir="<?php echo $this->direction; ?>">
<head>
Meta-Tags, Titel und Favicon
Desweiteren werden durch die Angabe von
<jdoc:include type="head" />
u.a. die folgenden Angaben eingefügt:
- Meta-Angaben (robots, keywords, author, etc.)
- Titel der Seite
- Favicon.ico
CSS
Als Beispiel wurden hier neben der notwendigen template.css noch die beiden CSS-Dateien position.css und meine_datei.css eingebunden.
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/POSITION.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/MEINE-DATEI.css" type="text/css" media="screen,projection" />
</head>
<body>
Hauptteil der Datei
Zugriff auf Sprachdatei
<?php echo JText::_('TPL_template-name_LOGO_TITLE'); ?>
Module einbinden
Um die Module, die du im Admin Bereich erstellst, einbinden zu können, musst du Platzhalter in index.php einbauchen
<jdoc:include type="modules" name="POSITIONS-Name" />
<jdoc:include type="module" name="POSITIONS-Name" style="STYLE" />
Modul | CSS |
---|---|
Suche | .search (div) |
Navigationspfad | .breadcrumbs (div) |
Menu | .menu (div) |
Inhalt der Seite | .item-page (div) |
Inhalt der Seite
<jdoc:include type="message" />
<jdoc:include type="component" />
Beispiel
<!-- head -->
<div id="head">
<!-- logo -->
<div id="logo"><a href="/"><img src="<?php echo $this->baseurl ?>/<?php echo htmlspecialchars($logo); ?>" alt="<?php echo JText::_('TPL_template-name_LOGO_TITLE'); ?>" /></a></div>
<!-- menu: main -->
<jdoc:include type="modules" name="position-1" />
<!-- search -->
<jdoc:include type="modules" name="position-0" />
</div>
<!-- main -->
<div id="main">
<!-- breadcrumbs -->
<jdoc:include type="modules" name="position-3" style="-1" />
<!-- content -->
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
<!-- foot -->
<div id="foot">
<!-- copyright -->
<div id="copyright"><?php echo $copyright; ?></div>
</div>
Fuss der Datei
</body>
</html>
Installations des Templates
Dein fertiges Template packst du mit allen dazugehörigen Ordner und Dateien in eine .zip-Datei. Diese kannst du dann im Admin Bereich unter Erweiterungen > Erweiterungen > Installieren hochladen.