Zur Startseite

Templates bauen Teil 1

Im heutigen Adventskalender Türchen Nr. 8 zeige ich dir wie du dein allererstes eigenes Joomla! Template im Handumdrehen erstellst.

Grundlagen

templateDetails.xml Datei

Die zwei wichtigsten Dateien für unser Template sind zum einen die Manifest Datei im .xml Format und die index.php Datei. Die Manifest Datei sagt an, wo der Hase lang läuft. Hier schreibt du in einer vorgegebenen Struktur wie dein Template heißt, wie du heißt und was du schönes in deinem Template eingepackt hast.

Fast so wie der Wunschzettel an den Weihnachtsmann, oder?

Schwer ist das nicht und selbst Profis schreiben diese XML Datei nicht immer neu, sondern bedienen sich einer eigenen Vorlage. Wenn du ein bisschen html kannst, ist die Datei selbsterklärend, keine Angst, du musst kein xml an sich beherrschen!

Zwischen den "Befehlen" in den spitzen Klammern stehen immer die entsprechenden Angaben.
Erstelle dir einen Ordner namens hohoho und erstelle darin eine Datei namens templateDetails.xml und kopiere dir den nachfolgenden Code in diese Datei.

<?xml version="1.0" encoding="utf-8"?> 
 <extension version="3.7" type="template" client="site"> 
  <name>hohoho</name> 
  <creationDate>09-12-2017</creationDate> 
  <author>Rudolph Rentier</author> 
  <authorEmail>Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein.</authorEmail> 
  <authorUrl>http://www.joomla.de</authorUrl> 
  <copyright>joomla.de</copyright> 
  <license>GNU/GPL</license> 
  <version>1.0.0</version> 
  <description>Mein erstes Joomla Template</description> 
  <files> 
   <filename>index.php</filename> 
   <filename>templateDetails.xml</filename> 
   <folder>css</folder> 
  </files> 
  <positions> 
   <position>links</position> 
   <position>rechts</position> 
   <position>oben</position> 
   <position>unten</position> 
   </positions> 
</extension>

Du würdest aber jetzt schon gern wissen was das ganze oben soll? Ok, dann erkläre ich das hier im Kurzen:

<name>
Das ist der Name deines Templates. Da hieraus der Template Ordner erstellt wird, achte darauf websichere Zeichen zu verwenden

<creationDate>
Das ist das Erstellungsdatum deines Templates. Du musst keine besondere Form einhalten.

<author>
Unter Author steht dein Name

<authorEmail>
Hier trägst du deine E-Mail Adresse ein

<authorUrl>
Hier steht die URL zu deiner Webseite

<copyright>
Wer hat die Copyrights an diesem Template? Trage hier den Namen ein

<license>
Hier trägst du Informationen zur Lizenz ein

<version>
Das ist die allererste Version unseres Template und das tragen wir so ein.

<description>
Hier kannst du eine Beschreibung zum Template eintragen

<files>
Im File-Tag werden alle Dateien gelistet die mit installiert werden sollen. Du listest hier alle Dateien erster Ebene in <filename> auf und alle Ordner in <folder> Tags. Die Dateien die innerhalb der Unterordner liegen, musst du nicht extra aufführen. Lasse die Angaben so wie sie sind, gleich erstellen wir zusammen die anderen Dateien.

<positions>
Unter Positions werden die Modulpositionen angegeben die wir im Template anbieten wollen. Lass die Angaben so wie sie sind, dann können wir gemeinsam weitermachen.
Das waren schon mal die Grundlagen für die xml Datei fürs Erste!

So nun speichere diese Datei ab.

index.php Datei

Als nächstes erstellst du eine index.php Datei in deinem hohoho - du weißt schon - Template Ordner.

Diese Datei haben wir in der templateDetails.xml Datei unter filename erwähnt, also sollten wir diese auch bereitstellen!
Schreibe in die allererste Zeile folgendes:

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

Das ist der Code der Ruprecht davon abhält, die Datei ohne Joomla auszuführen (Sicherheit).
So, und unter diesem obligatorischen Einleitungscode tragen wir zunächst eine sehr simple html Grundstruktur ein (Vergesse nicht, den Pfad der css Datei anzupassen)

<!doctype html> 
<html xml:lang="de" lang="de"> 
<head> 
<!-- Headerangaben --> 
<link rel="stylesheet" href="http://www.deinedomain.de/templates/hohoho/css/template.css" type="text/css" /> 
</head>  
<body> 
<div class="wrapper"> 
<div class="box oben">oben</div> 
<div class="box links">links</div> 
<div class="box inhalt">Hohoho!</div> 
<div class="box rechts">rechts</div> 
<div class="box unten">unten</div> 
</div> 
</body> 
</html>

Passend zu dieser index.php Datei erstellst du nun noch einen Ordner css in deinem Template Ordner und legst dort eine template.css Datei an.
Nachfolgend habe ich ein ganz simples css grid definiert. Kopiere dir die CSS Angaben in deine css Datei rein.

*, *:after, *:before {
    box-sizing: inherit;
}

* {
    margin: 0;
    padding: 0;
    border: 0 none;
    position: relative;
}

html {
    background: #00b4ff; /* Alte Browser */
    background: -moz-radial-gradient(center, ellipse cover, #00b4ff 1%, #0377be 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #00b4ff 1%, #0377be 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #00b4ff 1%, #0377be 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b4ff', endColorstr='#0377be', GradientType=1); /* IE6-9 fallback on horizontal gradient */
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
}

a {
    color: #fff;
    text-decoration: underline;
}

.oben {
    grid-area: oben;
}

.links {
    grid-area: links;
    max-width: 10em;
}

.inhalt {
    grid-area: inhalt;
}

.rechts {
    grid-area: rechts;
    max-width: 10em;
}

.unten {
    grid-area: unten;
}

.wrapper {
    display: grid;
    grid-gap: 4px;
    grid-template-areas: "oben" "links" "inhalt" "rechts" "unten";
    width:1200px;
    margin:0pt auto;
}

.box {
    color: #fff;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.2);
    padding: 10px;
    font-size: 1rem;
}

img {
    max-width: 100%;
}

ul.menu {
    list-style-type:none;
}

@media (min-width: 50em) {
    .wrapper {
        grid-template-columns: auto 2fr auto;
        grid-template-areas: "oben oben oben" "links inhalt rechts" "unten unten unten";
    }
}

Bevor du mir jetzt wegrennst weil ich die brandneue CSS Grid Technik eingesetzt habe:
Du kannst jede Art von CSS und Stiltechnik einsetzen, die du möchtest,
dieses Beispiel dient einfach nur zur schnellen Erklärung.

Speichern wir die Datei zunächst so ab!

So und jetzt packst du diesen hohoho Ordner als Zip Datei und installierst dieses Paket als Template auf deiner Testseite.
Setze anschließend das Template aktiv und gehe auf die Seitenansicht.

Das Ergebnis sollte nun so aussehen:

layout

Fertig!

Ja aber halt halt wirst du sagen, das ist doch noch kein Template! So wird das nichts mit dem Christkind.

Wir müssen das Template noch mit Joomla verbinden und die jeweiligen Joomla Inhalte darin abrufen.
Bearbeite deine index.php Datei nun einfach über FTP, den Template Manager oder falls du das alles sowieso auf deinem Rechner machst, dann lokal.

CSS Stile richtig einbinden.

Statt der Verknüpfung zur .css Datei im Header verwenden wir einen Code im Bereich über der html Ausgabe um die Stylesheet Dateien nach Joomla Manier richtig einzubinden.

Mit dem Befehl:

$this->addStyleSheet('Dateipfad');

wird das Stylesheet eingebunden. Um dynamisch zu bleiben, müssen wir unsere statische Pfadangabe (http://www.deinedomain.de/templates/hohoho/) aus dem Template ersetzen.

<?php echo $this->baseurl ?>

mit $this->baseurl holen wir uns den aktuellen Pfad der Seite.

<?php echo $this->template ?>


Mit $this->template; rufen wir den aktuellen Templatenamen ab. Könnte ja sein dass wir es irgendwann umbenennen wollen.

Einfachheitshalber können wir nun mit

$templatepfad = $this->baseurl . '/templates/' . $this->template;

die Angabe des Pfades in einer neuen Variable speichern und mit unserem addStyleSheet Befehl verbinden.
Wir löschen also die Zeile:

<link rel="stylesheet" href="http://www.deinedomain.de/joomla-cms/templates/hohoho/css/template.css" type="text/css"/>

aus dem <head> und tragen direkt nach defined('_JEXEC') or die; folgendes ein:

$this->addStyleSheet($templatepfad . 'css/template.css');

Jetzt müssen wir dieses Skript aber im Header wieder aufrufen.

Headerangaben laden

Ersetze nun den Kommentar <!-- Headerangaben --> mit folgendem Code:

<jdoc:include type="head" />

Mit dieser Zeile wird Joomla alle wichtigen Headerdaten wie Meta-Angaben etc. in den Head eintragen.
Speichere die Datei ab und lass dir mit den Element Informationen deines Browsers den Quelltext anzeigen.

headerdaten
Du siehst, hier hat sich viel getan!

Was wir jetzt noch machen können, ist es das statische html xml:lang="de" lang="de" umzuschreiben,
so dass es die tatsächliche Sprache der Joomla Seite darstellt. Bei einer einsprachigen Webseite wird es wohl bei "de" bleiben.
Aber wir wollen hier flexibel sein!

Die aktuelle Seitensprache rufst du mit

<?php echo $this->language; ?>

auf.

Dieser Wert gibt die Sprache de-DE zurück wenn es sich um eine deutsche Seite handelt. Da dieser Tag laut http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry so nicht valide ist, müssen wir diesen auf 2 Stellen kürzen.

Lange Rede, kurzer Sinn.

Definieren wir uns einfach eine Variable im Seitenkopf und kürzen die Ausgabe von Joomla auf das, was wir gerne hätten (de)

$langtag = substr($this->language, 0, 2);

Anschließend können wir die Zeile:

<html xml:lang="de" lang="de">

mit

<html xml:lang="<?php echo $langtag; ?>" lang="<?php echo $langtag; ?>">

austauschen und alles ist fein! Wenn du die Seite dann auf englisch betreibst, dann wird hier entsprechend en, statt en-GB ausgegeben.

Jetzt haben wir aber immer noch nicht wirklich Inhalte aus Joomla ausgegeben... das werden wir aber ändern.

<jdoc:include type="modules" name="oben" /> 
<jdoc:include type="modules" name="links" /> 
<jdoc:include type="modules" name="rechts" /> 
<jdoc:include type="modules" name="unten" />

Diese jdoc Befehle rufen unsere Module an der entsprechenden Position auf - Erinnerst du dich? Wir haben diese Positionen in der xml Datei definiert.

<jdoc:include type="message" />

Mit dieser Anweisung werden die Systemmeldungen ausgeben. Sowas wie zum Beispiel:

Benutzer Knecht Ruprecht unbekannt.


...Wie auch immer :)

<jdoc:include type="component" />

Mit diesem Befehl wird der Komponentenbereich ausgegeben. Also dein Beitrag oder deine Komponente.
Tragen wir diese Sachen doch nun an entsprechender Stelle ein.
Aus:

<?php defined('_JEXEC') or die; 
 $templatepfad = $this->baseurl . '/templates/' . $this->template; 
 $this->addStyleSheet($templatepfad . 'css/template.css'); 
 $langtag = substr($this->language, 0, 2); ?>
 
<!doctype html> 
<html xml:lang="<?php echo $langtag; ?>" lang="<?php echo $langtag; ?>"> 
 <head> 
  <jdoc:include type="head" /> 
 </head> 
 <body> 
  <div class="wrapper"> 
   <div class="box oben">oben</div> 
   <div class="box links">links</div> 
   <div class="box inhalt">Hohoho!</div> 
   <div class="box rechts">rechts</div> 
   <div class="box unten">unten</div> 
  </div> 
 </body> 
</html>

wird nun:

<?php defined('_JEXEC') or die;
 $templatepfad = $this->baseurl . '/templates/' . $this->template;
 $this->addStyleSheet($templatepfad . 'css/template.css');
 $langtag = substr($this->language, 0, 2); ?>

<!doctype html>
<html xml:lang="<?php echo $langtag; ?>" lang="<?php echo $langtag; ?>">
<head>
   <jdoc:include type="head"/>
</head>

<body>

 <div class="wrapper">
   <div class="box oben">
      <jdoc:include type="modules" name="oben"/>
   </div>
   <div class="box links">
      <jdoc:include type="modules" name="links"/>
   </div>
   <div class="box inhalt">
      <jdoc:include type="message"/>
      <jdoc:include type="component"/>
   </div>
   <div class="box rechts">
      <jdoc:include type="modules" name="rechts"/>
   </div>
   <div class="box unten">
      <jdoc:include type="modules" name="unten"/>
   </div>
 </div>

</body>
</html>

So, nun ist die Basis unseres Templates fertig! Wenn du nun Inhalte in deinen Modulpositionen und Inhalten veröffentlichst,
sieht das Ganze in etwa so aus.

layout2

Ok eine Schönheit ist es jetzt gerade noch nicht aber ich hoffe du hast die Grundzüge einer Templateerstellung verstanden.

Weitere Ordner wie einen images Ordner, einen scss Ordner, einen js Ordner für Skripte kannst du je nach deinem Bedarf beim Template hinzufügen. Damit diese Ordner mit ihren Inhalten auch installiert werden können, musst du sie in der templateDetails.xml Datei definieren.

Es bietet sich an, für den Bilderordner grundsätzlich den Namen images zu benutzen, für Skripte den Namen js damit man diese Ordner später auch für "Media Overrides" verwenden kann. Mit Media Overrides überschreibst du Stile, Skripte, Bilder die im Media Ordner liegen, mittels Dateien die in deinem Template an entsprechender Stelle liegen.

Schwer war das ja nicht, oder? Morgen geht's dann weiter...