Über WB-Templatefunktionen werden in der Datenbank gespeicherte Einstellungen und Inhalte ausgelesen und im Template ausgegeben. Die grundlegenden Templatefunktionen von WebsiteBaker werden anhand der im vorigen Kapitel vorgestellten Designvorlage von Maxdesign entsprechend Ihrer Position in der index.html Datei der Reihe nach vorgestellt.
Jede HTML Datei muss ein Titel Attribut besitzen. Dieses wird u.a. in der Titelzeile des Browsers angezeigt und spielt auch bei der Suchmaschinenoptimierung eine wichtige Rolle. Weitere Informationen...
<title>3-spaltiges CSS Template mit Kopf- und Fusszeile</title>
Ersetze die obere Zeile in der Datei index.html mit dem Code der nachfolgenden Zeile.
<title><?php page_title(); ?></title>
Die Funktion page_title ist in der Datei /frameworks/frontend.functions.php definiert und erzeugt einen Seitentitel der Art: WEBSITE_TITLE - PAGE_TITLE. Um z.B. den Bindestrich durch ein anderes Zeichen zu ersetzen, kann der Codeaufruf wie folgt geändert werden:
<title><?php page_title('',
'[WEBSITE_TITLE][SPACER][PAGE_TITLE]'); ?></title>
Der erste String enhält das Trennzeichen [SPACER], der zweite String sorgt für die Anzeige des Webseitentitels dem Trennzeichen und dem Seitentitel. Die Platzhalter [WEBSITE_TITLE], [SPACER] und [PAGE_TITLE] werden vor der Anzeige im Template mit den jeweiligen Inhalten ersetzt.
Über nachfolgende Meta-Angabe wird die Zeichenkodierung der HTML-Datei festgelegt. Diese Angabe ist für den Web-Browser besonders wichtig, denn sie teilt ihm mit, nach welcher Kodierung die Bytes der Datei in Zeichen umgewandelt werden müssen. Ist diese falsch gesetzt, werden unter Umständen Deutsche Umlaute wie ä nicht richtig angezeigt. Weitere Informationen...
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Ersetze die obere Zeile in der Datei index.html mit nachfolgenden PHP Code.
<meta http-equiv="Content-Type" content="text/html; charset=<?php
if(defined('DEFAULT_CHARSET')) { echo DEFAULT_CHARSET; } else
{ echo 'utf-8'; }?>" />
Nachfolgende Meta-Angaben werden von allen großen Suchmaschinen im Web ausgelesen. Die Kurzbeschreibung wird in manchen Suchmaschinen angezeigt, wenn ein Anwender nach etwas sucht und diese Datei zu den Treffern gehört. Die Stichwörter spielen eine wichtige Rolle bei der Suchmaschinenoptimierung. Weitere Informationen...
<meta name="description" content="Kurzbeschreibung der Webseiteninhalte" /> <meta name="keywords" content="Schlüsselwörter, Schlagwörter" />
durch nachfolgenden Code ersetzen:
<meta name="description" content="<?php page_description(); ?>" /> <meta name="keywords" content="<?php page_keywords(); ?>" />
Externe Stylesheets erlauben es, Formate und Ausrichtungen in einer seperaten Textdatei zu verwalten. Damit HTML Dateien auf diese externen Stile zugreifen können, muss die externe Datei in die HTML Datei über nachfolgende Anweisung eingebunden werden. Weitere Informationen ...
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
wird ersetzt durch:
<link rel="stylesheet" type="text/css" href=" <?php echo TEMPLATE_DIR; ?>/screen.css" media="screen" />
Um anstelle der fixen Bannerüberschrift: "Webseiten Titel" den HTML Code aus dem Textfeld Kopfzeile (WB Backend: Optionen -> Erweiterte Optionen anzeigen -> Allgemeine Optionen -> Kopfzeile) für jede Seite auszugeben, muss nachfolgender Code
<!-- Banner --> <div id="banner"> <h1>Webseiten Titel</h1> </div>
wie folgt geändert werden.
<!-- Banner --> <div id="banner"> <h1><?php echo WEBSITE_HEADER; ?></h1> </div>
Es besteht auch die Möglichkeit, den Seitentitel der gerade angezeigten Seite an dieser Stelle ausgeben zu lassen. Dazu einfach WEBSITE_HEADER durch PAGE_TITLE ersetzen.
Das Navigationsmenü wird in WB automatisch aus den angelegten Seiten generiert. Die Menüebenen ensprechen dabei der Anordung der Seiten im WB Backend. In WB ist es möglich, mehrere voneinander unabhängige Menüs zu definieren. Das Untermenü am oberen Rand unseres Templates soll die Nummer 2, das Hauptmenü auf der linken Seite die Nummer 1 zugewiesen werden. Suche die nachfolgende Codezeilen in der Datei index.html
<div id="navigation1"> <ul> <li><a href="#">Impressum</a></li> <li><a href="#">Kontakt</a></li> </ul> </div>
und ändere diese wie folgt.
<div id="navigation1"> <?php show_menu2(2); ?> </div>
Analog verfahren wir mit dem Hauptnavigationsmenü auf der linken Seite. Ersetze die folgenden Zeilen
<div id="navigation2"> <ul> <li><a href="#">Startseite</a></li> <li><a href="#">Rubrik 1</a></li> <li><a href="#">Rubrik 2</a></li> </ul> </div>
durch diese
<div id="navigation2"> <?php show_menu2(1); ?> </div>
Der anzuzeigende Inhalt einer jeden Seite ist in der WB Datenbank gespeichert. Da unser Template über zwei Inhaltsblöcke verfügt (einen für die News, einen für den Hauptinhalt), müssen wir zwei Ersetzungen in der Datei index.html vornehmen.
Der Block mit den News soll der Nummer 2, der Block mit dem Hautpinhalt der Nummer 1 zugewiesen werden. Suche die nachfolgende Codezeilen in der Datei index.html
<div id="news"> <h3>Letzte Meldungen:</h3> <p>Die neuesten Nachrichten kommen hier hin...</p> </div>
und ersetze diese wie folgt.
<div id="news"> <h3>Letzte Meldungen:</h3> <?php page_content(2); ?> </div>
Analog verfahren wir mit dem Block für den Hauptseiteninhalt. Ersetze nachfolgende Zeilen
<!-- Spalte für den Hauptinhalt --> <div id="inhalt"> <h2>Startseite</h2> <p>Der Hauptseiteninhalt kommt hier hin...</p> </div>
wie folgt
<!-- Spalte für den Hauptinhalt --> <div id="inhalt"> <?php page_content(1); ?> </div>
Um die Fusszeile über das WB-Backend festlegen zu können, muss folgender Code in der index.html
<div id="fusszeile">
<p>(c) 2007 by http://css.maxdesign.com.au
(adapted for the WebsiteBaker.org help project by C. Sommer)</p>
</div>
durch nachfolgenden ersetzt werden.
<div id="fusszeile"> <?php page_footer(); ?> </div>
Die gemachten Änderungen bewirken, dass dynamische Inhalte abhängig von der angezeigten Seite aus der Datenbank ausgelesen und angezeigt werden. Die Grundstruktur und das Layout wird dabei für jede neu angelegte Seite automatisch übernommen.
Die WB Konstante TEMPLATE_DIR kann auch dazu verwendet werden, ein Bild aus dem Templateverzeichnis in die index.php Datei Deines Templates einzubinden. Nachfolgender Code bindet das Bild mypic.gif aus dem Unterordner /img des Templatedirectories ein.
<img src="<?php echo TEMPLATE_DIR;?>/img/mypic.gif" alt="mein Bild" />
Hinweis:
Um aus der gerade geänderten Datei index.html ein WB taugliches Template zu erstellen, sind noch zwei weitere Schritte notwendig, die nachfolgend erläutert werden.