WB Designvorlage erstellen

In den beiden vorigen Kapiteln wurde eine 3-spaltige statische Designvorlage basierend auf dem Floattutorial von Maxdesign vorgestellt. Die statischen Inhalte der Datei index.html wurden bereits durch die WB-Templatefunktionen ersetzt. Um daraus eine funktionstüchtige WB-Designvorlage zu erstellen, sind noch folgende Schritte notwendig.

• Schritt 1: Datei index.html umbenennen
  
• Schritt 2: Datei info.php erstellen
  
• Schritt 3: Installationspaket erstellen
  
• Schritt 4: Designvorlage installieren
  
• Schritt 5: WB-Einstellungen anpassen
  

Schritt 1: index.html umbenennen

Jedes Website Baker Template muss die beiden Dateien index.php und info.php enthalten. Die Datei index.php enthält das Grundgerüst des Templates (HTML Elemente), sowie die WB-Templatefunktionen (PHP Code), um die Datenbankinhalte anzeigen zu können. 

Benenne die im vorigen Abschnitt erstellte index.html Datei (mit den Template Funktionen) in index.php um. Die Dateiendung .php wird benötigt, um den enthaltenen PHP Code ausführen zu können. Die Datei sollte mit einem normalen Texteditor im ANSI Format abgespeichert werden, um den seit 2003 in PHP enthaltenen utf-8 BOM Bug zu vermeiden.

Schritt 2: info.php erstellen

Die Datei info.php enthält neben allgemeinen Informationen wie Templatename, Speicherort, Autor, Lizenz und Kurzbeschreibung noch optionale Angaben über zusätzliche Menüs und Inhaltsblöcke. Erstelle die Textdatei info.php mit einem Texteditor Deiner Wahl und kopiere folgenden Inhalt hinein. 

<?php
$template_directory     = 'mytemplate';
$template_name          = '3-spalten CSS';
$template_version       = '2.6';
$template_platform      = '2.6.x';
$template_author        = 'Christian Sommer';
$template_license       = 'GNU GPL';
$template_description   = 'WB-Template auf Basis des Tutorials von Maxdesign.';

// Definition der Menüelemente (wenn mehr als 1 Menü verwendet wird)
$menu[1]    = 'Hauptnavigation';
$menu[2]    = 'Unternavigation';

// Definition der Inhaltsblöcke (wenn mehr als 1 Block verwendet wird)
$block[1]   = 'Hauptinhalt';
$block[2]   = 'News';
?>

Bitte beachte den PHP Starttag (<?php) und Endtag (?>).

Schritt 3: Installationspacket erstellen

Unsere erste WB-Designvorlage besteht aus insgesamt drei Dateien:

• index.php: Grundgerüst des Templates (HTML) mit integrierten WB-Templatefunktionen
• screen.css: Layout der Designvorlage (Anordung, Farbe, etc.)
• info.php: Angaben zu Speicherort, Autor, Lizenz, sowie zusätzlichen Menüs und Inhaltsblöcken

Um aus diesen Dateien ein funktionsfähiges Installationspaket für WB zu schnüren, müssen diese drei Dateien zu einem komprimierten Zip-Archiv (*.zip) zusammengefasst werden. Für Windows empfiehlt sich dafür das unter GNU-GPL vertriebene Tool 7-zip.

Benutzer des Betriebssystems Unix/Linux können das Kommandozeilen Tool zip verwenden:

zip mytemplate.zip index.php screen.css info.php

Es ist darauf zu achten, dass das erstellte Ziparchiv nur die drei Dateien, nicht aber die Pfadangaben enthält.

Abbildung 1: Richtiges Zipformat enthält keine Angaben unter Pfad!

Abbildung 2: Falsches Zipformat enthält den übergeordneten Pfad!

Schritt 4: Designvorlage installieren

Wurde die Zipdatei wie in Abbildung 1 erstellt, kann die neue Designvorlage über das WB-Backend -> Erweiterungen -> Designvorlagen -> Designvorlagen Installieren installiert werden. 

Die fertige WB-Designvorlage kann als Ziparchiv heruntergeladen werden.

Schritt 5: WB-Einstellungen anpassen

In der Grundinstallation von Website Baker ist die Funktionen zur Anzeige von zusätzlichen Menüs und Inhaltsblöcken deaktiviert. Da unsere Designvorlage aber über zwei Menüs und zwei Inhaltsblöcke verfügt, müssen wir diese Funktion zunächst im Website Baker Backend freischalten.

Mehrere Menüs aktivieren:
Optionen -> Erweiterte Optionen anzeigen -> Mehrere Menüs -> Eingeschaltet

Mehrere Blöcke aktivieren:
Optionen -> Erweiterte Optionen anzeigen -> Blöcke -> Eingeschaltet

Neue Designvorlage als Standarddesignvorlage verwenden:
Um WB mitzuteilen, dass das neue Template als Standarddesignvorlage für neue und bestehende Seiten verwendet werden soll, ist noch folgende Einstellung nötig:
Optionen -> Standardeinstellungen -> Dokumentenvorlage -> 3-spalten CSS

Das Ergebnis unserer Bemühungen sieht dann wie folgt aus.

 
Abbildung 3: Die fertige Website Baker Designvorlage

Copyright (c) 2007 Website Baker Hilfe Team
Text und Bilder dieser Seite unterliegen den Bestimmungen der Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Lizenz. Sie dürfen den Inhalt für nicht kommerzielle Zwecke vervielfältigen und verbreiten, solange dieser unverändert übernommen wird, der Copyright Hinweis bestehen bleibt und ein Link zu http://websitebaker.org angegeben wird.