Ausgangspunkt für dieses Projekt, das sich noch in seiner Anfangsphase befindet, war eine typische Web­entwicklungssituation. Eine Kundin möchte eine schicke Homepage, die auch gut aussieht, hat aber kein vernünftiges Bildmaterial. Was tun?

Die Kundin besitzt Visitenkarten mit einem Hintergrundmuster, das aus vielen, leicht versetzten Linien besteht. Es liegt also nahe, dieses Muster dynamisch zu erzeugen. Gesagt, getan. Mit JavaScript werden auf einem html5-Canvas Linien gezeichnet. In einfachen for-Schleifen kann Postion und Farbe der Linien über die Zeit modifiziert werden, das ganze wird in ein html-Dokument eingebettet und fertig ist die Laube.

Nur…

Weil es so irrsinnig lästig ist, Inhalte in alten, mit HTML, CSS und Javascript gebastelten Seiten zu aktualisieren, geht es auf keinen Fall ohne Content-Management-System und irgendwie mag ich halt WordPress – warum? Gute Frage und Stoff für einen separaten Post, denke ich. Und da kommt nun das Problem: Wie bekomme ich meine schicke JavaScript-Animation sauber in die WordPress-Seite hinein? Weil ich momentan noch nicht viel Ahnung hab, wie WordPress unter der Haube funktioniert und weil ich trotzdem JETZT eine Lösung brauche, erstmal die naheliegende und vermutlich total katastrophale Variante.

Das HTML-File lade ich in den Medienordner, dann binde ich es per iframe-tag ein und kläre mit CSS das Aussehen. Das Resultat kann man im Hintergrund dieser Seite bestaunen.

Ja, ich weiß. Unsauber. Vermutlich total unsicher. Nicht gerade elegant. Peinlich.

Okay, okay, ich seh es ein, es sollte besser gehen. Was genau möchte ich verbessern?

• Javascriptcode sollte man wohl nicht gerade über den Medienordner einbinden, oder?
• Es wäre prima, wenn man einzelne Parameter der Animation im Backend der Seite verändern könnte

Ein Childtheme, in dem das Hintergrundbild gegen das Canvas-Element ausgetauscht wird, wäre vermutlich eine einfache Lösung. Schick wäre auch ein Plugin, das sich sauber in unterschiedliche Themes einbinden lässt.

Als nächstes probier ich das mit dem Childtheme, denke ich…