WebsiteBaker ist ein  Web Content Management System unter einer freien Open-Source-Lizenz. Content Management Systeme (CMS) ermöglichen die einfache Pflege einer Website auch durch technisch weniger versierte Autoren. Mit Zusatzmodulen wie z.B. einer Bildergalerie oder Kontaktformular kann das CMS an die jeweiligen Bedürfnisse angepasst werden. Dieser Artikel mit Videotutorial beschreibt, wie man mit wenigen Schritten ein eigenes Template für WebsiteBaker erstellt. Als Grundlage dient hier eine vorhandene statische XHTML-Seite, die Stück für Stück zum Template umfunktioniert wird.

Ein eigenes Template erstellen

Hinweis: Dieses Tutorial wurde unter Verwendung von WebsiteBaker Version 2.6.7 aufgezeichnet. Nach meinem Kenntnisstand funktioniert diese Form der Templateerstellung bis einschliesslich Version 2.8.x (aktuelle Version zum Stand 25.05.2010). Lediglich für die Ausgabe des Menüs sollte nicht mehr show_menu() sondern show_menu2() verwendet werden. Diese verbesserte Variante der Menü-Funktion ist erst seit Version 2.7 Bestandteil des Website-Baker-Cores und konnte daher bei der Erstellung dieses Tutorials nicht berücksichtig werden. Sollten im weiteren Versionsverlauf größere Änderungen auftreten, werde ich vielleicht ein neues Tutorial aufnehmen.

Video-Tutorial Teil 1/2

Video-Tutorial Teil 2/2

In diesem Tutorial möchte ich zeigen, wie man ein eigenes Template für das kostenfreie Content Management System „WebsiteBaker“ erstellt. Grundlage hierfür wird eine bereits bestehende, statische (X)HTML-Seite sein.

Ich verwende für dieses Tutorial „WebsiteBaker 2.7“, welches Ende April 2008 als finale Version veröffentlicht wurde. WebsiteBaker ist kostenlos und kann unter www.websitebaker.org heruntergeladen werden. Version 2.7 ist die letzte Version der 2.x-Reihe – Websitebaker 3 ist bereits in Arbeit, wird sich jedoch grundlegend von den 2.x-Versionen unterscheiden.

Zum editieren meiner HTML- & PHP-Seiten nutze ich den kostenlosen „Komodo Edit“ von Activstate. Der leistungsstarke Editor ist für Windows XP & Vista, Mac OS X sowie für diverse Linux-Versionen verfügbar und kann nach kurzer Registrierung herunter geladen werden.

Vorbereitungen

Zum Testen des Templates empfiehlt sich ein lokaler Testserver. Wie man WebsiteBaker auf einem Windows-PC oder Mac zum installiert, habe ich im Tutorial „WebsiteBaker installieren“ bereits beschrieben.
Die lokale Version des CMS erlaubt es, während der Entwicklung Änderungen direkt an den Template-Dateien vorzunehmen ohne diese immer erst neu zu verpacken und via Backend zu installieren. Mehr dazu später.

Desweiteren sollte mindestens eine Seite und ein Menüpunkt angelegt sein um später deren korrekte Ausgabe im  eigenen Template testen zu können.

Außerdem sollte im Backend unter „Optionen“ die Einträge für „Seitenbeschreibung“ und „Schlüsselwörter“ hinterlegt sein. Alternativ können auch unter „Seite“ –> „Optionen“ (das Notizblock-Symbol) eine „Seitenbeschreibung“ sowie „Schlüsselwörter“ für jede einzelne Seite definiert werden.

Der Aufbau eines WebsiteBaker-Templates

Die Templates (in WebsiteBaker „Designvorlagen“ genannt) werden als ZIP-Datei über das Backend installiert. 
Diese ZIP-Datei muss mindestens folgende zwei Dateien enthalten:

• info.php
  Enthält Informationen über das Template welche WebsiteBaker bei dessen Installation benötigt: Zielverzeichnis ($template_directory), Templatename ($template_name), Version des Templates ($template_version), für welche Version des WB-Template entwickelt wurde ($template_platform), Name des Autors ($template_author), Lizenztyp ($template_license) und schliesslich noch die Beschreibung des Templates ($template_description)
• index.php
  Das eigentliche Template – eine (X)HTML-Seite mit Platzhaltern für die Ausgaben des CMS

Im Regelfall werden für das Layout einer Website zudem noch eine Reihe weiterer Dateien benötig: Bild-Dateien und mindestens ein Stylesheet (CSS). Diese müssen sich ebenfalls in der ZIP-Datei befinden.

Wie man nun eine solche ZIP-Datei für WebsiteBaker schnürt und wo man die nötigen Platzhalter für die CMS-Ausgaben einfügt – darum soll es jetzt gehen.

Das Rohmaterial: eine statische XHTML-Seite

In den meisten fällen gibt es bereits ein statische Version der eigenen Website, die nun für das Websitebaker  CMS nutzbar gemacht werden soll. Und das ist – meiner Meinung nach – eine der größten Stärken von WebsiteBaker: Bestehende Internetauftritte lassen sich unter Beibehaltung der gewohnten Optik mit wenigen Handriffen für die Verwendung mit dem CMS aufarbeiten.
Falls noch keine statische (X)HTML-Seite existiert, kann man für den Anfang auch von kostenlosen Vorlagen gebrauch machen. Jedoch sind dort die Nutzungsbedingungen und Lizenzen zu beachten!

Meine statische (Demo)-XHTML-Seite sieht so aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" href="layout/screen.css" rel="stylesheet" media="screen" />
<title>Meine Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Beschreibung" />
<meta name="keywords" content="Keywords" />
</head>
<body>
<div id="container">
    <div id="banner" >
      <div id="headimage">
          <h1 class="invisible">Websitename hier</h1>
      </div>
      <h2>Seitenname</h2>
    </div>
<div id="left">
    <ul>
          <li><a href="#">Mein Blog</a></li>
          <li><a href="#">Zur Person</a></li>
          <li><a href="#">Bilder</a></li>
          <li><a href="#">Impressum</a></li>
    </ul>
        <pre> </pre>
</div>
    <div id="content">
        <h1>Eine H1 Headline</h1>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd 

[...]

voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <h2>Eine H2 Headline</h2>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd 

[...]

voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
           <h3>Eine H3 Headline</h3>
         <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd 

[...]

voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
  </div>
     <div id="footer"></div>
</div>
</body>
</html>

• Seitentitel
• Zeichensatz
• Seitenbeschreibung
• Schlüsselwörter
• Menü
• Inhalt (Text + sonstige Medien)

Für die Angabe des Pfades zum Stylesheet werden wird zudem den Pfad zum Template vom CMS abfragen. Desweiteren werden wir in diesem Beispiel noch den Website-Namen abrufen (unter „Optionen“ hinterlegt).

Statische Einträge durch Platzhalter ersetzen

Als Vorlage für die Platzhalter verwenden wir das mitgelieferte Template „Simple“ ([WB]/templates/simple/index.php). Dies erzeugt eine HTML-Seite ohne grafischen Schnickschnack und eignet sich daher hervorragend zum verstehen und übernehmen der WebsiteBaker-PHP-Schnipsel. Anders als andere CM-Systeme verwendet WebsiteBaker (bis einschliesslich Version 2.7.x) nämlich einfaches PHP anstelle einer eigenen Templatesprache. Man muss PHP nicht können und nicht verstehen – einfaches Copy&Paste reicht für das Anlegen des eigenen Templates in der Regel aus:

Obligatorische Start-Funktion (ab Zeile 1)

Jedes Template sollte in Zeile 1 mit folgenden Aufruf beginnen:

<?php
if(!defined('WB_URL')) {
header('Location: ../index.php');
exit(0);
}
?>

Damit verhindert man, dass das Template später allein – also ohne Inhalte – aufgerufen werden kann.

Seitentitel ersetzen (in <head>)

STATISCH

<title>Meine Website</title>

DYNAMISCH

<title><?php page_title(); ?></title>

Die Ausgabe erfolgt standardmäßig nach folgendem Muster: [WEBSITENAME] – [SEITENTITEL]

Angabe des Stylesheets ersetzen (in <head>)

Alle relativen (../../..) Links müssen durch absolute (http://…) ersetzt werden. Damit man die URL nicht manuel notieren muss, stellt WebsiteBaker die Funktion TEMPLATE_DIR zur Verfügung. Diese Funktion ergänzt automatisch den Pfad zum Template.

STATISCH

<link type="text/css" href="layout/screen.css" rel="stylesheet" media="screen" />

DYNAMISCH

<link type="text/css" href="<?php echo TEMPLATE_DIR; ?>/layout/screen.css" rel="stylesheet" media="screen" />

Angabe des Zeichensatzes ersetzen (in <head>)

STATISCH

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

DYNAMISCH

<meta http-equiv="Content-Type" content="text/html; charset=<?php if(defined('DEFAULT_CHARSET')) { echo DEFAULT_CHARSET; } else { echo 'utf-8'; }?>" />

Beschreibung & Schlüsselwörter ersetzen (in <head>)

STATISCH

<meta name="description" content="Beschreibung" />
<meta name="keywords" content="Keywords" />

DYNAMISCH

<meta name="description" content="<?php page_description(); ?>" />
<meta name="keywords" content="<?php page_keywords(); ?>" />

Funktion für Zusatzmodule (in <head>)

Damit auch Zusatzmodule ihr eigenes CSS und ggf. Javascript im Header () der Seite registrieren können, sollte folgende Funktion notiert werden:

<?php
// this allows to include the optional module files (frontend.css, frontend.js) into the head section
if(function_exists('register_frontend_modfiles')) {
  register_frontend_modfiles('css');
  register_frontend_modfiles('js');
} ?>

Funktion für Weitere Meta-Angaben (in <head>)

Neben den Meta-Angaben zu Zeichensatz, Beschreibung und Keywords, erlaubt WebsiteBaker 2.7.x zudem die Backend gestützte Ausgabe weiterer Meta-Tags (z.B. für die Steuerung der Image-Toolbar des IE). Damit dies möglich wird, muss folgende letzte Funktion im Header notiert werden:

<?php 
echo WEBSITE_HEADER; 
?>

Angabe des Website-Name ersetzen (in <body>) (OPTIONAL)

Das Banner in Kopfbereich meines Templates binde ich via CSS ein  – dadurch ist es in Druckausgabe nicht sichtbar (es sein denn, der Nutzer stellt das explizit ein) – damit der Website-Name aber auch im Druck an erster Stelle erscheint, lasse ich dort erneut als Text ausgeben und verstecke ihn in der normalen Ansicht im Browser.

STATISCH

<h1 class="invisible">Websitename hier</h1>

DYNAMISCH

<h1 class="invisible"><?php page_title('','[WEBSITE_TITLE]'); ?></h1>

Angabe des Seitentitels ersetzen (in <body>) (OPTIONAL)

Den Namen der aktuell aufgerufenen Seite möchte ich unter dem Banner ausgeben. Dazu bemühe ich erneut das CMS.

STATISCH

<h2>Seitenname</h2>

DYNAMISCH

<h2><?php page_title('','[PAGE_TITLE]'); ?></h2>

Ausgabe des Menüs ersetzen (in <body>)

Hinweis: Seit Version 2.7 ist die erweiterte Menü-Funktion show_menu2() Bestandteil einer jeden Website-Baker-Installation. show_menu2() ist deutlich leistungsfähiger als show_menu() und ermöglicht eine gezieltere Anpassung des Menüs an die persönlichen Wünsche. Hinweise zur Verwendung von findet man hier: http://www.websitebakers.de/sm2/

STATISCH

<ul>
          <li><a href="#">Mein Blog</a></li>
          <li><a href="#">Zur Person</a></li>
          <li><a href="#">Bilder</a></li>
          <li><a href="#">Impressum</a></li>
</ul>

DYNAMISCH

<?php show_menu(); ?>

Ausgabe des Inhalts ersetzen (in <body>)

STATISCH

<div id="content">
        <h1>Eine H1 Headline</h1>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <a href="#">tempor</a> invidunt ut labore et dolore magna aliquyam erat, sed diam

...

</div>

DYNAMISCH

<div id="content">
<?php page_content(); ?>
</div>

Damit wäre unser Beispiel-Template fertig. Nicht alle gezeigten Funktionen sind für das Erstellen eines Templates notwendig. Das individuelle Template kommt (je nach Einsatzzweck) auch mit weniger Funktionen zurecht – oder bedient sich bei Bedarf weiterer Funktionen. Im Zweifelsfall heißt es hier: ausprobieren.

Das fertige Template

Das neu erstellte Template sieht dann so aus:

<?php
    if(!defined('WB_URL')) {
	header('Location: ../index.php');
	exit(0);
}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" href="<?php echo TEMPLATE_DIR; ?>/layout/screen.css" rel="stylesheet" media="screen" />
<title><?php page_title(); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php if(defined('DEFAULT_CHARSET')) { echo DEFAULT_CHARSET; } else { echo 'utf-8'; }?>" />
<meta name="description" content="<?php page_description(); ?>" />
<meta name="keywords" content="<?php page_keywords(); ?>" />
<?php
// this allows to include the optional module files (frontend.css, frontend.js) into the head section
if(function_exists('register_frontend_modfiles')) {
  register_frontend_modfiles('css');
  register_frontend_modfiles('js');
} ?>
<?php 
// this allows to add custom information to the head section of your template (WB-->Settings-->Website Header)
echo WEBSITE_HEADER; 
?>
</head>
<body>
<div id="container">
	<div id="banner" >
      <div id="headimage">
      	<h1 class="invisible"><?php page_title('','[WEBSITE_TITLE]'); ?></h1>
      </div>
	  <h2><?php page_title('','[PAGE_TITLE]'); ?></h2>
	</div>
<div id="left">
		<?php show_menu(); ?>
		<pre> </pre>
</div>
	<div id="content">
		<?php page_content(); ?>
  </div>
 	<div id="footer"></div>
</div>
</body>
</html>

Wichtig: Absolute Pfadangaben!

Relative Pfadangaben wie layout/screen.css oder media/bild.jpg funktionieren nicht im Template! Das Template wird später via PHP-include von einer ganz anderen Stelle aus aufgerufen als von der Stelle an der es abgelegt ist. Die relativen Pfadangaben müssen daher in absolute Pfandangaben geändert werden. Dafür stellt WebsiteBaker die Funktion   zur Verfügung.

EIN BEISPIEL:

Aus der relativen Angabe…

<link type="text/css" href="layout/screen.css" rel="stylesheet" media="screen" />

…wird die absolute Angabe

<link type="text/css" href="<?php echo TEMPLATE_DIR; ?>/layout/screen.css" rel="stylesheet" media="screen" />

Aus der relativen Angabe…

<img src="media/bild1.jpg" alt="ein Bild" />

…wird die absolute Angabe

<img src="<?php echo TEMPLATE_DIR; ?>/media/bild1.jpg" alt="ein Bild" />

Dies setzt natürlich voraus, dass sich die referenzierten Dateien auch tatsächlich im Templateverzeichnis befinden – und damit sie dort landen, müssen sie mit in das nun zu erstellende ZIP-Archiv.

ZIP-Archiv für die Installation erstellen

Falls nicht bereits geschehen, muss jetzt das eben erstellte Template in „index.php“ umbenannt werden. Damit ist der Löwenanteil der Arbeit bereits getan.

Nun geht es an das Erstellen der Info-Datei. Dazu kopiert man sich am Besten die „info.php“ des Templates „Simple“ aus dem Verzeichnis [WB]/templates/simple/ in den selben Ordner in dem sich die eben neu erstellte „index.php“ befindet. Die in der Info-Datei enthaltenen Werte ändert man nach eigenem Belieben – wobei Sonderzeichen und Umlaute vermieden werden sollten.

IN MEINEM BEISPIEL:

<?php

$template_directory = 'gocreate';
$template_name = 'goCREATE';
$template_version = '1.0';
$template_platform = '2.6.x';
$template_author = 'andreherdling.de';
$template_license = 'GNU General Public License';
$template_description = 'Just a test';

?>

Damit sind alle Vorraussetzungen für das Template geschaffen. Nun erstellt man aus allen Dateien ein ZIP-Archiv (unter Windows z.B. mit WinZip, unter Mac OS X mit Rechtsklick –> „x Objekte komprimieren„).
Wichtig! Es dürfen nur die einzelnen Dateien und Unterordner ins ZIP-Archiv wandern, NICHT der beinhaltende Ordner selbst!

Die Struktur muss also so aussehen:

dateiname.zip
-index.php
-info.php
-Ordner1
-Ordner2
...

Und NICHT so:

dateiname.zip
-Ordner
--index.php
--info.php
--Ordner1
--Ordner2

Template installieren

Nachdem die ZIP-Datei korrekt angelegt wurde, loggt man sich ins Backend von Websitebaker ein und navigiert zu „Erweiterungen“ –> „Desigvorlagen„, wählt unter „Designvorlagen installieren“ die eben erstellte ZIP aus und klickt auf „installieren„.

War die Installation erfolgreich findet man nun im selben Fenster unter „Details zur Designvorlage“ das eben installierte Template.
Damit das neue Template nun verwendet wird navigiert man zu guter letzt zu „Optionen“ –> „Dokumentevorlage“ und wählt dort das neue Template. Nach einem Klick auf „Speichern“ erscheint das Frontend im neuen Gewand.

WEITERE INFORMATIONEN

• Templatefunktionen einfügen
• Designvorlage für WebsiteBaker erstellen
• Übersicht Klassen und Funktionen in WebsiteBaker
• Variablen und Konstanten in WebsiteBaker