Mambo: Templates selber erstellen
Aus Wikibooks
| ↑ Profi-Startseite - API | Das Mambo-Buch: Profi-Bereich - Templates selber erstellen |
CSS-Datei zum Template → |
| ↑ Startseite Profi-Abschnitt | ↑ Anfänger-Bereich - Mambo erweitern-Templates | ↑ Startseite Schnelleinstieg |
Willst du kein vorhandenes Template nutzen und auch kein Template umbauen (siehe auch ...) , so müssen verschiedene Dateien angelegt werden.
Inhaltsverzeichnis |
[Bearbeiten] Grundstruktur
Damit das Mambo-System das Template nutzen kann, müssen die benötigten Dateien bestimmte Namen haben und in einer genau festgelegten Struktur abgespeichert werden. Abweichungen würden dazu führen, dass das Template nicht genutzt oder erst gar nicht installiert werden kann.
Ordner- und Verzeichnisstruktur:
-templatename | +-----css | template_css.css | (Hier können natürlich weitere, eigene css-Dateien abgespeichert werden) | +-----images | Hierher kommen die Dateien, die im Template verwendet werden | | templateDetails.xml | template_thumbnail.png <<- Screenshot des Templates mit 200x150px | index.php
Das Verzeichnis templatename muss für eine Installationsdatei in Form einer zip-Datei verpackt werden.
[Bearbeiten] Zwingend benötigte Dateien
Mambo benötigt in einem Template bestimmte Dateien damit die Anzeige funktioniert.
- index.php: Die Hauptdatei in der die Modul- und Inhaltspositionen festgelegt werden ( oder zumindest die Container dafür erzeugt werden)
- template_thumbnail.png: Ein Screenshot des Templates (max. 200x150px) das zur Anzeige im Backend und evtl. im Templatechooser verwendet wird.
- templateDetails.xml: Die Installationsinformationen
- css/template_css.css: Ein Cascading Style Sheet. Hier werden die Formatierungen für den Inhalt festgelegt. Muss nicht zwingend template_css.css heißen.
- images/indent1.png bis indent9.png: Wird für die Einrückung von Untermenüs verwendet. Wenn diese Bilddatei fehlt, erscheinen im Internet Explorer hässliche Fehlerkästchen. Je nach Tiefe der Einrückung werden mehr Bilder benötigt.
Tipp: Ein kleines PNG mit 1px Höhe und 5px Breite und transparentem Hintergrund verwenden.
[Bearbeiten] Datei index.php
In der Datei index.php befinden sich php-Befehle und die Informationen, aus denen das Mambo-System dann das Aussehen einer Seite generiert.
[Bearbeiten] Kopf der Datei
<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <?php echo "<?xml version=\"1.0\"?>"; ?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title><?php echo $mosConfig_sitename; ?></title> <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
Die erste Zeile ist eine Sicherheitsabfrage, die verhindert, daß das Template über einen direkten Link aufgerufen wird. Ist alles in Ordnung, wird eine reguläre HTML-Datei ausgegeben, wobei an den definierten Stellen Informationen aus dem Mambo-System eingetragen werden. Das Template selbst besteht also aus normalem HTML-Code, die Daten aus dem Mambo-System werden mit der Skriptsprache PHP in den HTML-Code eingefügt. Einfügungen mit PHP erkennt man immer an <?php ?>.
Man beachte, daß das Mambo-System den HTML-Code in XHTML ausgibt. Um seine Webseite standard-konform zu gestalten, sollte man daher auch seinen selbstgeschriebenen Code in XHTML schreiben.
In den letzten beiden Zeilen werden nun Daten aus dem Mambo-System heraus in das Template geschrieben: einmal der Seitentitel, wie er in den globalen Einstellungen im Mambo-Backend festgelegt ist und der eingestellte Zeichensatz des Inhaltes.
An dieser Stelle soll nicht weiter auf die Erstellung von Webseiten mit HTML eingegangen werden. Die Lektüre geeigneter Handbücher sei dem werten Leser dringend ans Herz gelegt. Eine gute deutsche HTML-Dokumentation findet sich unter de.selfhtml.org
[Bearbeiten] Anzeige des Editors im Frontend:
Es gibt dazu zwei Möglichkeiten. Entweder ...
<?php
if ($my->id) {
include ("editor/editor.php");
initEditor();
}
?>
... oder:
<?php
if($my->id){
if(isset($_REQUEST["task"]) && ($_REQUEST["task"] == "edit" || $_REQUEST["task"] == "new")) {
include ("editor/editor.php");
initEditor();
}
}
?>
Bei Verwendung des zweiten Codes, wird der Editor nur geladen wenn man eingeloggt ist und "new" oder "edit" drückt. Einige Komponenten verwenden andere Begriffe, die kann man hier problemlos ergänzen. Dazu muß man in der URL zum Editor den "task" suchen und mit hinzufügen. Für task=modify z.B. einfach das hier ergänzen >> || $_REQUEST["task"] == "modify"
Unvollständige Sammlung was so vorkommt:
- $_REQUEST["task"] == "edit"
- $_REQUEST["task"] == "new"
- $_REQUEST["task"] == "modify"
- $_REQUEST["task"] == "add"
- $_REQUEST["task"] == "doc_edit"
- $_REQUEST["task"] == "upload"
Damit wird die Seite beim normalen Surfen deutlich schneller, da man nicht unnütz die über 100 kb des Editors mit lädt.
<?php mosShowHead(); ?>
Der Befehl um die so genannten Metadaten (teilweise für Suchmaschinen von Bedeutung) fest zu legen. Dieser Befehl wird erst seit der Version 4.5.1 verwendet. Bei den Mamboversionen vor 4.5.1 mussten die Daten per "Include" aus einer Extra-Datei eingefügt werden.
<?php include ("includes/metadata.php"); ?>
Die Metadaten ergeben sich aus den globalen Einstellungen und den Metadaten der "Inhalte".
<script language="JavaScript" type="text/javascript">
<!--
function MM_reloadPage(init) {
// TEIL I -laden der Seite:
// Wenn übergebener Parameter wahr ist unter zuhilfenahme des navigator-Objekts...
if (init == true) with (navigator) {
// ... das parsende Programm auf Namen und Version prüfen...
// ... wenn Programmname "Netscape" und zugleich Programmversion "4" ist...
if ( (appName == "Netscape") && (parseInt(appVersion) == 4) ) {
// ... die innere Fensterbreite und -höhe in Variablen festhalten...
document.MM_pgW = innerWidth;
document.MM_pgH = innerHeight;
// ... und sich selbst ohne Parameter (TEIL II) ausführen wenn Fenstergröße geändert wird
onresize = MM_reloadPage;
}
}
// TEIL II -nach Größenänderung:
// Wenn übergebener Parameter falsch ist...
else {
// ... und die innere Fensterbreite und -höhe nicht mit den entsprechenden...
// ... Werten aus den Variablen übereinstimmen...
if (innerWidth != document.MM_pgW || innerHeight != document.MM_pgH) {
// ... die Seite neu laden
location.reload();
}
}
}
// Aufruf der obigen Funktion (TEIL I) wenn Seite geparsed wird
MM_reloadPage(true);
//-->
</script>
Dieser Codeschnipsel nennt sich "Netscape Resize Fix" er sorgt dafür das im Netscape 4 beim verändern der Fenstergröße ein reload gemacht wird, da es ansonsten zu Darstellungsfehlern kommen kann. Es gibt hier und hier auch noch einen "Opera Resize Fix".
<link href="<?php echo $mosConfig_live_site;?>/templates/meinTemplate/css/template_css.css" rel="stylesheet" type="text/css" />
Laden der CSS-Datei. Hier muss der Pfad angepasst werden. Z. B. aus meinTemplate wird mamboTemplate
Immer beliebter wird die Verwendung von so genannten Favicons. Diese kleinen Bildchen werden zusammen mit den Bookmarks abgespeichert und in der URL-Zeile des Browsers angezeigt:
<link rel="shortcut icon" href="<?php echo $mosConfig_live_site;?>/images/favicon.ico" />
...oder wenn man das Bild an anderer Stelle im Template-Verzeichnis ablegen will:
<link rel="shortcut icon" href="<?php echo $mosConfig_live_site;?>/templates/meinTemplate/images/favicon.ico" />
</head> <body> Hier wird festgelegt, wie die Seite aussehen soll. Mehr dazu im nächsten Abschnitt! </body> </html>
[Bearbeiten] Struktur der Templates
Wie eingangs erwähnt, besteht ein Mambo-Template aus einer normalen HTML-Datei, in die vom Mambo-System generierte Abschnitte eingefügt werden. Zunächst gilt es festzulegen, welche Teile vom Mambo-System, z.B. Content-Bereich, Umfragen, News, Hauptmenü, Metamenü, Suche, etc., überhaupt eingesetzt werden sollen. Danach ist beim Design darauf zu achten, das für die vom Mambo-System generierten Abschnitte auch genügend Platz vorhanden ist. Den Aufbau eines typischen 3-Spalten-Layouts zeigt folgende Grafik:
Es ist auch möglich bestimmte Module nur bei Bedarf anzuzeigen, d.h. wenn dort auch ein Modul veröffentlicht ist. Mehr Information dazu siehe >> Unbenutzte Module ausblenden.
Für den Aufbau des Templates gelten die allgemeinen Regeln und Vorgehensweisen beim Aufbau von Webseiten in HTML. Es können also auch die üblichen HTML-Editoren verwendet werden. Unter SelfHTML wird der Aufbau einer Webseite beschrieben.
Der vom Mambo-System generierte HTML-Code lässt sich mit dem Style-Parameter an die verschiedenen Strukturierungsmöglichkeiten anpassen. Mehr dazu im nächsten Abschnitt.
Eine gute Einführung in CSS-Layouts (ohne Tabellenmissbrauch) ist ebenfalls bei SelfHTML > CSS-basierte Layouts zu finden. Beispiel für ein solches css-Template ist das in der Standard-Installation enthaltene Template "Solarflare".
Warum man das Layout besser ohne Tabellen gestalten sollte, kann man hier nachlesen:
- www.barrierefreies-webdesign.de
- ct' Artikel >> Webseiten für Sehbehinderte zugänglich machen, Teil 1
- ct' Artikel >> Webseiten für Sehbehinderte zugänglich machen, Teil 2
- Wikipedia zu "Barrierefreies Internet
- → Informationen aus dem Internet zum Layout mit CSS.
[Bearbeiten] Module anzeigen
Innerhalb der Struktur werden nun über die php-Befehle die einzelnen Modul-Bereiche festgelegt. An diesen Stellen setzt dann das Mambo-System den von den Modulen aufbereiteten HTML-Code ein.
Allgemein lautet der Befehl:
<?php mosLoadModules('bereich'); ?>
Für bereich kann man dabei folgende Werte einsetzen:
top, bottom, left, right, inset, banner, header, footer, newsflash, legals, pathway, user1 bis user9, advert1 bis advert3,
Nur in Backend Templates werden auch die Bereiche toolbar, cpanel, icon und debug verwendet.
Module können seit Mambo 4.5.1 allerdings nicht nur als Tabelle, sondern auch in anderen Formaten ausgegeben werden. Dazu gibt es den Style Parameter:
<?php mosLoadModules('bereich', style) ?>
Werte die style annehmen kann:
- 0 ... Der Wert der auch angenommen wird wenn kein Wert mit angegeben wird. Führt dazu, dass die Module in einer Tabelle untereinander dargestellt werden.
- 1 ... Führt dazu, dass die Module in einer Tabelle nebeneinander dargestellt werden.
- -1 ... Die Module werden ohne Überschriften und ohne Formatierung durch Tabellen oder sonstige Tags einfach nebeneinander gehängt. Sozusagen als Rohdaten.
- -2 ... Die Module werden in einen <DIV>-Tag gepackt und können per CSS positioniert werden.
 |
Ab Version 4.5.3 gibt es auch noch den Wert:
|
Beispiele dafür, was die Werte genau bewirken, befinden sich im Kapitel >> API - mosLoadModules
Welche Module in welchem Bereich angezeigt werden, wird nicht im Template, sondern im Backend, also dem Administration-Bereich, festgelegt (siehe → Modulpositionen im Template).
Steht zum Beispiel in der Datei index.php in einer Tabellenzelle (durch die <td>-Tags festgelegt):
...
<td><?php mosLoadModules('right'); ?></td>
...
so werden in dieser Tabellenzelle alle Module angezeigt, für die im Backend die Position right eingestellt ist. In welcher Reihenfolge dies bei mehreren Modulen geschieht, wird ebenfalls im Modulmanager im Backend festgelegt.
Der eigentliche Inhalt:
Früher (in Mambo < 4.5.1) wurde die Position des Inhalt über den folgenden Befehl festgelegt:
<?php include_once("mainbody.php"); ?>
Ab Version 4.5.1 soll der eigentliche Inhalt geladen werden per:
<?php mosMainBody(); ?>
[Bearbeiten] Unbenutzte Module ausblenden
Modulpositionen, die nicht auf allen Seiten belegt sind, können durch eine if Abfrage ausgeblendet werden. Die Tabellenzelle im Beispiel, die sich zwischen { } befindet, wird nicht dargestellt, wenn auf "right" kein Modul veröffentlicht ist.
Beispiel:
<?php if (mosCountModules( "right" )) { ?>
<td>
<?php mosLoadModules( "right" ); ?>
</td>
<?php } ?>
[Bearbeiten] Eigene Bereiche definieren
Neben den oben genannten Bereichen, in welchen ein Modul ausgegeben werden kann, kann man in Mambo auch eigene Bereiche definieren. Das geschieht über den Menüpunkt Seite | Template Manager | Modulpositionen. Dort findet man bereits eingetragen die oben aufgeführten Standard-Bereiche und freie Felder, in die man Namen für selbst definierte Bereiche eintragen kann.
Mit einem Klick auf "Speichern" werden die neuen Bereiche übernommen und stehen dann für die Ausgabe von Modulen wie oben gezeigt zur Verfügung.
[Bearbeiten] Datei templateDetails.xml
In der Datei templateDetails.xml stehen Informationen über das Template zusammen mit den Bestandteilen, wie Bildern, ... . Die Informationen werden nach der Installation teilweise im Template-Manager im Backend des Mambo-System angezeigt.
[Bearbeiten] Informationen über das Template
Die ersten zwei Zeilen definieren die Art des Inhaltes und zeigen dem Installationsprogramm, das es sich bei der gepackten Datei um ein Template handelt:
<?xml version="1.0" encoding="iso-8859-1"?> <mosinstall type="template">
Im folgenden Abschnitt stehen die Informationen, die im Template-Manager angezeigt werden:
<name> NameDesTemplates </name> <creationDate> DatumDerVeröffentlichung </creationDate> <author> TemplateErsteller </author> <copyright> Angabe der Lizenz </copyright> <authorEmail> AutorenName@Domain.de </authorEmail> <authorUrl> www.Domain.de </authorUrl> <version> Nummer </version> <description> Beschreibung des Templates </description>
[Bearbeiten] Benötigte Dateien für das Template
Die folgenden Zeilen enthalten Informationen über die im Template verwendeten Dateien. Alle Dateien müssen aufgeführt werden. Fehlende oder falsch geschriebene Dateien führen dazu, dass die Installation nicht funktioniert:
<files>
<filename> index.php </filename>
<filename> template_thumbnail.png </filename>
</files>
<images>
<filename> images/grafik1.jpg </filename>
<filename> images/grafik2.jpg </filename>
<filename> ... usw. </filename>
</images>
<css>
<filename> css/template_css.css </filename>
</css>
</mosinstall>
[Bearbeiten] Datei template_css.css
In dieser Datei wird das genaue Aussehen, die Schriftdarstellung, Farben, Abstände usw. , festgelegt. Dazu mehr auf der nächsten Seite.
| ↑ Profi-Startseite - API | Das Mambo-Buch: Profi-Bereich - Templates selber erstellen |
CSS-Datei zum Template → |
| ↑ Startseite Profi-Abschnitt | ↑ Anfänger-Bereich - Mambo erweitern-Templates | ↑ Startseite Schnelleinstieg |
