Websitebaker: Der Aufbau eines Templates

Posted by Ingmar - 14. September 2009 - Magazin - No Comments

wir_backen_ein_WB_templateWebsitebaker ist ein freies CMS-Programm. Ein CMS zeichnet sich dadurch aus, dass es nur wenige Dateien enthält, die das Design festlegen. Die Vorlagen (eben die Templates) sind verhältnismäßig einfach zu pflegen. Sie beinhalten Platzhalter, die die Orte von Navigations- und Inhaltsobjekten festlegen.

Kommt das Design nach einigen Jahren aus der Mode, ist ein Wechsel dieses Designs unter Beibehaltung sämtlicher Inhalte somit ohne Probleme nötig.

Weiter zeichnet sich das CMS darin aus, dass die Pflege des Inhalts ohne besondere HTML-Kenntnisse möglich ist. Ein eigenes Template zu backen ist gar nicht so schwer, wie viele denken!

Der Aufbau eines Template-Pakets

Das Template muss als ZIP-Archiv bei Majordomo hochgeladen werden. Dieses ZIP-Archiv muss folgende Dateien beinhalten:

  • info.php
  • index.php

Aufbau der info.php

Die info.php beinhaltet Angaben, die Websitebaker zur ordnungsgemäßen Verwendung benötigt. Folgende Variablen müssen vergeben werden:

$template_directory

Hier muss der Name des Ordners stehen, in dem die Templatedaten gespeichert werden. Der Ordner wird von WB automatisch erstellt, wenn das ZIP-Archiv hochgeladen wird.

$template_name

Hier wird der Name des Templates festgelegt. In dieser Form wird er später in der Liste der Templateauswahl erscheinen. Es ist sinnvoll, Templatenamen und Ordnernamen gleich zu halten.

$template_version

Wird das Template überarbeitet, bleibt aber im Grunde vom Aufbau her gleich, kann hier eine Versionsnummer vergeben werden. Das macht Sinn, wenn das Template zum freien Download zur Verfügung gestellt wird. So kann kontrolliert werden, dass auch nur die neuesten Versionen zum Download angeboten werden.

$template_platform

Hier wird die aktuelle Websitebaker-Versionsnummer eingetragen. Das vermeidet, dass versucht wird, das Template mit Funktionen, die erst ab einer bestimmten WB-Version vorliegen, auf älteren Systemen zu installieren.

$template_author

Der Urheber will schließlich auch genannt werden. Dieser (oder sein Künstlername) kann hier eingetragen werden.

$template_license

Um festzulegen, ob das Template an Rechte gebunden ist, kann hier die Art der Nutzungsrechte eingetragen werden. Möchte man es dem freien Markt zur Verfügung stellen, kann hier GNU eingetragen werden. Wurde das Template für ein einziges Projekt entwickelt und soll nicht von anderen Personen genutzt werden, kann hier all rights reserved eingetragen werden.

$template_description

Hier ist eine Beschreibung des Templates möglich. Bei freien Download-Datenbanken könnte man hier Stichworte zum Design (rund, eckig, bunt, etc.) eintragen. Auch kann hier eingetragen werden, ob es für die Installation bestimmte Voraussetzungen gibt. Ist z. B. Ein Add-On nötig, damit der Template läuft?

Beispiel einer info.php:

<?php
$template_directory = 'myTemplate';
$template_name = 'myTemplate';
$template_version = '1.0';
$template_platform = '2.6.x';
$template_author = 'Originaldesign by Max Mustermann';
$template_license = 'GNU';
$template_description = 'A template of Mustermann-Design';
?>

Aufbau der index.php

Hier kommen wir auch gleich zu Dateien, die ebenfalls im Templateverzeichnis stecken könnten. Die index.php stellt die primäre Vorlage dar, auf der Websitebaker seine Darstellung aufbaut. Grafiken oder andere Dateien, die immer gebraucht werden, können im Template-Verzeichnis hinterlegt werden. Im Code, muss jedoch dann dem Programm gesagt werden, wo es diese Dateien findet.

Steuert man die Formate beispielsweise über eine Datei namens style.css, muss der Code im HEAD-Bereich der index.php so aussehen:

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

Dies gilt auch für Grafiken, die Bestandteil des Designs sind. Auch Verzeichnisse, wie z.B. images/ sind möglich und können dann mit

<?php echo TEMPLATE_DIR; ?>/images/

eingebunden werden.

Platzhalter

Entscheidend sind im Grunde folgende Platzhalter:

  • <?php show_menu(); ?>
  • <?php page_content(); ?>
  • <?php echo PAGE_TITLE; ?>
  • <?php echo WEBSITE_TITLE; ?>
  • <?php page_footer(); ?>
  • <?php page_description(); ?>
  • <?php page_keywords(); ?>

<?php show_menu(); ?> ist ein sehr komplexes Thema. Links zu diesem Programm folgen noch. show_menu() (ohne weitere Parameter) zeigt einfach nur das Navigationsmenü mit allen sichtbaren Seiten gegliedert an. Es lässt jedoch eine Menge Parameter zu. So kann zum Beispiel festgelegt werden, in welcher Ebene das Menü beginnt. So kann oben beispielsweise ein Menü stehen, welches nur die Hauptmenüpunkte (1. Ebene“ enthält). Je nach dem, auf welcher Seite man sich befindet, wird dann an anderer Stelle das jeweilige Untermenü angezeigt.

Show-menu wird immer mehr durch Show-menu2, auch SM2 genannt, ersetzt. SM2 lässt noch viel mehr Möglichkeiten offen. Es ermöglicht auch das Unterbringen mehrerer Platzhalter, was dem Design eines Menüs fast jegliche Begrenzugen genommen hat.

<?php page_content(); ?> ist das Herz der Platzhalter, da an dieser Stelle der im Programm hinterlegte Inhalt wiedergegeben wird. Der Bereich, in dem dieser Platzhalter liegt (z.B. eine <TD> einer Tabelle oder ein <DIV>), sollte so eingerichtet werden, dass er sowohl mit kleinen als auch mit großen Mengen an Inhalt gut zurecht kommt.

<?php echo PAGE_TITLE; ?> wirft als Ergebnis den Titel der jeweiligen Seite aus. Er kann beispielsweise als <H1> mit in die Seite eingebaut werden. Auch sollte er sich im <TITLE>-Tag des HTML-Kopfbereiches wiederfinden. Auch hier sollte die Größe des Bereichs dynamisch bleiben, da einige Seiten einen kürzeren, und andere einen längeren Titel besitzen.

<?php echo WEBSITE_TITLE; ?> hingegen bleibt auf allen Seiten gleich lang, da es sich hier um den Titel des gesamten Internetprojektes (festzulegen im Admin-Bereich unter „Optionen“) handelt. Er kann eingebaut werden, wenn man nicht ohnehin ein Logo mit dem Namen des Projektes als Schriftzug auf der Seite hat.

<?php page_footer(); ?> – die Fußzeile der Seite. Meistens wird dieser Platzhalter für den Copyright-Vermerk verwendet. Sie kann als letztes in Design stehen und kann auch Ausdrucken, die von der Homepage aus erstellt werden, als eine Art Signatur dienen.

<?php page_description(); ?> gibt die Beschreibung der Seite wieder. Diese kann in den Metadaten in den Kopfzeilen des HTML-Bereiches verwendet werden. Es gibt nach wie vor Suchmaschinen, die diesen Eintrag als Zusammenfassung für die Seite anzeigen.

<?php page_keywords(); ?> ist ausschließlich für die META-Angaben in Kopfzeilen des HTML-Bereiches gedacht. Man kann Suchworte unter „Optionen“ eintragen, die das gesamte Internetprojekt beinhalten. Auch zu jeder Seite kann man unter dem Menüpunkt „Einstellungen ändern“ die Schlüsselwörter festlegen. Befinden sich Werte in diesen Bereichen, werden die website-weiten Werte vollständig ersetzt.

Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”description” content=”<?php page_description(); ?>” />
<meta name=”keywords” content=”<?php page_keywords(); ?>” />
<title><?php echo PAGE_TITLE; ?></title>
<link href=”<?php echo TEMPLATE_DIR; ?>/style.css” rel=”stylesheet” type=”text/css” media=”all” />
</head>
<body>
<div class=”HEADER”>
<a href=”<?php echo WB_URL; ?>/” target=”_top”><?php echo WEBSITE_TITLE; ?></a>
<font color=”#D0D0D0″>| <?php echo PAGE_TITLE; ?></font>
</div>
<table width=”100%” class=”CONTENT”><tbody>
<tr>
<td width=”20%”><?php show_menu(); ?></td>
<td width=”80%”><?php page_content(); ?></td>
</tr>
</tbody></table>
<div class=”FOOTER”>
<?php page_footer(); ?>
</div>
</body>
</html>

handmade180Damit haben wir das eigene Template gebacken … vielleicht ist es besser, wenn wir es als den Tortenboden bezeichnen, da es nun zwar technisch einwandfrei läuft, jedoch noch keinerlei kreative Gestaltung beinhaltet. Lasst Eurer Kreativität hier freien lauf und probiert einfach etwas herum. Mit ein paar Testseiten und kurzen und langen Blindtexten kann schon schnell sehen, wie die dynamischen Bereiche (Menü und Content) mit dem Design harmonieren werden.

Viel Spaß beim Backen! :) Facebook Like

No comments

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Kommentarlinks könnten nofollow frei sein.