Benutzer-Werkzeuge

Webseiten-Werkzeuge


addons:tpl:headers

Dies ist eine alte Version des Dokuments!


Für Fortgeschrittene: headers.inc.php

Viele Template-Designer wünschen sich für Website Baker schon lange erweiterte Steuermöglichkeiten, etwa um bestimmte (große) JavaScripts nur dann zu laden, wenn bestimmte Bedingungen erfüllt sind. BlackCat erfüllt diesen Wunsch durch die Datei headers.inc.php.

Es handelt sich hierbei um PHP-Code, die Anwendung erfordert also zumindest Basiskenntnisse im Umgang mit PHP!

Der grundlegende Aufbau der Datei besteht in einem multidimensionalen Array, mit dessen Hilfe zusätzliche CSS- und JavaScript-Dateien, jQuery und jQuery UI sowie META-Tags in den Seitenkopf übertragen werden können. Hierzu gliedert sich das Array zunächst in zwei Hauptschlüssel:

$mod_headers = array(
    'backend' => array(),
    'frontend' => array(),
);

Für Frontend-Templates ist natürlich der Bereich 'frontend' interessant, während 'backend' von Backend-Themes verwendet wird.

Die beiden Hauptbereiche untergliedern sich nun in eine Reihe von Unterschlüsseln:

Schlüssel Typ Inhalt
css multidimensionales Array Liste zusätzlicher CSS-Dateien; die frontend.css wird automatisch gesucht und geladen und muß hier nicht extra aufgeführt werden.
js Array Liste zusätzlicher JavaScripts; die frontend.js wird automatisch gesucht und geladen und muß hier nicht extra aufgeführt werden.
jquery multidimensionales Array Erlaubt das Hinzufügen von jQuery, der jQuery UI sowie eines UI Themes. Die jQuery UI beinhaltet alle Komponenten, diese müssen also nicht gesondert aufgeführt werden.
meta Array Liste der META-Tags

Aufgefüllt sieht das nun bisher so aus:

$mod_headers = array(
    'frontend' => array(
        'css' => array(),
        'js' => array(),
        'meta' => array(),
        'jquery' => array(),
    ),
);

Zusätzliche CSS-Dateien

Bei CSS sind zwei Dinge wichtig: Die Adresse (URL) der einzubindenden Datei und die Einstellung für media, also das Ausgabemedium, für die das Stylesheet gelten soll. (Weiterführende Infos hierzu unter http://de.selfhtml.org/css/formate/einbinden.htm#link_media)

Aus diesem Grund sieht jeder Eintrag im 'css'-Unterarray folgendermaßen aus:

    array('file' => '<URL des CSS>', 'media' => '<Medientyp(en)>'),

Standardmäßig wird als Medientyp 'screen,projection' verwendet, so daß der Schlüssel media auch weggelassen werden kann:

    array('file' => '<URL des CSS>'),

Mehrere CSS-Dateien fügt man nun ein, indem man für jede Datei obige Zeile (mit oder ohne media) einfügt:

$mod_headers = array(
    'frontend' => array(
        'css' => array(
            array('file' => 'sheet1.css'),
            array('file' => 'printer.css', 'media' => 'print'),
            ...
        ),
        ....
    ),
);

(Anmerkung: In der echten headers.inc.php keine '…' verwenden, sie dienen nur der Verdeutlichung, daß da noch mehr stehen kann.)

addons/tpl/headers.1416926727.txt.gz · Zuletzt geändert: 2014/11/25 00:00 (Externe Bearbeitung)