Eine Layoutdatei ist eine ganz normale HTML-Seite mit allem was dazu gehört. Layoutdateien dienen als Vorlage zum erstellen neuer Seiten und werden mit der Endung .tpl im Verzeichnis /content/layouts gespeichert.
Wichtig! Wenn keine Platzhalter vergeben und keine Menü- und Blockdateien angelegt werden, erscheint der Punkt "Bearbeiten" nicht im Adminmenü. Wenn diese Funktionsweise erwünscht ist, kann in der Datei "/settings/globalvars.php" die Variable $webutler_config['fullpageedit'] auf 1 gesetzt werden, um den Punkt "Aktuelle Seite bearbeiten" ins Adminmenü zu verschieben. !!!
Damit neue Links automatisch auf allen Seiten erscheinen, können Menüs in separaten Dateien gespeichert werden. Damit ein Menü geladen wird, muss der Dateiname mit Kommentarfeldern in die Layoutdatei bzw. Seite geschrieben werden. Format:
<!-- begin_menu_MENÜDATEINAME -->
<!-- menu_MENÜDATEINAME -->
<!-- end_menu_MENÜDATEINAME -->
Blöcke bieten sich an, wenn ein Inhalt auf verschiedenen Seiten angezeigt werden soll und man diesen Inhalt zentral ändern möchte. Die Formatierung ist gleich der für Menüs:
<!-- begin_block_BLOCKDATEINAME -->
<!-- block_BLOCKDATEINAME -->
<!-- end_block_BLOCKDATEINAME -->
Inhaltsbereiche, die sich im Editor öffnen sollen, werden in Kommentare eingefasst. Format:
<!-- begin_content -->
bearbeitbarer Inhalt
<!-- end_content -->
Die Kommentare sollten von einem HTML-Blockelement (am besten DIV) umschlossen sein und dürfen nicht verschachtelt werden, z.B. ein Menü innerhalb von <!-- begin_content --> und <!-- end_content -->.
Alle Menüs müssen als "Unordered List = UL" angelegt sein, damit sie mit den vorgesehenen Funktionen des Editors bearbeitet werden können!
Man kann Bereiche in den Editoren kennzeichnen bzw. sichtbar machen, in dem man ihnen CSS-Klassen zuweist:
wb_menuelement - für Menüs
wb_blockelement - für Blöcke
wb_contentelement - für bearbeitbaren Inhalt
Die Klassen müssen an ein umschliessendes DIV vergeben werden. Andere Elemente wie SECTION, HEADER, FOOTER etc. werden nicht unterstützt.
Wenn eine eigene Fehlerseite angelegt wird, muss zur Ausgabe der Fehlermeldung folgendes in der Datei stehen:
<?PHP echo $webutlercouple->errorpagetext; ?>
Für ein reibungsloses einfügen neuer Spalten-Elemente ist die Vergabe von CSS-Klassen an die verschiedenen Seitenelemente zwingend erforderlich.
Wer die Spalten-Elemente nicht nutzen möchte, kann in der Datei /settings/globalvars.php die Variable $webutler_config['insertcolumn'] auf 0 setzen. Dann kann nur noch ein DIV ohne Formatierung mit Editor eingefügt werden. Das DIV hat die Klasse "wb_baseelement".
Einspaltige Elemente haben die Klasse
wb_frameelement
mehrspaltige Elemente die Klasse
wb_columnselement
Neue Spalten-Elemente können nur außerhalb von DIVs mit den Klassen "wb_menuelement", "wb_blockelement", "wb_baseelement", "wb_frameelement", und "wb_columnselement" eingefügt werden. Wenn die Klassen nicht gesetzt werden, könnten Verschachtelungen entstehen, die die Administration unbedienbar machen würden.
Unter dem Menüpunkt Seite > Spalten wird das neue Spalten-Element konfiguriert. Nachdem das Element ausgewählt wurde, kann es vor oder nach jedem in der Seite befindlichem DIV mit einem der oben genannten 5 CSS-Klassen eingefügt werden. Wenn keine der Klassen existiert, können keine Spalten ausgewählt werden. Es sollte deshalb mindestens einmal die Klasse wb_baseelement, wb_frameelement oder wb_columnselement in der Seite (bzw. Layoutdatei) stehen.
Spalten-Einstellungen wie z.B. Abstände können in der "columns.css" vorgenommen werden. Zu finden unter System > CSS & JS.
Alle mit den Klassen wb_frameelement oder wb_columnselement gekennzeichneten Spalten-Elemente können geändert und gelöscht werden. Elemente mit der Klasse wb_baseelement können nur gelöscht werden.
Wenn Spalten im Editor eingefügt werden, werden sie mit grauer Umrandung gekennzeichnet. So können Spaltenelemente auch verschachtelt werden. In der globalvars.php kann auch eingestellt werden, dass Spalten nur im Editor einfügbar sind.
Spalten im Editor sind nicht bearbeitbar bzw. nur über den Quelltext änderbar.
Dem Menüpunkt der aktuellen Seite kann mit einer CSS-Klasse ein anderes Aussehen gegeben werden. Wenn ein verschachteltes Menü genutzt wird, kann die Klasse auch den Eltern-Elementen zugewiesen werden. Bei mehreren Menüs ist für jedes Menü eine andere Klasse möglich.
Virtuelle Verzeichnisse können angelegt werden. Seiten werden einem Verzeichnis zugeordnet und bei Aufruf erscheint das Verzeichnis in der URL. Verzeichnisse sind nur in der URL sichbar.
Das Hervorheben von Verzeichnissen funktioniert ähnlich wie das Hervorheben von Eltern-Elementen bei einem verschachteltem Menü, stellt dabei aber eine Verbindung zwischen 2 separaten Menüs her.
Es können beliebig viele Unterkategorien und Untermenüs gesetzt werden.
Beispiel:
1. Es gibt ein Hauptmenü mit dem Menüpunkt "Services", der die Seite "info.phtml" aufruft.
2. Auf der Seite "info.phtml" gibt es ein zweites Menü mit den Seiten "service1.phtml" und "service2.phtml".
Jetzt will man, dass der Menüpunkt Services (Seite info.phtml) hervorgehoben wird, wenn man auf den Seiten service1.phtml oder service2.phtml ist. Dafür setzt man einfach alle 3 Seiten in ein Verzeichnis, z.B. "service", setzt eine CSS-Klasse für das Verzeichnis im Hauptmenü und das Häckchen bei "auch aktuelles Verzeichnis hervorheben".
Ergebnis:
Ruft man die Seite service1.phtml oder service2.phtml aus dem zweiten Menü auf, wird die Seite info.phtml im Hauptmenü hervorgehoben.
Wird das Häckchen bei "auch aktuelles Verzeichnis hervorheben" nicht gesetzt, wird die Seite info.phtml nicht hervorgehoben. Werden die Seiten service1.phtml und service2.phtml jedoch in ein Unterverzeichnis, z.B. "service/subservice", gesetzt, muss das Häckchen nicht gesetzt werden und info.phtml, also das Verzeichnis "service" wird hervorgehoben.
Wichtig! Wenn im selben Menü mehrere Seiten das gleiche Verzeichnis nutzen, werden alle diese Seiten hervorgehoben.
<script> ... </script> und <?PHP ... ?> Codeschnippsel dürfen nur im <head> und <body> Bereich einer Seite eingefügt werden. Codeschnippsel die außerhalb von <head> und <body> gesetzt werden bringen die Validierung im Editor durcheinander.
Mit der Variablen $webutler_config['codeicon'] = "1" in der globalvars.php können Codeschnipsel via Icon sichtbar gemacht werden. Die Icons funktionieren nicht immer problemlos! Icons sind Bilder und Bilder sind nicht an jeder Stelle im Quellcode valide. Hat man z.B. eine Liste und möchte einzelne Listenelemente per PHP steuern, könnte der Quelltext so aussehen:
<ul>
<li>Punkt 1</li>
<?PHP if($a == 1) { ?><li>Punkt 2</li><?PHP } ?>
<li>Punkt 3</li>
</ul>
Im Editor sieht die Liste so aus:
• Punkt 1
[<>] • Punkt 2 [<>]
• Punkt 3
Gespeichert wird aber:
<?PHP if($a == 1) { ?><?PHP } ?>
<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ul>
Wie man sehen kann wurden die Codeschnipsel vor das Blockelement (UL) verschoben. Default für $webutler_config['codeicon'] ist 0. Die Variable sollte nur auf 1 gesetzt werden, wenn Codeschnipsel, als <img /> gesehen, valide im Quellcode stehen.
Der WEButler fügt CSS- & JS-Dateien zu einer Datei zusammen und komprimiert diese. Zusammengefügt und komprimiert werden alle in der Datei /settigs/compress.php eingetragenen Dateien.
Stylesheet-Dateien werden unter dem Array-Key 'css',
Javascript-Dateien unter dem Array-Key 'js' abgelegt.
Die komprimierten Dateien werden in /content/compress unter den Namen styles.css und scripts.js abgelegt.
Der Vorgang wird automatisch ausgelöst, wenn eine Datei im Onlineeditor geöffnet und gespeichert wird. Wer seine Dateien nicht online bearbeitet, kann den Vorgang auch manuell im Fenster 'Erweiterte Administratorfunktionen' auslösen oder bei zeitaufwendigeren Entwicklungen die Variablen 'compressor_onload_css' und/oder 'compressor_onload_js' in der Datei /settings/globalvars.php auf 1 setzen.
Wichtig! Wenn Pfade (z.B. zu Bilddateien) in den Dateien vorhanden sind, müssen diese entsprechend angepasst werden.
Dateien wie CSS oder Javascript können automatisch in alle Seiten geladen werden. Dafür müssen die Dateien in die "settings/extradata.php" eingetragen werden. Einfach die folgenden Zeilen in die Datei kopieren:
$webutler_autoheaderdata[] = '<meta name="Bezeichnung" content="Inhalt" />';
$webutler_autofooterdata[] = '<script src="externes_script"></script>';
Wenn Dateien über Module geladen werden sollen, kann man folgendes in die Includedatei eingefügen:
$webutlercouple->autoheaderdata[] = '<meta name="Bezeichnung" content="Inhalt" />';
$webutlercouple->autofooterdata[] = '<script src="externes_script"></script>';
Machmal ist es nützlich den Dateinamen der letzten Seite zu kennen, z.B für Weiterleitungen oder als Alternative zu "history.back()". Dafür kann auf die Sessionvariable $_SESSION['history']['lastpage'] zugegriffen werden.
Wenn die Benutzerverwaltung installiert ist, werden die Authentifizierungsdaten des Users in der Sessionvariablen $_SESSION['userauth'] gespeichert.
Bei mehrsprachigen Seiten kann mit der Sessionvariablen $_SESSION['language'] die vom Besucher gewählte Sprache abgefragt werden.