De vorige twee hoofdstukken beschreven de benodigde stappen om een bestaande 3-koloms layout (bestaande uit een index.html en screen.css) voor te bereiden. De statische inhoud van het bestand index.html werden vervangen door de WB specifieke template functies. Om uit de gewijzigde index.html en screen.css een werkende WB template te maken zijn de volgende stappen nodig.

Stap 1: Hernoem index.html

Een valide WebsiteBaker template heeft de twee bestanden index.php en info.php nodig. Het bestand index.php beavt de basis-strcutuur (HTML elementen) en de WB template functies om de inhoud uit de database te kunnen tonen.

Hernoem het gewijzigde bestand index.html, welke de WB temaplet functies bevat, naar index.php. De extensie .php is nodig om de ingevoegde php-code uit te kunnen voeren. Het is aan te raden om het bestand index.php met een tekst-editor op te slaan in het ANSI formaat om problemen te voorkomen met een fout in PHP, de zgn. utf-8 BOM bug.

Stap 2: Maak een info.php bestand

Het bestand info.php bevat template-informatie die WebsiteBaker nodig heeft, zoals template-naam, template-folder, auteur, licentie en een korte omschrijving. Aangezien ons template meervoudige menu's en blokken bevat, dient nog wat extra informatie toegevoegd te worden. Het bestand info.php kan aangemaakt worden met een simpele tekst-editor. De eerste 8 regels zijn verplicht voor alle templates.

<?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';
?>

Merk op dat het bestand ook de openende (<?php) en afsluitende (?>) PHP tags bevat.

Stap 3: Maak een installatie pakket

Ons eerste WB template bestaat uit drie bestanden:

  • index.php: bevat de basis HTML layout en de WB template functies
  • screen.css: bevat de stijlen voor positionering en layout
  • info.php: bevat informatie over template-naam, auteur, licentie en additionele menu's en blokken

Om een werkend installatie-pakket te maken voor WebsiteBaker, dienen de bstanden bij elkaar gevoegd te worden in een Zip-archief (*.zip). Voor Windows kan men gebruik maken van het Open Source Programma 7-zip.

Unix/Linux gebruikers kunnen het command-line tool zip gebruiken:

zip mytemplate_en.zip index.php screen.css info.php

Het zip-archief mag niet de folder bevatten waarin de drie bestanden zijn opgeslagen.

Right archive format
Figuur 1: Het goede archief-formaat zonder de folder!

Wrong archive format
Figuur 2: Verkeerde archief-formaat bevat ook de folder waar de drie bestanden in staan!

Stap 4: Installeer het template

Als het installatie-pakket (zip-archief) is aangemaakt, zoa;s wordt getoond in figuur 1, kan het worden geïnstalleerd via de WB backend: Extra's -> Templates -> Toevoegen Template.

U kunt het installatie-pakket (zip-archief) van deze WB template gids downloaden.

Stap 5: Pas WB Instellingen aan

In de standaard instellingen van WebsiteBaker is het gebruik van meervoudige menu's en blokken uitgeschakeld. Aangezien ons template twee navigatie-menu's en twee inhoud-blokken bevat, dienen we deze instellingen in te schakelen via de WB backend.


Inschakelen Meervoudige menu's:
Instellingen -> Bekijk geavanceerde opties -> Meervoudige Menu's -> Aan

Inschakelen meervoudige blokken:
Instellingen -> Bekijk geavanceerde opties -> Sectieblokken -> Aan

Gebruik het nieuwe template als standaard template:
Om het nieuwe template als standaard te gebruiken voor alle bestaande en nieuwe pagina's dienen de volgende instellingen gewijzigd te worden via de WB backend:

Instellingen -> Standaard Instellingen -> Template -> 3-koloms CSS

Het resultaat kunt U zien in de onderstaande afbeelding.

Preview WebsiteBaker template 
Figuur 3: Het nieuwe template in actie