Update: 20.01.2011

Template Guideline

Richtlinien zum Erstellen von Templates

Die Template Guideline soll Anwendern helfen, Designvorlagen mit Hilfe von CSS und HTML zu Erstellen. Die Guidelines sind von Anwendern für Anwender geschrieben.

Die Kapitel in der Übersicht:

Der Aufbau:

Damit ein Template später auch fehlerfrei installiert werden kann, muss es vier Grundkomponenten enthalten.

Eine info.php Datei
Eine index.php Datei
Das Verzeichnis /css
und das Verzeichnis /images

In dem Verzeichnis images werden alle Bilder, die im Templates verwendet werden gespeichert.

In der Datei index.php steht der Quellcode, der den Grundaufbau des Templates bestimmmt.

Schriftarten, Farben, Größen usw. werden in der .css Datei festgelegt.

Die info.php sagt dem CMS welche Designvorlage, wieviele Menüs und Blöcke im Template angezeigt werden sollen.

Optional kann noch eingefügt werden:

Eine print.css, wenn das Template ausgedruckt werden soll.
Eine editor.css, für Darstellung von Text und Info-Elementen im Editor (Backend).
Ein preview.jpg, für den Templateordner als Vorschaubild.
Eine license.txt, für die Lizenz unter der das Template steht.
Ein favicon.ico, (Favoriten-Symbol), das in der Adresszeile eines Browsers links von der URL angezeigt wird und dazu dient, die zugehörige Website auf wiedererkennbare Weise zu kennzeichnen.

Das Favicon sollte immer im root-Verzeichnis der Domain liegen, manche Browser ignorieren den Link-Tag und suchen im root der Domain eine Datei mit dem Namen favicon.ico.

Die index.php:

Der Aufruf für die info.php

Der Aufruf für die info.php kommt als erstes in eine index.php.

HTML & PHP Funktionen im Header

Kodierung für Unicode-Zeichen UTF-8

UTF-8 zur Darstellung sprachspezifischer Zeichen, ist die am weitesten verbreitete Kodierung an Unicode-Zeichen.

Der Webseitentitel und Seiten-Titel

Beispiel: WEBSITE_TITLE = Max Mustermann - PAGE_TITLE = Startseite

Die Webseitenbeschreibung

In dem Meta-Tag "description" kommt die Beschreibung der Seite. Die Description kann bei einigen Suchmaschinen zusammen mit dem Titel in der Ergebnisliste angezeigt werden.

Im Backend kann man hierfür unter Optionen die Beschreibung eintragen. Es ist auch sinnvoll bei den Seiten unter - Seite bearbeiten jeweils in dem Textfeld die Inhalte zu erstellen. Jede Seite bekommt somit ihre Information mit.

Die Keywords (Schlüsselwörter)

Angaben für die Suchmaschinen.

Im Backend kann man hierfür unter Optionen die Worte eintragen. Es ist auch sinnvoll bei den Seiten unter - Seite bearbeiten jeweils in dem Textfeld die Inhalte zu erstellen. Jede Seite bekommt somit ihre extra Keywords mit.

Das Verzeichnis des Templateordners

TEMPLATE_DIR gibt die URL aus, den Pfad zum Templateverzeichnis.
Beispiel: http://www.domain.de/templates/templatename

Angaben für die Print.css

Beschreibung kommt noch :-)

Der Aufruf für die .css Datei

Es können natürlich wie bei anderen HTML Seiten mehrere .css Dateien erstellt werden. An Stelle von media="screen" kann auch media="all" eingefügt werden.

Mehrere .css Dateien ermöglichen eine bessere Übersicht der CSS.

Der Aufruf für die editor.css Datei

Es ist möglich deine editor.css mit in den Template Ordner zu legen. Diese Datei greift dann auf die Darstellung im WYSIWYG Editor (What You See Is What You Get) und auf das Template (Frontend) zu. In dieser .css Datei schreibt man normalerweise die Schriftarten, Schriftgrößen und verschiedene Einstellungen für Address, code und blockquote. Auch sogenannte Noti´s können eingefügt werden.

Optionale Moduldateien (CSS/Javascript) einbinden

Um Moduldateien automatisch einzubinden, muss der PHP Code in den head Bereich der index.php Datei des Templates eingefügt werden.

Der Body

Auflistung der Funktionen im Body:

Der Webseitentitel

Das ist der Titel einer Internetseite. Dieser wird bei den Internet-Browsern in der ersten Zeile angezeigt. Bei fast allen Browsern wird der Titel auch für die Favoritenliste, Lesezeichen oder Bookmarks verwendet. Auch Suchmaschinen lesen diesen Tag aus!

Der Page Header Text

Er gibt die Kopfzeile der Webseite aus.

Die Webseitenbeschreibung

In dem Meta-Tag "description" kommt die Beschreibung der Seite. Die Description kann bei einigen Suchmaschinen zusammen mit dem Titel in der Ergebnisliste angezeigt werden.

php echo page_description() Wird bereits im Head ausgeführt, es soll hier nur eine Anregung sein, die Webseiten Beschreibung auch im Content (Frontend) als Text zu zeigen.

Die Breadcrumbs Navigation

Bei breadcrumbs handelt es sich um die Navigation, die den Pfad zur aktuellen Seite zeigen.

Beispiel für die CSS

Link einfügen zum Hauptverzeichnis

Beispiel:

Bilder einfügen

TEMPLATE_DIR gibt die URL aus, den Pfad zum Templateverzeichnis. /images wäre somit der Bilderordner.

Eine weitere Variante (Beispiel Logo)

print WB_URL;> führt genauso wie WB_URL; zum Hauptverzeichnis. page_title('', '[WEBSITE_TITLE]' zeigt den Seitentitel und den Webseitentitel an.

Der Aufruf für das Menü

Die einfachste Methode für einen Menüaufruf ist:

Bei dem Menüplatzhalter show_menu() handelt es sich um einer PHP-Funktion, welche bei diesem einfachen Aufruf auf ihre Standardwerte zurück greift, deshalb wird das Menü in Listenform ausgegeben.

Weitere Möglichkeiten ein Menü zu erstellen

Show Menü 1

im Abschnitt (Aufgliederung des Menüs Show Menü 1) werden die Menüwerte erklärt.

Bitte nicht wie obern zu sehen mit Wert1,Wert2,Wert3, u.s.w. ins Template einbinden, das würde nicht funktionieren.

Aufgliederung des Menüs (Show Menü 1)

Position	Standard	Bedeutung

Wert 1	1	Menü Nummer
Wert 2	0	Ebene in der Das Menü beginnen soll (0 = Hauptmenüpunkte)
Wert 3	-1	Maximale Anzahl an Untermenülevel (-1 = alle anzeigen)
Wert 4	true	Sichtbarkeit von Untermenüpunkten (false = es werden immer alle Untermenüpunkte angezeigt)
Wert 5	'<li><span[class]>[a] [menu_title] [/a]</span>'	Inhalt der einzelnen Menüpunkte ([a] [menu_title] [/a] wird gegen den eigentlichen Link ersetzt und [class] gegen die HTML-Klasse)
Wert 6	'</li>'	HTML-Quelltext, der nach jedem Menüpunkt eingefügt wird
Wert 7	'<ul>'	HTML-Code, der vor dem Menü eingefügt wird (auch vor jedem Untermenü)
Wert 8	'</ul>'	HTML-Code, der nach dem Menü eingefügt wird (auch nach jedem Untermenü)
Wert 9	'class="menu_default"'	CSS-Klasse, die zu jedem Menüpunkt, außer dem aktivem hinzugefügt wird
Wert 10	'class="menu_current"'	CSS-Klasse, die dem aktuell aktivem Menüpunkt hinzugefügt wird.
Wert 11	0	Gibt das übergeordnete Menü an

Wert 1 (Menü Nummer): Mehrere Menü´s können somit durch show_menu(2... oder show_menu(3... erstellt werden. Nicht vergessen! In der info.php muß dann auch $menu[1] oder $menu[2] eingetragen werden.

Beispiele

show_menu(1,0,-1,false); - Zeigt den kompletten Menübaum

show_menu(1,1,1); - zeigt nur die erste Ebene der Unterseiten an (Menüast)

show_menu(1,1,-1); - zeigt einen ausklappbaren Ast unter der aktuellen Seite an

Die Content Bereiche

Der PHP Aufruf für das Content

Mit page_content(1) wird das Haupt-Content aufgerufen. Wenn eine Suche oder Login Abfragen im Frontend starten, so werden diese auch immer auf content (1) angezeigt. Wenn im Template nur ein Content verwendet wird, kann man auch page_content() schreiben.

Bei der Verwendung von mehreren Content´s, würde man dann page_content(2) oder page_content(3) schreiben.

Content und Blöcke mit if Abfrage

Man kann in einem Template Content-Bereiche auch abfragen.

Beispiel: Wenn Content (3) da ist - dann zeige es an, wenn nicht dann nicht. Dies hat den Vorteil, wenn in einem Template ein Content-Bereich über die volle Breite geht und die darunter angeordneten Content-Bereiche Links (Content (1)) und Rechts (Content (2)) aufgeteilt sind, so würde der Content-Bereich (3) nur angezeigt wenn er mit Inhalt befüllt ist.

Vorgehensweise

Im den head einer index.php kommt:
In den body der index.php:
In die info.php kommt dann noch:

Die Bezeichnung Volle Breite findet man dann im Backend unter Abschnitte verwalten an. Alles funktioniert auch nur, wenn im Backend mehrere Blöcke unter Optionen aktiviert sind!

Meldungen

Maecenas feugiat consequat diam. Maecenas metus.!

Maecenas feugiat consequat diam. Maecenas metus..

Maecenas feugiat consequat diam. Maecenas metus.!