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

Eine Antwort zu “Joomla eigenes Basis Template – Teil 1”

  1. […] Joomla eigenes Basis Template – Teil 1 […]

Schreibe einen Kommentar