Dieses Tutorial richtet sich an Anfänger, welche bereits erste Gehversuche mit dem w3bcms gemacht haben und nun ein eigenes Design bzw. Template fürs w3bcms anpassen wollen.

Vorrausetzungen:

• Eine fertig eingerichtete Installation des w3bcms
• Ein fertiges Design welches bereits in HTML/CSS gecodet ist
• HTML/CSS Kenntnisse

Zum w3bcms

Seit Ende 2007 entwickelte das Team von w3bcms (damals noch w3blabor) ein kleines aber extrem leistungsstarkes CMS für private wie auch gewerbliche Nutzer. Ansporn war anfangs noch die Tatsache, dass es kein sicheres, Suchmaschinenoptimiertes, kleines CMS für Webdesigner, Fotografen oder andere Künstler gab und man diesbezüglich Abhilfe schaffen wollte. Seit diesen Anfängen hat das CMS jedoch eine enorme Entwicklung durch gemacht, was es nun auch anderen Nutzern ermöglicht mit dem CMS kleine bis mittelgroße Projekte zu realisieren.

Aufbau des w3bcms

Wenn man das erste mal ein Design an das w3bcms anpassen will, muss man sich zunächst einmal mit dem Aufbau des CMS vertraut machen.

Die Funktionen

Alle wesentlichen Funktionen des w3bcms liegen in der Datei Root/includes/config.inc.php auf euerem Webserver. Dazu zählen zum Beispiel die Ausgabe des Contents (Also des Textes auf euer Webseite),  des Footers, des Logos, der Slogans etc.
Wenn ihr euch die Datei in einem HTML oder PHP Editor wie z.B. Dreamweaver anschaut seht ihr das jede Funktion einen bestimmten Namen hat. Dieser Name wurde einmal als Kommentar, welches immer mit einem doppeltem Schrägstrich anfängt ("//") oben über die Funktion geschrieben  (bspw. "// PAGE FOOTER") und explizit noch einmal in der Funktion (bspw. "function page_footer()"). Dieser Name ist für euch insofern wichtig da ihr den später braucht um die einzelnen Funktionen an der entsprechenden Stelle in eurem Template aufzurufen. Um den Namen herauszufinden  müsst ihr euch also lediglich die Kommentare anschauen.

Die Templates

Die Dateien der einzelnen Templates liegen normalerweise im Ordner Root/includes/templates/EUERTEMPLATE/ auf dem Webserver. Im Admin Backend kann man allerdings unter Einstellungen auch einen anderen Pfad zu den Templates angeben.

Ein Template muss definitiv aus einer HTML Datei namens "index.html" und einem Unterordner namens "css" bestehen. Die index.html ist praktisch das Gründgerüst eures Templates in dem ihr dann die jeweiligen Funktionen einfügt. Im Ordner css liegen die Stylesheet Dateien eures Templates und zwar einmal die "main.css", sowie die "global.css". Die main.css ist die Stylesheet Datei zu eurem Design. Die global.css regelt grundlegende Sachen wie Formulare und ähnliches, die Datei kann man sich einfach aus dem Grunddesign des w3bcms kopieren, welches ebenfalls im Ordner includes/templates/ liegt.

Wahlweise kann man dann noch einen Unterordner namens "images" (oder auch img) erstellen, in dem ihr die Bilder eures Templates ablegt und einen Unterordner namens "js", in dem ihr sämtliche JavaScript Dateien eures Templates ablegt. Auch kann man jeweils noch ein extra Stylesheet für den IE in dem Ordner "css" anlegen. Am einfachsten macht ihr es euch wenn ihr schon bei der Erstellung eures Designs als HTML-Datei darauf achtet, dass ihr immer gleich mit der richtigen Ordner-Struktur beginnt.

Design / Template anpassen

Okay legen wir los, ich nehme ein recht einfache Design mit Header, Navigation, Subnavigation, Content und Footer zur Veranschaulichung

DEMO / QUELLCODE

Wie man sieht ist es noch ohne Inhalt, wir werden es nun der Reihe nach mit folgenden Funktionen des w3bcms füllen:

• Header
• Logo
• Slogan
• Navigation & Subnavigation
• Content
• Footer

Ich werde dabei nur in Ausnahmefällen auf evt. Anpassungen am Stylesheet eingehen. Am Ende des Tutorials findet ihr dann noch eine komplette Auflistung aller Funktionen.

Schritt 1: Header

Mit dem Begriff Header ist hier nicht etwa der Header des Designs gemeint, sondern der HTML Header. Beim w3bcms wird dieser HTML Header automatisch aus dem im Admin Backend vorgenommenen Einstellungen erzeugt. Wenn ihr bei der HTML Datei erstellung bereits die richtige Ordner und Namens Struktur beibehalten habt wird das w3bcms automatisch eure Stylesheets usw. einfügen. Auch die Meta-Angaben werden aus den vorgenommenen Einstellungen generiert.

Die Funktion in der config.inc.php (siehe oben) sagt uns das die Funktion für den HTML Header "page_header()" heißt. Um den Header nun in unserer HTML Datei ausgeben, müssen wir lediglich folgendes an die entsprechende Stelle in unserer HTML Datei schreiben: <?php page_header()?>

. Der richtige Ort für den HTML Header ist natürlich zwischen <head> und </head>.

DEMO / QUELLCODE

Schritt 2: Logo

Das Logo legen wir im Backend des w3bcms fest, unter Allgemein -> Mein Logo können wir eins hochladen, dies tun wir Idealerweise in der richtigen Größe damit es unseren Header nicht verzieht. Bei mir hat der Header eine Höhe von 100 pixeln also lade ich mein logo nun in der Größe 120px mal 100px hoch. Unter Umständen müsst ihr nun noch im Admin Backend unter Optionen einstellen, dass das Logo angezeigt werden soll. Um das Logo nun in der HTML Datei anzuzeigen gehen wir wieder in die config.inc.php und suchen uns das Kommentar "// PAGE LOGO". In unserer HTML Datei setzen wir nun einfach in den entsprechenden Div die php Funktion <?php page_logo()?>

DEMO / QUELLCODE

Schritt 3: Slogan

Für den Slogan  machen wir nun wieder genau das gleiche, wir suchen uns die entsprechende Funktion in der config.inc.php ("// PAGE CLAIM") und fügen die php Funktion an der richtigen Stelle in der index.html Datei unseres Templates ein ("<?php page_claim()?>

"). Das einzige besondere an diesem Fall ist, dass die Funktion nicht PAGE SLOGAN heißt sondern PAGE CLAIM. Um trotzdem herauszufinden das dies die Funktion für den Slogan ist könnt ihr einfach die index.html des w3bcms Designs im Editor öffnen und gucken wo die Funktion für den Slogan steht (Das w3bcms Design ist unter includes/templates/w3bcms/ zu finden).

DEMO / QUELLCODE

Schritt 4: Navigation

Bei der Navigation gibt es 3 verschiedene Möglichkeiten.

• Die 1. Möglichkeit ist sich die Navigation an einer Stelle des Designs anzeigen zu lassen und die Subnavigation an einer anderen Stelle im Design.
• Die 2. Möglichkeit ist es (So wie bei mir) Navigation und Subnavigation beide an der gleichen Stelle im Design anzeigen zu lassen.
• Die 3. und letzte Möglichkeit ist es die Navigation und Subnavigation zwar an der gleichen Stelle im Design anzeigen zu lassen, dabei jedoch die Subnavigation als Dropdownmenü zu realisieren.

Bei dem von mir verwendeten Beispiel werden wir die 1. Möglichkeit verwenden, da die Hauptnavigation unter dem Header angezeigt werden soll, die Subnavigation aber rechts in der Sidebar.

Also suchen wir uns wieder die beiden Funktionen aus der config.inc.php heraus, in unserem Fall sind das "// PAGE MENU" und "// PAGE SUBMENU" und fügen diese an der richtigen Stelle in unserer HTML Datei ein. Aber Achtung (!), wenn wir uns den Eintrag für "// PAGE MENU" in der config.inc.php genauer anschauen, sehen wir das bei der funktion "function page_menu($sorter)" etwas in den sonst leeren Klammern steht und zwar die Variable "$sorter". Diese Variable kann einen Wert von 1 und 0 haben und gibt an wie das Menu angeordnet sein soll. 0 steht für Horizontal, 1 steht für Vertikal. Auch bei den anderen Möglichkeiten kann es eine oder sogar mehere solcher Variablen geben, man muss dann einfach einen entsprechenden Wert für die Variablen einsetzen (nähres steht bei der Auflistung der Funktionen)

In unserem Fall möchten wir die Hauptnavigation horizontal angeordnet haben, also schreiben wir an der entsprechenden Stelle im HTML Quellcode eine 0 in die sonst leeren Klammern: <?php page_menu(0)?>

. Wenn wir keinen Wert in die Klammern schreiben wird eine Fehlermeldung erzeugt, da die config.inc.php einen Wert fordert.

DEMO / QUELLCODE

Schritt 5: Content

Das gleiche wie sonst auch, wir suchen uns den Namen der Funktion in der config.inc.php und fügen ihn in die HTML Datei ein.

Gut zu wissen ist vielleicht noch das man im Admin Backend unter Einstellung die automatisch Erzeugte h1 Headline ausstellen kann.

DEMO / QUELLCODE

Schritt 6: Footer

Name der Funktion raussuchen und einsetzen.

Besonders ist allerdings das die Footer Funktion die letzte Funktion im HTML Quellcode sein muss. Sie beendet die MySQL Verbindung, das bedeutet das alle nachfolgenden Funktionen in der HTML Datei nicht mehr funktionieren werden. Deshalb immer überprüfen das im Quellcode nach der Footerzeile keine weiteren Funktionen mehr kommen.

Im Admin Backend kann man unter Einstellungen den Footertext ändern. Änderungen am w3bcms Text sind aber nicht möglich, um diese verschwinden zu lassen benötigt man eine Lizenz, welche auch noch andere Sonderfunktionen mit sich bringt.

DEMO / QUELLCODE

Einbindungen aller Funktionen

HTML Header
<?php page_header() ?>

Seiten Überschrift
<?php page_headline() ?>

Logo
<?php page_logo() ?>

Slogan
<?php page_claim() ?>

Willkommenstext
<?php page_welcome() ?>

Content
<?php page_content() ?>

Footer
<?php page_footer() ?>

Haupt Navigation
<?php page_menu(WERT) ?>

(Wert: 1 = vertikal, 0 = horizontal)

Sub Navigation
<?php page_submenu() ?>

Navigation (Haupt & Sub)
<?php page_fullmenu($sorter,$menuaktiv,$showall) ?>

$sorter: 1 = vertikal, 2 = horizontal
$menuaktiv: true = css-klasse "active" wird hinzugefügt, false = wird nicht hinzugefügt
$showall: true = Subnavigation wird bei jedem Punkt angezeigt, false = Subnavigation wird nur bei aktivem MenÜpunkt angezeigt

Dropdown Navigation
<?php page_dropdown(WERT) ?>

(Wert: 1 = vertikal, 0 = horizontal)
Counter
<?php page_counter() ?>

So ich hoffe das Tutorial konnte euch weiter helfen, Fragen einfach in die Kommentare

mit freundlichen Grüßen
Jascha Brinkmann