Template-Tipps: Welche Dateien wofür zuständig sind

5 Dinge braucht das Template: index.php, info.php, editor.css, template.css und template.js.
Welche dieser Dateien ist wofür genau zuständig? Was muss, was soll und was darf?

Die Minimalanforderung an ein Template sind:

index.php:

Enthält alles HTML und PHP. Das CMS fügt davor und danach nichts ein. Eine leere index.php erzeugt auch nur eine leere Seite, aller Inhalt kommt erst durch einfache Funktionsaufrufe hinein.

info.php

Enthält nur Informationen über das Template; die Anzahl und Namen der Blöcke und Menüs, einige Standardangaben.

Darüber hinaus gibt es keinerlei Vorgaben. Natürlich wird man ein CSS-File brauchen, das kann aber irgendwie heißen oder sogar auf einem anderen Server liegen – etwa Bootstrap.

Dennoch gibt es einige Standards, an die man sich halten sollte. Meist ist es ja egal, wie man eine Datei nennt, man tut sich aber viel leichter, wenn man zb im Forum Hilfe braucht und die Dinge gleich beim richtigen Namen nennen kann – und wenn man weiß, wo man ein Problemchen suchen soll.

editor.css

Diese Datei wird vom WYSIWYG-Editor eingebunden und soll die grundsätzlichen Formatierungen der HTML-Tags: a, h1, h2, h3.. blockquote enthalten. Alles was man im Editor erzeugen kann, soll gleich richtig dargestellt werden.

Zusätzlich sollten auch gleich die Classes für die responsive Darstellung dieser Elemente enthalten sein: img, table.table, einige weitere. Es ist ja nicht ausgeschlossen, dass auch das Backend responsiv wird.

Tipps:

Schau dir einige neuere Templates an und kopiere die editor.css in dein Template. Normalerweise musst du nur wenig ändern: Schrift, Schriftfarben und -größen. Bei Templates vom gleichen Autor ist die editor.css oft sehr austauschbar.

template.css

Diese Datei heißt auch oft style.css oder anders. Ich empfehle, den Namen template.css zu verwenden, es macht die Kommunikation leichter.

In dieser Datei ist alles an CSS, was direkt zum HTML des Templates gehört: Blöcke, Menü… dazugehörige Media-Queries. Üblich ist mittlerweile auch, hier auch gleich die Print-Version zu definieren, eine eigene print.css ist nicht mehr empfohlen.

Tipps:

Ich versuche, alles was Farben (und nicht grau) ist, gesammelt in der editor.css unterzubringen. Das macht es leichter, die Farben zu ändern.

In jedem Fall sollte editor.css als vorletzte css-Datei geladen werden, und template.css als letzte. Manche Angaben in editor.css müssen später wieder geändert werden, etwa wenn ein Block weiße Schrift enthalten soll.

template.js

Auch diese Datei kann beliebige Namen haben, aber… naja – eben.

Ein bisschen Javascript ist immer nötig. Je nachdem, wie wichtig dieses für die Funktion der Seite ist, kann sie bereits im <head> eingebunden sein, wenn möglich sollte man sie aber erst im Footer vor dem </body> geladen werden. Das macht das Leben in der Regel auch einfacher, weil man sicher sein kann, dass alles an vars, Ids und classen vorhanden ist, was die Fehlersuche sehr vereinfachen kann.

Allzu weit am Ende sollte es aber nicht sein, weil die meisten Module ihre eigenen JS-Häppchen mitbringen, und das kann zu Konflikten führen.

Weitere Dateien

Slider, Teaser, PHP-Includes, spezielle Funktionen… es ist üblich, diese in Unterordner zu stellen und – wenn möglich – nur bei Bedarf aufzurufen.

Generell sollte man die Anzahl der Dateiaufrufe im Auge behalten. Es ist meist besser, eine größere als viele kleine Dateien zu machen, auch wenn man nicht immer alles braucht. Wenn also das CSS für den Slider nicht ausufernd groß ist, sollte man es in die template.css kopieren.

Ebenso beschränken sich die Print-Angaben in der Regel auf ein paar display:none; die locker an das Ende der template.css passen.

Bei manchen Templates findet sich eine mobile.css, die nur auf Smartphones aufgerufen werden soll. Das ist mittlerweile kontraproduktiv, weil ja gerade Smartphones diese brauchen, aber bei instabilen Verbindungen ein weiterer Ladevorgang dazu kommt. Bei einem Desktop-PC tragen die – überflüssigen – Zeilen hingegen nicht auf.

 

Zusammengefasst: folgende Dateien sind in jedem besseren Template mindestens enthalten

index.php zwingend, das eigentliche Template.

info.php zwingend, Informationen über das Template

editor.css (fast) zwingend: Schriften, Farben, für die Anzeige im WYSIWYG Editor.

template.css (Name frei, aber empfohlen): alles CSS für die Blöcke, Menü usw.

template.js  (Name frei, aber empfohlen): alles JS für das Template (Menü, Funktionen)

Zurück

Kommentare:

Ich finde es besser, eine eigene mobile.css zu verwenden, einfach weil es übersichtlicher ist. In diese kommen auch die Anweisungen, die für einige Module gelten.

Ergo
Antworten