Joomla! 2.5 (Teil 34): Eigene Templates entwickeln (5)

Um Templates möglichst flexibel gestalten zu können, bietet Joomla! die Möglichkeit zur Definition von Parametern. Dank dieser Parameter lassen sich beispielsweise Logos über das Backend ins Template laden, Farben verändern oder Inhalte ausgeben. Dieses Tutorial zeigt, wie ihr Parameter für euer Template definieren und diese dann im Backend benutzen könnt. Dabei hängt dieses Tutorial explizit mit dem nächsten Teil dieser Tutorial-Reihe zusammen. Dort wird dann nämlich beschrieben, wie ihr im Frontend auf die Werte übergebener Parameter zugreifen könnt.

Wir empfehlen:
Joomla!-Training

Mittlerweile bringen eigentlich die meisten Templates Parameter mit. Wenn ihr beispielswiese Erweiterungen>Templates aufruft und im Register Stile auf Beez2 – Default klickt, werden einige Parameter sichtbar.

 

In diesem Template lässt sich mittels Parameter beispielsweise das Logo austauschen, man kann die Template-Farbe bestimmen und der Seitentitel lässt sich frei eintragen.

Wenn ihr hingegen den Namen des bereits vorgestellten Templates jm-0013 anklickt, ergibt sich da ein gänzlich anderes Bild.

 

Auch hier gibt es zwar Parameter, diese haben aber völlig andere Funktionen als die beim Beez-Template. Noch mehr Parameter haben dann übrigens meistens solche Templates zu bieten, die aus Template-Clubs stammen. Dort lässt sich teilweise das gesamte Layout über Parameter steuern. "Gute" Templates ermöglichen dort beispielsweise sogar, die Anzahl der Spalten festzulegen. Wie viele Parameter ein Template letztendlich aufweist, kann jeder Template-Entwickler selbst festlegen.

In diesem Tutorial wird zunächst gezeigt, wie ihr innerhalb der templateDetails.xml Parameter definieren könnt, die dann im Backend angezeigt werden. Damit die Parameter im Frontend genutzt werden können, muss man die übergebenen Parameterwerte natürlich auch auslesen können. Dazu dann im nächsten Tutorial mehr.

Parameter definieren

Definiert werden die Parameter innerhalb der euch bereits bekannten templateDetails.xml. Fügt in diese Datei ein config-Element ein.


 ...

Achtet dabei unbedingt darauf, dass das config-Element innerhalb des Wurzelements extensions steht.






Weiter geht es mit einem fields-Element. Fügt diesem das name-Attribut mit dem Wert params hinzu. Diese Definition steht innerhalb des config-Elements


...

 

Eine solche Definition bewirkt im Backend der Seite die Anzeige der Basisoptionen. Darin sind für gewöhnlich die Standard-Parameter hinterlegt.

 

Wenn ihr euch einige Templates anseht, werden ihr dort oft den Bereich Erweiterte Optionen sehen.

 

Einen solchen Bereich könnt ihr in eurem Template definieren. Auch dabei wird ein fieldset-Element verwendet. Dieses Mal muss dessen name-Attribut allerdings der Wert advanced zugewiesen werden.

..

Eine Parameter-Definition, in der Basis und Erweiterte Optionen verwendet werden, sähe demnach folgendermaßen aus:

...
...

Eine Vorgabe, welche Parameter nun in die Basisoptionen und welche in die Erweiterten Optionen gehören, gibt es übrigens nicht. Bei dieser Aufteilung habt ihr also völlig freie Hand. Üblicherweise packt man aber die Parameter, die für eine vernünftige Anzeige der Seite im Frontend notwendig sind, in die Basisoptionen.

Damit steht das äußere Gerüst der Parameter. Was jetzt noch fehlt, sind die eigentlichen Parameter. Definiert werden Parameter über field-Elemente. Um euch zunächst einen allgemeinen Eindruck davon zu vermitteln, wie sich die Struktur einer Parameter-Definition in der Praxis darstellt, seht euch zunächst folgendes Beispiel an:


  
     
...
... fieldset>

 

Jeder Parameter wird über ein eigenes field-Element definiert. Über das name-Attribut wird dem Parameter ein Name zugewiesen. Achtet darauf, dass dieser Name eindeutig sein muss. Ihr könnt ihn innerhalb einer templateDetails.xml also nur einmal verwenden.

Mit dem type-Attribut gibt man die Art des Parameters an. Sehr oft wird hier beispielsweise text verwendet. Das bewirkt die Anzeige eines Textfeldes.

 

Einen Standardwert für den Parameter kann man über das default-Attribut festlegen. Durch die beiden Attribute label und description wird der Parameter beschrieben. Die entsprechenden Werte sind im Backend im Parameterbereich zu sehen.

Das bislang gezeigte Textfeld stellt die einfachste Variante dar. Dem Textfeld können nämlich tatsächlich weitere Attribute zugewiesen werden. Das sind beispielsweise size, filter, autocomplete, class und required. Mit size gibt man die Anzahl der Zeichen an, die maximal in das Textfeld eingetragen werden dürfen.

Ob es für das Feld eine Autovervollständigung geben soll, lässt sich über das Attribut autocomplete bestimmen. Das Attribut kennt zwei mögliche Werte:

on – Autovervollständigung erlauben
off – Autovervollständigung verbieten

 

Interessant ist auch das class-Attribut. Diesem Attribut können die folgenden Werte zugewiesen werden:

validate-email – überprüft, ob es sich um eine syntaktisch korrekte E-Mail-Adresse handelt.
validate-numeric – in diesem Feld dürfen ausschließlich numerische Angaben stehen.
validate-password – es wird überprüft, ob es sich um ein gültiges Passwort handelt.
validate-user­name – hierüber kann getestet werden, ob es sich um einen gültigen Benutzernamen handelt

Weitere Feldtypen

Nun ist text natürlich längst nicht der einzig mögliche Wert von type. So könnt ihr beispielsweise über usergroup eine Liste aller vorhandenen Benutzergruppen ausgeben.

 

Eine entsprechende Definition sähe folgendermaßen aus:

Dem type-Attribut wird in diesem Fall der Wert usergroup zugewiesen. Ein sehr oft benötigter Feldtyp ist Radio. Ihr kennt diese Radio-Button vom klassischen HTML her.

 

Und so etwas lässt sich auch im Backend als Parameter verwenden. Sinnvoll sind die Radio-Buttons beispielsweise immer dann, wenn Ja/Nein-Entscheidungen getroffen werden sollen. So könnte man zum Beispiel einen Copyright-Parameter definieren. Über den lässt sich dann festlegen, ob die zum Template gehörenden Copyright-Informationen im Frontend angezeigt werden sollen. Eine entsprechende Definition sähe folgendermaßen aus:


    
     
  

Viele Templates bieten die Möglichkeit, Logos über das Backend auszutauschen.

 

Für Anwender ist das natürlich ideal, schließlich können sie so Bilder wechseln, ohne in den Quellcode des Templates eingreifen zu müssen. Um ein solches Bildauswahlfeld anzubieten, wird der Typ media verwendet.

Durch media wird die bekannte Auswählen-Schaltfläche angezeigt. Klickt man diese an, öffnet das den Medienbereich von Joomla!.

Darüber kann dann das gewünschte Bild ausgewählt werden.

Wir empfehlen:
Dreamweaver-Video-Training

Unsere Empfehlung für dich

Joomla! für Einsteiger und Aufsteiger

Joomla! für Einsteiger und Aufsteiger

Was liegt wo und ist wie, mit welchem Inhalt verknüpft?! Nach diesem Kurs ist das keine Frage mehr! Mit Joomla! erstellst du Webseiten und behältst deren Inhalte jederzeit im kontrollierenden und koordinierenden Blick.

  • 28 Lektionen in über fünf Stunden Video-Training zum praktischen Umgang mit Joomla!
  • Lerne das CMS von Grund auf kennen und verwalte damit deine redaktionellen Webseiten-Inhalte
  • Praxisnah lernen: inklusive Arbeitsmaterialien zum Mitmachen und Nachvollziehen
  • Auf dem neuesten Stand: Optimiert für die aktuelle Joomla!-Version 3.6

Zum Training