Über die Entstehung des WordPress-Themes Azbalac, das auf diesen Seiten zum Einsatz kommt, hatte ich vor mehr als zwei Jahren bereits etwas geschrieben. In diesem Sinne ist dieser Beitrag mal wieder etwas “in eigener Sache”, doch wollte ich die Wiederholung des Titels vermeiden… Vielleicht, vielleicht auch nicht ist einigen Besuchern aufgefallen, dass das Theme Azbalac ein Update erhalten hat, was einen Versionssprung von der 0.2.15 auf die Version 0.3.0 verdient hat. Wobei – eigentlich fallen letztlich negative Aspekte mehr auf als wenn alles so funktioniert wie man es auch erwartet, insofern – wenn nun nichts weiter auffällt, ist dies bereits ein sehr positive Ergebnis und war den Aufwand absolut wert.
Ein erstes WordPress-Theme: Tikva
Also – wem nichts aufgefallen ist, dem verrate ich es gerne, denn subjektiv sollte der Seitenaufbau nun etwas schneller vonstatten gehen, d.h. insbesondere ruckelt die Seite nun weniger während des Renderns. Das liegt daran, dass nun endlich eine zeitgemäße Methode zum Laden des Header-Bildes eingesetzt wird. Wie so vieles, hat die bisherige Methode auch eine Geschichte. Ursprünglich begann die Entwicklung dieses Themes bereits Ende 2013, damals noch unter dem Namen “Tikva”, das Mitte 2014 veröffentlicht wurde und nach wie vor im WordPress-Theme-Repository verfügbar ist. Tikva ist jedoch längere Zeit nicht aktualisiert worden, außerdem verwendet es noch Bootstrap in der Version 3 als Grundlage, weshalb es mit Fug und Recht inzwischen als veraltet gelten kann.
Theme Next Generation: Azbalac
Das Theme Azbalac hingegen wurde – zwar nicht permanent, aber doch stetig weiterentwickelt, und natürlich setze ich es auch hier auf dieser Seite ein. Die Kernidee, eine Template-Engine einzusetzen anstatt wie Anfang der 2000er-Jahre mit einem kruden Mix aus HTML und PHP zu hantieren, gefällt mir übrigens noch immer. Beispielsweise habe ich mich direkt wieder im Template-Code zurecht gefunden, nachdem ich ungefähr ein Jahr lang nicht mehr damit gearbeitet habe. Das Manko bleibt natürlich bestehen, Azbalac wird nie im WordPress-Theme-Repository veröffentlicht werden können, da die Theme-Checks Funktionen zutage befördern, die der Aufnahme im Repository entgegen stehen, so erlaubt WordPress beispielsweise kein eval() oder base64_encode()/base64_decode(), die jedoch in der Template-Engine Twig verwendet werden und insofern nicht so einfach zu entfernen sind. Das heißt nun nicht, dass das Theme etwa unsicher wäre, ansonsten wäre die Benutzung von Twig per se unsicher, nur haben die WordPress-Autoren die Benutzung dieser Funktionen als nicht erwünscht deklariert.
Header-Images 2.0
Ein Ziel bei der Entwicklung des Themes war es, die Möglichkeiten von Bootstrap bei der Gestaltung von “Responsive”-Websites einzusetzen, so dass die damit erstellten Seiten auf allen Displays, bis herunter zu Smartphones, nutzbar sind. So orientierte sich auch der Einsatz der möglichen Bilder im Header an den von Bootstrap genutzten Responsive Breakpoints der Media-Queries. In Azbalac lassen sich bis zu vier Header-Bilder einsetzen, deren Auflösung sich unterscheiden kann (aber nicht muss), was zur Optimierung beiträgt, wenn etwa auf einem Smartphone-Display und mobilem Empfang nur ein Bild mit geringer Dateigröße geladen wird.
Vor etwa acht Jahren bestand meine Lösung dafür aus JavaScript-Funktionen, die die genutzte Browser-Breite auslesen und in Abhängigkeit davon dafür sorgen, dass das entsprechende Bild geladen und sichtbar gemacht wird. Genau dieses Verfahren sorgte dann auch immer für den beschriebenen “Ruckler”, denn zuerst musste der Seiteninhalt bzw. komplette DOM-Baum geladen und die JavaScript-Funktionen ausgeführt werden, bevor das Header-Bild an der Reihe war. Die Lösung funktionierte jedoch, es gab zwar diese Unschönheit, aber andererseits hatte ich bisher niemand beschwert, insofern blieb der Code erstmal bestehen.
Vor einigen Tagen habe ich mich jedoch aus anderen Gründen einmal wieder mit Azbalac beschäftigt, weshalb natürlich auch wieder die Header-Bilder aufgefallen sind. Die Zeit schreitet fort, da musste es doch eine bessere Lösung geben… Und so war es auch, und zwar existiert mittlerweile ein HTML Picture Element, mit dem mehrere Bildquellen in Abhängigkeit von Media-Queries angegeben werden können – also genau das, was die JavaScript-Funktionen realisiert hatten! Über die ersten Versuche mit “<img srcset="" sizes="">” hülle ich mich lieber in Schweigen, aber das Picture-Element hielt, was es versprach, somit war der Einbau schnell erledigt, und die JavaScript-Funktionen waren nun überflüssig geworden.
Interessant dabei ist ein Blick in die Vergangenheit – laut Browser-Kompatibilitätsmatrix wird das Picture-Element beispielsweise in Chrome seit der Version 38 unterstützt. Diese Version wurde am 07.10.2014 veröffentlicht – und damit später als die erste Version des Themes Tikva. Zur damaligen Zeit wäre die Verwendung des Picture-Elements somit eher suboptimal gewesen. Einzig User des Internet Explorer haben noch immer das Nachsehen, wobei der Fallback auf das img-Tag funktioniert, nur erfolgt dann eben nicht die optimierte Darstellung. Man möge es mir verzeihen, denn wegen eines unsäglich veralteten Browsers vermag ich nicht wirklich, ein Polyfill einzusetzen.
Natürlich bleibt die Entwicklung nicht stehen, und da ich Azbalac als Theme selbst einsetze, werde ich es auch weiterhin pflegen und bei Bedarf auch das eine oder andere neue Feature einbauen. Oder Libraries aktualisieren, Funktionen aufräumen usw..
