Joomla - Template erstellen

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

Erklärung der Dateien
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

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

TEMPLATE-NAME/language/overrides/de-DE.override.ini

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" />

Modulformatierung per CSS
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.

Joomla - Template erstellen

Contents

Ordner und Dateien

Ordner

Dateien

Installationsdatei (templateDetails.xml)

Kopf

Ordner und Dateien

Positionen

Sprachdateien (optional)

Einstellungsfeld (optional)

Fuss

Sprachdateien

Eigene Sprachdateien erstellen

Sprachdateien überschreiben

index.php

Kopf der Datei

Kein direkter Zugriff

Parameter

Javascript-Dateien

HTML-Anfang

Meta-Tags, Titel und Favicon

CSS

Hauptteil der Datei

Module einbinden

Inhalt der Seite

Beispiel

Fuss der Datei

Installations des Templates

Navigation menu

Personal tools

Namespaces

Variants

Views

More

Search

Navigation

Categories

Tools