HTML5 Experiment: Quelltext
Kategorie Web | Keine Kommentare »
Inzwischen läuft dieser Blog seit einigen Tagen mit meinem neuen HTML5 Theme. Bis jetzt sind mir noch keine Beschwerden gekommen. Wie versprochen, stelle ich heute noch den Quelltext des Themes zur Verfügung.
Das Erstellen eines neuen WordPress Themes unterteilt sich in mehrere Phasen:
- grafisches Design erstellen, etwa in Photoshop (fiel bei mir weg, da ich mein bisheriges Design weitestgehend übernehmen wollte)
- grafisches Design in einer statischen HTML Datei plus zugehörigem CSS umsetzen
- statische HTML Seite in PHP gemäß den WordPress Konventionen umwandeln
Phase 1 kann natürlich noch feiner untergliedert werden. Zunächst sammelt man die Anforderungen an das neue Theme, etwa meine ursprünglich aufgestellten Forderungen. Zu diesem Zeitpunkt entscheidet man sich auch für den aktuellen Webdesign Trend, dem man folgen möchte (etwa Flat Design). Anschließend setzt man diese Ideen dann mit einem grafischen Werkzeug um. Für eine professionelle Seite könnte man dann noch einen Nutzertest mit entsprechenden Klickprototypen machen. Das wäre natürlich für einen privaten Blog etwas übertrieben ;-)
Nachdem man einen grafischen Entwurf hat, erstellt man in Phase 2 eine erste technische Implementierung. Werkzeuge wie Photoshop können dabei unterstützen und zum Beispiel das Grundgerüst der Seite plus zugehöriges CSS generieren. Ich persönlich bin nicht besonders überzeugt von den so generierten Ergebnissen und erstelle HTML/CSS lieber händisch. Am Ende dieser zweiten Phase sollte man dann ein vollständig funktionierende Layout haben, das alle Anforderungen erfüllt. Meine 5. Iteration der zweiten Phase kam dem endgültigen Ergebnis schon recht nah.
Erst jetzt zerschneidet man die HTML Datei in die benötigten PHP Schnipsel für WordPress. WordPress gibt die zu erstellenden PHP Dateien vor. Die Datei index.php enthält zum Beispiel den Gesamtaufbau der Seite, aber die einzelnen Inhalte wie Kopf- und Fußbereich oder einzelne Artikel und Seitenspalten werden in eigene Dateien ausgelagert.
Ein kurzer Blick in die resultierende index.php Datei zeigt, dass das ursprüngliche HTML kaum noch erkennbar ist, da fast jede Zeile durch mehrfache PHP Einschübe zerstückelt wird. Jetzt wird auch klar, warum man die dritte Phase erst beginnen sollte, wenn man keine größeren Umbauten mehr plant, denn ein Umbau ist jetzt kaum noch nachvollziehbar und fehleranfällig.
Absolut notwendig sind für ein WordPress Theme lediglich die Dateien
- index.php und
- style.css.
Alle anderen wie archive.php dienen nur dafür, dass man für spezielle Seitentypen angepasstes HTML generieren kann. Ich habe darauf weitestgehend verzichtet und stattdessen die wenigen Spezialfälle wie Darstellung von statischen Seiten (im Gegensatz zu einem Blogartikel) durch unhübsches if-then-else Gemetzel umgangen. Die Alternative wäre gewesen, zentrale Bereiche der Seite wie Seitenaufbau in diesen Spezialdateien nochmals vollständig zu wiederholen, was zu einer nur schwer wartbaren Redundanz führt. Hier merkt man, dass WordPress sich doch eher an einfachere Seiten richtet. Mit einem komplexeren CMS wie Drupal kann man solche Redundanz vollständig vermeiden, erkauft sich dies aber über eine höhere Komplexität des Gesamtsystems.
Ich habe den gesamten Quelltext des Themes auf GitHub hochgeladen. Ich freue mich natürlich über Kommentare oder Verbesserungsvorschläge in Form von Pull Requests auf GitHub :-)