Martin Lantzsch
Software Entwickler
9. November 2011

Joomla eigenes Basis Template – Teil 2

9. November 2011 - Geschrieben von Martin - 2 Kommentare

Im letzten Artikel habe ich die Entwicklung eines Basis Templates für Joomla begonnen, welches als Entwicklungsgrundlage für eigene Templates ganz dienlich ist.

Die tempalteDetails.xml
Wie ich bereits angesprochen habe ist die „templateDetails.xml“ zu vergleichen mit einer „manifest.xml“. Um es kurz zu machen Zeige ich euch einfach mal die fertige „templateDetails.xml“ die ihr nach belieben anpassen könnt.

<?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>basis_template</name>
	<creationDate>2011-11-09</creationDate>
	<author>Dein Name</author>
	<authorEmail>deine@email.tld</authorEmail>
	<authorUrl>http://deinedomain.tld</authorUrl>
	<copyright>Dein Name 2011</copyright>
	<license>Deine Lizenz</license>
	<version>1.0.0</version>
	<description>Basis Template für eigene Entwicklungen</description>
	<files>
		<filename>index.php</filename>
		<filename>templateDetails.xml</filename>
		<folder>images</folder>
		<folder>css</folder>
	</files>
	<positions>
		<position>sidebar</position>
		<position>footer</position>
	</positions>
</install>

Ich denke die meisten Knoten sind selbstverständlich, lediglich „files“ und „positions“ würde ich noch ein mal gern explizit ansprechen. Ach genau, „name“ muss exakt den Ordner Name beinhalten, also heißt euer Template Ordner „basis_template“ so muss auch „name“ genau so heißen.

<files>
	<filename>index.php</filename>
	<filename>templateDetails.xml</filename>
	<folder>images</folder>
	<folder>css</folder>
</files>

„filename“ springt direkt eine eine Datei an. „folder“ hingegen schnappt sich den ganzen Ordner mit Inhalt. Oft sieht man wie „verzweifelte“ Entwickler alle CSS und Bild Dateien von Hand mit „filename“ aufführen, aber warum kompliziert wenn’s auch einfach geht ;-)

<positions>
	<position>sidebar</position>
	<position>footer</position>
</positions>

Joomla holt sich von hier die verfügbaren Positionen, d.h. es werden in den Klappboxen nur die hier definierten Positionen angezeigt, das Template selbst wird nicht nach ihnen abgegrast!

Die templte.css – Struktur für unser Template
Bisher würde das Template nach gar nichts aussehen:


Nicht mal eine Struktur hat es, deshalb machen wir das nun mit CSS:

body {
	margin : 0;
	padding: 0;
}
 
#wrapper {
	width: 900px;
	margin: 0 auto;
}
 
#wrapper #header {
	width: 100%;
	height: 80px;
	background-color: #e5e5e5;
}
 
#wrapper #sidebar {
	float: right;
	width: 20%;
}
 
#wrapper #content {
	float: right;
	width: 80%;
}
 
#wrapper #footer {
	clear: both;
	width: 100%;
}


Das nun in die „template.css“ kopieren, abtippen oder wie es sein sollte. Selbst schreiben ;-) Here we go:

Okay nicht so der Brüller aber für ein Basis Template ausreichend, schließlich ist das hier kein Design Tutorial ;-)

Für Joomla publizieren
Packt einfach das Template Verzeichnis „basis_template“ als .zip. Das ist alles, nun könnt ihr das Tempalte in jeder Beliebigen Joomla Installation installieren.
Damit es nicht so leer wie bei mir aussieht, müsst ihr natürlich noch Module an die entsprechenden Positionen packen. Also z.B. eine Navigation an die „Sidebar“ Position, einen Footer Text an die Position „footer“, etc.

Und jetzt?
Jetzt könnt ihr das Template nach belieben anpassen, nur wem das jetzige noch zu unflexibel ist, sprich wer die Joomla Ausgabestruktur ändern möchte, der sollte den nächsten Teil lesen, in dem ich zeige wie man eigene Views erstellt und damit die Standard Views überschreibt.

9. November 2011

Joomla eigenes Basis Template – Teil 1

9. November 2011 - Geschrieben von Martin - Ein Kommentar

In der folgenden Serie werde ich euch anhand eines Praxisbeispiels zeigen wie man sich sein eigenes „Basis“ Template für Joomla schmiedet. Dieses Template kann dann später als Grundlage für eigene Entwicklungen verwendet werden. Meine verwendete Joomla Version ist übrigens 1.5, in wie fern man das auf andere Versionen abwälzen kann, weiß ich nicht.

Die Joomla Template Struktur
Die Templates werden bei Joomla – wie sollte es auch anders sein – im Unterordner „templates“ des root Verzeichnisses abgelegt. Jedes Template bekommt seinen eigenen Ordner in den später alle Stylesheets, JavaScript Dateien, Bilder und natürlich die Views kommen. Als Ausgangspunkt legen wir uns folgende Ordner an:

- templates
-- basis_template
--- css
--- images

Natürlich nützen uns die Ordner allein noch nichts, deshalb kommen hierzu noch folgende Dateien:

- templates
-- basis_template
--- css
---- template.css
--- images
-- index.php
-- templateDetails.xml

In den CSS Ordner kommt das Stylesheet namens „template.css“, in das Root Verzeichnis packen wir die „index.php“, welche später das HTML Gerüst beinhält und die „templateDetails.xml“, die Joomla benötigt um mit dem Template arbeiten zu können. Der images Ordner bleibt erst mal leer.

Das HTML Grundgerüst
Ich gehe jetzt einfach mal davon aus, das meine Leser ein Grundverständnis von HTML mitbringen, wenn nicht, solltet ihr euch erst mal in dessen Thematik einarbeiten.

Wir füllen nun die „index.php“ mit folgendem Inhalt:

<?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/system/css/system.css" type="text/css" />
        <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
        <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <h1><?php $conf =& JFactory::getConfig(); echo $conf->getValue('config.sitename'); ?></h1>
            </div>
            <div id="sidebar">
                <jdoc:include type="modules" name="sidebar" />
            </div>
            <div id="content">
                <jdoc:include type="component" />
            </div>
            <div id="footer">
                <jdoc:include type="modules" name="footer" />
            </div>
        </div>
    </body>
</html>

Ist euch das zu schnell gegangen? Gut, dann noch mal langsam.

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>

Dieses PHP Konstrukt verbietet den direkten Zugriff auf das „pure“ Template, indem es die Ausführung abbricht, wenn die Konstante „_JSEXEC“ nicht definiert ist.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

Hier definieren wir den HTML Tag und geben ihm die Systemsprache mit, bzw. die Sprache, die der User im Joomla gerade eingestellt hat.

<jdoc:include type="head" />

Dieser Pseudo HTML Tag der Joomla Template Engine bindet alle Geschichten wie title Tag, JS Files, etc. automatisch ein.

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />

Hier binden wir das System Stylesheet ein. Besonders ist der PHP Teil „$this->baseurl“, hier wird die URL zum aktuellen Joomla ausgegeben, gut zu wissen wenn man später selbst noch etwas einbinden möchte.

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />

Hier wird das Herzstück unseres Templates geladen. Das Stylesheet. Eigentlich wie oben, nur wird hier noch der Name des Templates verwendet um den richtigen Ordner zu finden „echo $this->template“

<jdoc:include type="modules" name="header" />

Der altbekannte Pseudo Tag mit anderen Attributen. Hier Laden wir den typ modules mit dem Name header. Das heißt, wir laden alle Module die im System an der Position „header“ Registriert sind.

<jdoc:include type="component" />

Hier rufen wir die Inhaltskomponente der aktuellen Seite auf. Also z.B. „com_content“, „com_contacts“, etc..

Was wir bisher haben
Jetzt haben wir ein eigentlich bereits Funktionsfähiges Template. Doch es fehlt noch die „tempalteDetails.xml“, die mit einer manifest.xml zu vergleichen ist. Hier werden alle verwendeten Dateien aufgeführt, im Template verwendete Positionen registriert, Authorangaben gespeichert und noch ein paar Schmankerl mehr. Doch das machen wir im nächsten Teil, der im Anschluss erscheint.

Joomla eigenes Basis Template – Teil 2