Integration von Templates

Version 1.7.1

1 Einführung

1.1 Ziel

In dieser Dokumentation zeigen wir Ihnen, wie Sie Ihr eigenes individuelles Design in das Simploo CMS integrieren können. Als Beispiel wollen wir folgende Skizze als Template umsetzen:


Bereiche im Template

  1. Header-Bereich mit einem, über die Seiteneigenschaften austauschbarem, Hintergrundbild
  2. Zusätzliche Navigation, wie z.B. Startseite, Impressum oder Kontakt
  3. Hauptnavigation (horizontal)
  4. Subnavigation (vertikal)
  5. Inhaltsbereich mit klickbarem Seitenpfad (Breadcrumb) am oberen Rand
  6. Suche
  7. Auslesen von bestimmten Inhaltselementen, z.B. den Top-News der Seite

 

 

Doch bevor wir uns an den praktischen Teil machen, zuerst noch ein paar kleine theoretischen Grundlage zur Template-Verarbeitung im Simploo CMS.

1.2 Struktur

1.2.1 Ordnerstruktur

Jedes Design kann verschiedene Templates aufweisen. Fast jedes eigenständiges Design dürfte ein Rahmenlayout pagelayout.phtml als Template definiert haben, in dem wiederum weitere Templates (z.B. Navigation, Inhalt,...) eingebunden werden. Alle Templates in einem Design werden in einem Design-Ordner zusammengefasst - diese Designordner finden Sie unter templates/frontend.

In diesem Verzeichnis befinden sich unterschiedliche Designordern. Die Ordner sicore und sibase gehören dabei zum Umfang des Simploo CMS und enthalten verschiedene Standard-Templates zur Anzeige von beispielweise Navigationsmenüs oder Fehlermeldungen.

1.2.2 Aktivierung von Designordnern

Nach der Installation des Simploo CMS ist standardmäßig der Designordner sibase aktiviert. Eigene oder über den Online-Pool heruntergeladene Designs können über verschiedene Arten aktiviert werden.

Manuell über Konfigurationsdatei

Setzen Sie den gewünschten Designordner in der custom/frontend.ini.php in der Variable layout. Damit wird der Designordner global für Ihren kompletten Internetauftritt aktiviert.

Über den Administrationsbereich

Dasselbe Ergebnis erhalten Sie, wenn Sie den Designordner im Administrationsbereich unter Design->IHR DESIGNORDNER->Als Standard aktivieren aktivieren.

 

 

 

 

Für eine spezielle Webseite

Zusätzlich zu einem globalen Design können Sie auch für eine einzelne Webseite (inklusive Unterseiten) einen spezielle Designordner aktiveren. Gehen Sie dazu im Administrationsbereich unter Seiten auf die Eigenschaften der gewünschten Webseite. Ziehen Sie dann im Reiter Design den gewünschten Designordner per Drag’n Drop in das Feld Template oder wählen ihn über das Ordner-Symbol aus.

1.2.3 Aufbau der Designordner

Jeder Designordner kann Templates, CSS-Dateien, Bilder und andere Ressourcen enthalten. Alle Templates verfügen über die Endung .phtml und enthalten normalen HTML- und/oder PHP-Code.

Konfigurationsdatei config.ini.php

In der config.ini.php werden grundlegende Eigenschaften des Templates definiert. Diese Konfigurationsdatei ist optional und benötigt im Minimalfall folgende Angaben:

name          = TEMPLATE_NAME
author = TEMPLATE_ERSTELLER
description = BESCHREIBUNG
deletable = true/false

Die ersten drei Variablen sind selbsterklärend, die letzte deletable definiert, ob der Designordner über den Administrationsbereich gelöscht werden kann. Sollten Sie beispielsweise als Agentur ein individuelles Design für einen Kunden umgesetzt haben, empfiehlt es sich die Löschoption zu deaktivieren.

Beachten Sie bitte, dass nur Designordner mit einer Konfigurationsdatei über den Administrationsbereich oder für eine spezielle Webseite aktiviert werden können. Ohne eine Konfigurationsdatei kann ein Designordner nur manuell aktiviert werden.

Rahmenlayout pagelayout.phtml

Jeder Designordner kann ein eigenes Rahmenlayout zur Verfügung stellen. Dieses Rahmenlayout wird über das Template pagelayout.phtml gesteuert. In diesem wird die Struktur und der grundlegende Aufbau des Dokumentes definiert und gegebenenfalls weitere Templates eingebunden. Sollten Sie ein komplettes neues Design erstellen, sollte Ihr Designordner natürlich auch ein Rahmenlayout zur Verfügung stellen.

Es kann aber auch Fälle geben, in denen ein eigenes Rahmenlayout nicht benötigt wird. Zum Beispiel könnten Sie einen Designordner erstellen, der beispielsweise nur ein modifiziertes Template für das Navigationsmenü zur Verfügung stellt.

Sonstige Ordner und Dateien

Benötigen Sie für ein Design weitere Ressourcen wie Javascript-Dateien oder Bilder, so können Sie diese nach Belieben in Ihrem Designordner strukturieren und ablegen. Es empfiehlt sich aber eigene Ordner mit einem vorangestellten Unterstrich "_" zu versehen. So können diese auf einen Blick von eventuell überschriebenen Template-Ordnern des Simploo CMS unterschieden werden.

1.3 System-Templates anpassen und Fallback-System

Wird bei der Ausgabe einer Webseite ein Template angefragt, so wird folgende Abfragereihenfolge vom Simploo CMS durchlaufen. Als Beispiel nehmen wir den eigentlichen Aufruf der Webseite und damit verbunden die Ausgabe des Rahmenlayouts pagelayout.phtml:

  1. Im ersten Schritt wird überprüft, ob für die entsprechende Webseite ein spezieller Designordner ausgewählt wurde. Ist dies der Fall und in diesem Designordner befindet sich eine Datei namens pagelayout.phtml, wird diese geladen und angezeigt.
  2. Danach wird ermittelt welcher globaler Designorder für die Webseiten definiert wurde. Enthält dieser Designordner dieDatei pagelayout.phtml, wird diese entsprechend geladen und angezeigt.
  3. Sollte in beiden vorherigen Fällen keine entsprechende Template-Datei gefunden worden sein, so wird das entsprechende Template aus dem Designordner sibase geladen und angezeigt.
  4. Sollte auch im sibase-Designordner kein entsprechendes Template vorhanden sein, so wird das Template aus dem Designordner sicore geladen und angezeigt.
Trifft keine der vier Fällen zu, wird eine entsprechende Fehlermeldung ausgegeben.

Der ganze Ablauf gilt analog für jedes andere angefragte Template. Im Umkehrschluss bedeutet das, dass Sie alle vom Simploo CMS mitgelieferten Templates in den Ordner sibase und sicore in Ihren eigenen Designordnern überschreiben können. Kopieren Sie dazu am besten einfach das gewünschte Template mit der gleichen Verzeichnisstruktur in Ihren Designordner.

Wenn Sie beispielsweise das Template für die Navigationsmenüs modifizieren wollen, kopieren Sie die Datei

  • templates/frontend/sicore/navigation/menu.phtml

nach

  • templates/frontend/IHR_DESIGNORDNER/navigation/menu.phtml

1.4 Verschiedene Seitenansichten

Standardmäßig wird als Rahmenlayout die Datei pagelayout.phtml verwendet. In dieser haben Sie normalerweise die normale HTML-Ausgabe der Seite vorbereitet. Es kann aber natürlich vorkommen, dass Sie alternative Rahmenlayouts verwenden möchten, z.B.:

  • reine Textausgabe
  • Inhalt als PDF-Datei
  • Ausblenden von Navigationen
  • ...

Solche alternativen Rahmenlayouts erstellen Sie mit folgendem Namensschema in Ihrem Designordner

  • templates/frontend/IHR_DESIGNORDNER/pagelayout-IHRFORMAT.phtml

Diese alternativen Seitenansichten können dann wie folgt über den Browser abgerufen werden:

  • www.ihre-domain.de/index.php/wir-ueber-uns/[format]IHRFORMAT

2 Individuelles Design erstellen

In diesem Kapitel wollen wir das skizierte Layout aus dem ersten Kapitel praktisch umsetzen und in das Simploo CMS integrieren. Um die Übersichtlichkeit nicht zu verlieren, verzichten wir allerdings darauf weiterführende Details wie zum Beispiel CSS-Formatierungen des Templates darzustellen.

2.1 Erste Schritte

Zuerst einmal müssen wir uns einen neuen Designordner erstellen. Da es sich hierbei um eine Demonstration handelt, nennen wir diesen Designordner also sinnigerweise demo:

  • templates/frontend/demo

In diesem Designordner erstellen wir uns, neben zwei Ordnern für Bilder und CSS-Dateien (_img und _css), noch eine kleine Konfigurationsdatei config.ini.php mit folgendem Inhalt:

name          = Demonstrations-Template
author = Simploo GmbH
deletable = false

Als letzten Schritt erstellen wir in diesem Ordner noch eine Datei pagelayout.phtml für das Rahmenlayout mit folgendem Inhalt:

<?php echo $this->doctype();?>
<html
<head>
<title><?php echo $this->page->browsertitle->value();?></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<?php echo $this->render('header/simploo.phtml');?>
<?php echo $this->render('header/metatags.phtml');?>
<link rel="stylesheet" type="text/css" media="screen"
href="<?php echo $this->layout('_css/main.css');?>" />
</head>
<body>
<h1>Hallo Demonstrations-Template</h1>
</body>
</html>

Sobald Sie diesen Designordner aktiviert haben, müsste der Text "Hallo, Demonstrations-Template" beim Aufruf Ihrer Webseite im Browser erscheinen.

In diesem Grund-Template sehen wir auch gleich die ersten Beispiele für PHP-Systemaufrufe. In der ersten Zeile binden wir die entsprechenden Doctype-Angaben ein. In der vierten Zeile geben wir den aktuellen Browsertitel der Seite über das Seitenobjekt aus und in den darauffolgenden Zeilen binden wir noch zwei System-Templates ein. Das erste sorgt für die korrekte Darstellung des Administrationsbereiches nach dem Login und wird zwingend benötigt. Im zweiten Template werden die entsprechend auf der jeweiligen Seite gesetzten Metatags ausgegeben.

In der siebten Zeile binden wir noch eine CSS-Datei für die Darstellung ein. Über den View Helfer (mehr dazu in der Zend Framework Dokumentation) $this->layout() stellen wir sicher, dass die Datei aus unserem Designordner immer mit dem richtigen Pfad ausgegeben und verlinkt wird. Generell sollten Sie alle Verlinkungen zu Layout-Dateien in einem der Designordner über diese Methode ausgeben. Die Ausgabe des Dateiverlinkung folgt dabei auch dem Fallback-Mechanismus.

2.2 Das Rahmenlayout

Der so erstellte HTML-Code hat dabei allerdings wenig mit unserem skizzierten Layout zu tun. Daher ändern Sie den Quellcode in der Datei pagelayout.phtml wie folgt ab:

...
<body>
<div id="header"></div>
<div id="navigation"></div>
<div id="main">
<div id="subnvaigation"></div>
<div id="content"></div>
<div id="news"></div>
</div>
</body>
...

Mit diesem HTML-Quellcode können wir unser skizziertes Layout umsetzen. Die div-Container header, navigation und main bekommen dabei eine feste Breite und werden horizontal mittig zentriert. Die Container subnavigation, content und service erhalten ein float:left. Alle weiteren CSS-Formatierungen werden für Sie sicherlich kein Problem mehr darstellen.

In den folgenden Kapiteln werden wir dieses HTML-Grundgerüst nun Schritt für Schritt mit Leben füllen.

2.3 Header-Bereich mit Seitenbild

In unserem header-Container wollen wir ein über die Seiteneigenschaften austauschbares Hintergrundbild und eine zusätzliche Navigation mit wichtigen Links zu Seiten wie Impressum oder Kontakt ausgeben.

Zusätzliche Navigation

Um diese Navigation auszugeben, ergänzen wir das Template um folgenden Code:

<div id="header">
<?php echo $this->menu()->getByTag('header); ?>
</div>

Wir rufen den View Helfer für Navigationsmenüs auf und übergeben eine Option, dass nur Links von Seiten mit dem Tag header ausgegeben werden sollen. So können Sie über die Seiteneigenschaften (Allgemein->Tags) steuern, welche Seiten in diesem Menü verlinkt werden sollen.

Austauschbares Hintergrundbild einfügen

Um ein austauschbares Hintergrundbild einzubinden, sind mehrere Schritte notwendig. Zuerst einmal müssen Sie die Datenbank um ein entsprechendes Feld erweitern:

ALTER  TABLE  `si_nodes`  ADD  `cust_headerimage` VARCHAR( 255  )  NOT  NULL ;

Damit dieses neue Feld auch geladen wird, müssen Sie den Namen dem Simploo CMS entsprechend mitteilen. Ergänzen Sie dazu die Konfigurationsdatei config/custom/base.ini.php um folgenden Eintrag:

[database]
tables.si_nodes.fields = "cust_headerimage"

Mit einem letzten Eintrag in der Datei config/custom/nodes.ini.php können Sie das neue Datenbankfeld bereits in Ihrem Simploo CMS nutzen:

properties.cust_headerimage.type = Sicore_Models_Node_Property_File
properties.cust_headerimage.options.multi = false
properties.cust_headerimage.options.rootline = true
properties.cust_headerimage.form.type = Simploo_JQuery_Form_Element_Drop
properties.cust_headerimage.form.dropzone = Sicore_Models_FSO_File_Image
properties.cust_headerimage.form.multi = false

subforms.design.fields = template,contentelements,pagesize,cust_headerimage

Mit den vorangegangen Einstellungen können Sie nun zu jeder Seite per Drag’n Drop oder über das Ordnersymbol zum entsprechend Feld in den Seiteneigenschaften ein Hintergrundbild zuordnen. Dieses Hintergrundbild wird dabei in diesem Beispiel über die Option rootline = true auf alleUnterseiten vererbt und kann mit folgendem Beispielcode im Template ausgegeben werden:

<div id="header" style="background-image:url('
<?php echo $this->linkfile($this->page->cust_headerimage->value(), 'header');?>');">
<?php echo $this->menu()->getByTag('header); ?>
</div>

Über den View-Helper linkfile geben Sie anhand der in der Datenbank abgespeicherten Bild-UID den korrekten Bildpfad aus und setzen das Bild im Beispiel als Hintergrund. Das Simploo CMS speichert Bilder dabei beim Upload in unterschiedlichen, frei einstellbaren Größen ab. Über den zweiten Parameter (in diesem Beispiel header) geben Sie an, welche Bildgröße ausgeben werden soll. Die Bildgrößen können Sie in der Konfigurationsdatei config/custom/base.ini.php definieren.

Mehr zu den Bildgrößen finden Sie auch in unserem Forum unter http://forum.simploo.de.
Suchen Sie dort einfach nach dem Begriff "Bildergrößen anpassen".

2.4 Navigation einbinden

Die Navigationsmenüs werden über den View-Helper menu eingebunden. Standardmäßig wird für die Darstellung das Template navigation/menu.phtml im Designordner sicore verwendet. Sollten Sie eine abweichende Darstellung benötigen, können Sie dieses Template entsprechend in Ihrem eigenen Designordner überschreiben. Zusätzlich kann als Parameter noch ein alternatives Template angegeben werden.

2.4.1 Hauptnavigation

Die Hauptnavigation soll im navigation-Container erscheinen und wird über folgenden Aufruf dargestellt:

<div id="navigation">
<?php echo $this->menu()->setLevel(1)->setDepth(1)->excludeTags(array('header')); ?>
</div>

Ausgegeben werden sollen die Seiten der ersten Ebene, ohne Unterseiten. Außerdem sollen Seiten, die bereits in der Header-Navigation aufgelistet sind, in der Hauptnavigation nicht ausgegeben werden.

2.4.2 Subnavigation

Der Aufruf der Subnavigation ähnelt dem der Haupnavigation mit zwei Änderungen. Angezeigt werden sollen hier nur die Seiten der zweiten und dritten Ebene.

<div id="subnavigation">
<?php echo $this->menu()->setLevel(2)->setDepth(2); ?>
</div>

2.5 Inhalt einbinden

Das Einbinden des eigentlichen Inhaltes ist mit dem View Helfer $this->content() in einer Zeile PHP-Code erledigt. Das ganze erweitern wir noch über den View Helfer $this->rootline() mit einem klickbaren Seitenpfad, der es dem Besucher ermöglicht auf die übergeordneten Seiten zurückzuspringen:

<div id="content">
<?php echo $this->rootline();?>
<?php echo $this->content(); ?>
</div>

2.6 Suche einbinden

Die Suche kann ebenfalls über eine Zeile PHP-Code ausgegeben werden. Als View-Helper dient $this->searchform(), der standardmäßig das Template search/form.phtml lädt. Sollte eine andere Darstellung gefordert sein, so können Sie auch dieses Template entsprechend in Ihrem eigenen Designordner überschreiben. Zusätzlich besteht wieder die Möglichkeit ein alternatives Template als Parameter zu übergeben.

<div id="news">
<?php echo $this->searchform(); ?>
</div>

Die Ergebnisliste wird bei einer erfolgreichen Suche auf der jeweils aktuellen Seite anstatt des Inhaltes geladen. Sollen diese Suchergebnisse nicht auf der aktuellen Seite dargestellt werden, kann die gewünschte Zielseite in der Konfigurationsdatei config/custom/frontend.ini.php angeben werden:

[search]
result.page = UID_DER_ERGEBNISSEITE

2.7 Auslesen von Topnews

Als letzte Anforderung an unser Design ist noch das Auslesen und Einbinden der letzten drei Neuigkeiten aus unserer Webseiten gegeben. Prinzipiell können in einem Template zusätzlich zum normalen Inhalten beliebige Inhaltselemente von anderen Seiten ausgelesen werden. Hierzu steht uns der View-Helfer $this->fetchContent() zur Verfügung. In unserem Beispiel wollen wir die letzten drei Neuigkeiten auslesen, dazu ergänzen wir unser Rahmenlayout um folgenden Code:

<div id="news"><?php 
echo $this->searchform();
//News auslesen
$data = $this->fetchContent('news', 3, 'added DESC');
foreach($data as $news):?>
<h2><?php echo $news->text1->value();?></h2>
<p>
<?php echo $news->text2->value();?>
<a href="<?php echo $this->link($news);?>">weiterlesen</a>
</p>
</div>

Über den View-Helfer $this->fetchContent() laden wir uns die entsprechenden Inhaltselemente mit folgenden Parametern in die Variable $data:

  1. Als ersten Paramenter definieren wir die auszulesenden Objekte, in diesem Beispiel also news. Die verfügbaren Objekte entnehmen Sie bitte der Konfigurationsdatei config/system/content.ini.php und dort jeweils die Gruppennamen [OBJEKT_XYZ].
  2. Als zweiten Parameter legen wir die maximale Anzahl an auszulesenden Objekten, in diesem Beispiel drei, fest (vergleiche SQL-Befehl: LIMIT 3).
  3. Als dritten Parameter bestimmen wir die Sortierung. In SQL-Syntax können Sie hier die entsprechenden Datenbankfelder aus der Tabelle si_nodes angeben.

Nach dem Auslesen werden die Datensätze durchlaufen und die gewünschten Eigenschaften ausgegeben. Die news-Eigenschaft text1 repräsentiert dabei die News-Überschrift und text2 steht für den Einleitungstext. Die verfügbaren Eigenschaften erhalten Sie ebenfalls aus der Datei config/system/content.ini.php.

Mehr zum View-Helper "fetchContent()" erfahren Sie auch in der Template-Referenz.

3 System-Templates erweitern

Alle Templates in den Standard-Designordnern sibase und sicore können nach eigenem Bedarf überschrieben und angepasst werden. Erstellen Sie dazu einfach in Ihrem eigenen Designordner ein Template mit dem entsprechenden Namen und in der vorgegebenen Verzeichnisstruktur.

4 Erweiterungen

4.1 Externe Skripte einbinden

4.1.1 Direkt im Template

Externe Skripte oder externen PHP-Code können Sie natürlich direkt im Template integrieren - zum Beispiel das Auslesen eines RSS-Feeds. Beachten Sie in diesem Beispiel auch die Möglichkeiten, die Ihnen das Zend Framework bereits bietet:

<div id="rss"><?php
$channel = new Zend_Feed_Rss('http://rss.example.com/channelName');
foreach ($channel as $item) {
echo $item->title() . "<br/>";
}
</div>

4.1.2 Über einen View Helfer

Alternativ können Sie externe Skripte auch in sogenannte View-Helfer auslagern. Dazu müssen Sie im Ordner application/Sifront/Views/Helpers/ eine Datei mit dem Namen Rss.php und folgendem beispielhaften Inhalt erstellen:

class Sifront_Views_Helpers_Rssextends Zend_View_Helper_Abstract
{
public function($channel)
{
$channel = new Zend_Feed_Rss($channel);

$text = '';
foreach ($channel as $item) {
$text .= $item->title() . "<br/>";
}

return $text;
}
}

Natürlich können Sie innerhalb des View-Helfers auch auf Templates zurückgreifen, lesen Sie dazu mehr im Online-Handbuch des Zend Frameworks. In Ihrem Template verwenden Sie den erstellen View-Helfer, mit dem gleichen Ergebnis wie oben, wie folgt.

<div id="rss">
<?php echo $this->rss('http://rss.example.com/channelName');?>
</div>
Bei umfangreicherem Code, oder bei Funktionalitäten die an mehreren Stellen benötigt werden, ist der Weg über View-Helfer grundsätzlich vozuziehen. View-Helfer können auch in eigenen Modulen ausgelagert werden.