Joomla! 2.5 (Teil 35): Eigene Templates entwickeln (6)

Die Definition der Parameter in der ‘templateDetails.xml’ ist die eine Sache. Die Parameter sind dann zwar im Backend sichtbar, Auswirkungen auf die Anzeige im Frontend haben sie allerdings nicht. Denn ein entscheidender Aspekt fehlt noch: Die übergebenen Werte der Parameter müssen im Frontend ausgelesen werden. Wie sich das bewerkstelligen lässt, ist Gegenstand dieses Tutorials. Hier erfahrt ihr dann auch, wie ihr über Parameter unterschiedliche/wechselnde CSS-Dateien laden könnt. Wofür das gut sein soll? So könnt ihr über das Backend beispielsweise ein völlig anderes CSS-Layout für euer Template laden. Die dabei verwendete Technik ermöglicht es euch, jeden beliebigen Parameter, der im Backend definiert wurde, im Frontend auszulesen.

Wir empfehlen:
Joomla!-Training

In früheren Joomla!-Versionen musste im Template-Wurzelverzeichnis eine params.ini liegen. Nur dank dieser Datei konnten Parameter-Werte überhaupt ins Frontend übergeben werden. Diese params.ini gibt es jetzt nicht mehr, die Übergabe der Werte funktioniert auch so. Das ist vor allem vor dem Hintergrund sehr angenehm, dass die params.ini aufgrund fehlender Schreibrechte regelmäßig Probleme verursacht hat.

Zugreifen kann man im Frontend auf den Wert eines Parameters über dessen Namen. Achtet dabei unbedingt auf Groß- und Kleinschreibung.

params->get('breite');
?>

Ausgegeben wird der Parameter also über echo $this->params->get('DerName'). Auf diese Weise wird auf die in den einzelnen Template-Stilen verfügbaren Parameter zugegriffen. Im aktuellen Beispiel ist der Name des auszulesenden Parameters also breite. In der templateDetails.xml könnte dessen Definition dann folgendermaßen aussehen:

Entscheidend ist also der in der templateDetails.xml angegebene Wert des name-Attributs.

 

Unterschiedliche CSS-Dateien laden

Parameter werden sehr oft dazu verwendet, unterschiedliche CSS-Dateien zu laden. Das ist bei sehr vielen Templates so gelöst. Meistens, wenn es im Backend Parameter zur Farbauswahl gibt, wird auf diese Möglichkeit zurückgegriffen.

So könnte es im Backend beispielsweise den Parameter Farbe geben.

 

Über diesen Parameter lässt sich der Farbstil des Frontends anpassen. Genau eine solche Anwendung wird in diesem Tutorial umgesetzt. Ausgegangen wird dabei von zwei möglichen Farbstilen.

Blau
Grün

Die blaue Variante sähe folgendermaßen aus:

 

Wird Grün als Farbe gewählt, ergibt sich folgendes Bild:

 

Im aktuellen Beispiel werden übrigens tatsächlich nur die Farben verändert. Ihr könnt die hier beschriebene Technik aber natürlich auch dafür verwenden, völlig unterschiedliche Layouts zu laden. Das könnte dann sogar so weit gehen, dass ihr eine Art kleines Zen Garden (http://csszengarden.com/) erstellt.

Denn auch dort wird im Prinzip nichts anderes gemacht, als CSS-Dateien auszutauschen. Wie gesagt … an dieser Stelle werden ausschließlich Bilder/Farben verändert, es sind aber natürlich auch weiterführende Optionen denkbar.

Um eine solche Anwendung umzusetzen, müsst ihr im aktuellen Fall zwei CSS-Dateien anlegen.

blue.css
green.css

 

Dabei wird davon ausgegangen, dass diese beinahe identisch sind. Es werden lediglich andere Grafiken eingebunden und unterschiedliche Farbdefinitionen verwendet. (Denkt auch hierbei wieder an das Kaskadenprinzip von CSS. Ihr müsst also innerhalb neu geladener Dateien nur solche Anweisungen definieren, die tatsächlich neu sind. Bedenkt außerdem, dass "neuere" Anweisungen "ältere" CSS-Definitionen überschreiben).

Der relevante Bereich der green.css könnte folgendermaßen aussehen:

#corporatelogo {
      background:transparent url('../images/green/firmenlogo.jpg') 
      no-repeat left top;
  }
  #topmen {
      background-color:#00bf7e;
  }
  #toplogo {
      background:transparent url('../images/green/toplogo.jpg') 
      no-repeat left top;
  }
  #mainwrapper {
      background:transparent url('../images/green/bg_main.gif') repeat-y left top;
  }
  #mainwrapper_full {
      background:transparent url('../images/green/bg_main_full.gif') 
      repeat-y left top;
  }

Und hier der relevante Teil der blue.css:

#corporatelogo {
      background:transparent url('../images/blue/firmenlogo.jpg') 
      no-repeat left top;
  }
  #topmen {
      background-color:#0081af;
  }
  #toplogo {
      background:transparent url('../images/blue/toplogo.jpg') 
      no-repeat left top;
  }
  #mainwrapper {
      background:transparent url('../images/blue/bg_main.gif') repeat-y left top;
  }
  #mainwrapper_full {
      background:transparent url('../images/green/bg_main_full.gif') 
      repeat-y left top;
  }

Unterschiede gibt es eigentlich nur in den verschiedenen Farbdefinitionen und den eingebundenen Grafiken.

 

Im nächsten Schritt muss der betreffende Parameter definiert werden. Das geschieht innerhalb der templateDetails.xml. Entscheidende Bedeutung kommt in dieser Datei dem config-Element zu. Im aktuellen Beispiel soll die Auswahl der Farben über Radio-Schaltflächen erfolgen.

 

Wie im vorherigen Tutorial gezeigt, werden solche Formularelemente über den Typ radio definiert.


          
          

Der Name des Parameters wurde auf farbe festgelegt. Als Standardwert wurde blue angegeben. Interessant sind darüber hinaus auch die beiden option-Elemente. Denn darüber wird im Endeffekt die im Frontend anzuwendende Farbe bzw. die zu ladende CSS-Datei bestimmt. Als Werte wurden blue und green angegeben. Die gesamte Definition des Parameters innerhalb der templateDetails.xml sieht folgendermaßen aus:


      
        

Diese Definition genügt bereits, um im Frontend auf den Parameter farbe zugreifen zu können. Damit die index.php schön übersichtlich bleibt, solltet ihr im oberen Bereich dieser Datei eine Variable definieren.

params->get('farbe'); 
?>

Hierdurch wird der übergebene Parameterwert von farbe in der Variablen $farbe gespeichert. Ihr könntet $this->params->get('farbe'); zwar auch direkt verwenden, das würde aber zu unübersichtlich werden. (Vor allem natürlich dann, wenn sehr viele Parameter übergeben werden).

Auf den Wert des Parameters, der aus der templateDetails.xml übergeben wurde, kann nun ganz einfach über den Variablennamen $farbe zugegriffen werden. Um den Wert ins Dokument zu schreiben bzw. um eine Ausgabe zu erreichen, wird der echo-Befehl von PHP verwendet.

baseurl ?>/templates/template ?>/css/.css" type="text/css" />

Der übergebene Wert wird in die link-Definition eingeführt. Legt man im Backend also die Option Grün fest, wird intern der Wert green übergeben. Das link-Element im Backend sieht dann folgendermaßen aus:

Stellt man hingegen Blau ein, sieht das link-Element so aus:

Durch Blau wird also der interne Wert blue übergeben. Achtet hier unbedingt darauf, dass hinter dem übergebenen Farbwert noch ein Punkt mit anschließendem css steht.

.css

Nur so kann im Frontend nämlich ein gültiger Dateiname generiert werden. Mehr ist tatsächlich nicht nötig, um die gewünschte Ausgabe zu erzielen.

Fazit

Das in diesem Tutorial verwendete Beispiel hat gezeigt, wie einfach man im Frontend auf die im Backend definierten Parameter zugreifen kann. Dabei spielt es dann übrigens auch keine Rolle, wie ihr die übergebenen Werte der Parameter letztendlich verwendet. Entscheidend ist lediglich ein Aspekt: Achtet unbedingt darauf, die Werte im Frontend tatsächlich mittels der PHP-Anweisung echo ins Dokument zu schreiben, da diese anderenfalls nicht zur Verfügung stehen.

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