Das Zen Theme. Drupal User Group Berlin Naori

Transkript

1 Das Zen Theme Drupal User Group Berlin Naori

2 Vorwort Jede Website eines Designers ist theoretisch mit dem Zen Theme umsetzbar. Oft kommen Vorgaben von Agenturen oder Designern, die in Drupal umgesetzt werden sollen Freie Gestaltung von Regionen ermöglicht pixelgenaue Umsetzungen der Vorgaben

3 Blicke auf ein Theme Frontend Sichtbarer Bereich erzeugt durch HTML-Ausgabe sowie verknüpfte CSS-Dateien Backend Layout-Variante (Welche Regionen benötige ich?) Schnelle Anpassungsfähigkeit des HTMLs leichte Erweiterbarkeit der Klassen Theme Engine Betrachtung der Klassenerzeugung und der Einbindungsmöglichkeiten eigener Templates Übersichtlichkeit von Verwaltungsoberflächen, Ordner- und Dateistukturen Qualität und Quantität von Code-Kommentaren

4 1. Theme Engine Eine Liste aller für Drupal relevanten Theme Engines findet sich auf Drupal.org: Standard-Theme-Engine, die der Drupal-Core schon mitbringt: PHP-Template Befindet sich im Ordner..\themes\engines\ phptemplate muss daher als einzige nicht nachträglich eingefügt werden Die Datei template.php ist der Identifier für diese Theme Engine (alternativ steht die zu verwendende Engine in der.info-datei des Themes)

5 1.1 PHP Template

6 2. CSS-Dateien Welche Möglichkeiten habe ich, weitere, eventuell eigene CSSDateien einzubinden? Indikator:.info-Datei des Themes In der.info des Zen-Starterkits stehen alle einzubindenden CSS-Dateien Einfaches Einfügen einer neuen Zeile gleicher Schreiweise bindet eine weitere Datei ein. Besonderheit: Vorgesehen sind schon CSS-Files für Handys, zusätzlich eines für iphone sowie die Klassiker ie.css und ie6.css

7 2.2 STARTERKIT.info

8 3. CSS-Klassen Es gibt zwei Betrachtungspunkte: 1 Fest eingetragene Klassen im HTML-Code der Template-Dateien 2 Vom Theme dynamisch erzeugte Klassen (finden sich im template.php) Wichtigstes Kriterium sind meist die Body-Klassen Entscheidung fällt an Hand des Aufwands des späteren Designs der Webseite (eventuell benötigt man alle Klassen, die Zen mittransportiert, gar nicht)

9 3.1 zen/template.php

10 4. HTML umschreiben Die vorgegebene Template-Struktur samt aller vorhandenen Kommentar-Erklärungen ermöglicht eine schnelle Anpassung des HTML-Outputs In Zen 2.0 überarbeitet: PHP wurde maximal ausgelagert, so dass die HTML-Gerüste leicht überschaubar bleiben und nur per Variablen befüllt werden Es gibt Templates für fast jedes beliebige Inhaltselement (Blöcke, Pages, Nodes, Comments), die alle erkennbar am Dateinamen aufeinander zugreifen Jede Datei beinhaltet im Kopfbereich eine auskommentierte Liste aller verwendbaren bzw. verwendeten Variablen und ihrer Bedeutungen

11 4.1 Kommentare

12 5. Templates einbinden Die PHP Template Engine durchsucht den Ordner nach allen Dateien, die auf.tpl.php enden: $templates += drupal_find_theme_templates($existing, '.tpl.php', $path); Nach vorgegebenen Namensstrukturen und der bereits bekannten Überschreibe-Logik bei Drupal werden diese Dateien ausgewertet: Beispiel: Das Layout, welches nur mein neu angelegter Inhaltstyp Biografie bekommen soll, wird benannt als node-biografie.tpl.php Jedes Modul kann zusätzlichetemplate-dateien mitbringen, die dann im Theme-Ordner nur eingebunden werden müssen und sofort ausgewertet werden

13 6. Layout-Typ Interessant in Bezug auf Suchmaschinenoptimierung und Barrierefreiheit (Screenreader) Zen bietet freie Entscheidung durch die freie Editierbarkeit von Regionen in den Template-Dateien (neue Regionen werden in den Templates definiert und dann in der.info des Themes eingetragen => fertig!) Zen-Standard und nice-to-have : Holy Grail

14 6.1 Holy Grail

15 7. Oberflächen-Möglichkeiten Zusammenarbeit mit dem Modul Zenophile und dessen Untermodulen (z.b. Zenophile-Sidebars): Schnelles Erzeugen von neuen Zen-Templates auf Knopfdruck Erzeugen eigener leerer CSS-Dateien Einstellen der Gesamtseitenbreite sowie der Sidebars Sortierreihenfolge der Spalten festlegen Zen selbst bringt neben den Drupal-Standards Einstellmöglichkeiten für die Breadcrumb mit sowie interne Theme Development Erleichterungen Zudem gibt es an jedem Element Bearbeiten-Button

16 7.1 Zenophile Integration

17 S.Schröpfer 2010