Author: marhe0418

jQuery-Probleme nach WordPress Update

Viele WordPress Webseiten, Vorlagen (Themes) und Plugins verwenden immer noch ältere Versionen von jQuery und müssen zwangsläufig mit WordPress 5.7 aktualisiert werden, um auf dem neuesten Stand zu sein. Denn mit dem neuen WordPress 5.7-Update „Esperanza” wird (endlich) die mitgelieferte Version von jQuery aktualisiert (von 1.12.4-wp auf 3.5.1) und auch das veraltete Hilfsskript zur Lösung von Kompatibilitätsproblemen „jQuery Migrate“ wird nicht mehr standardmäßig aktiviert.

Was ist jQuery überhaupt und wofür wird es in WordPress genutzt?

jQuery ist eine JavaScript-Bibliothek und ein großer Teil der Funktionen in WordPress basiert auf jQuery, so dass auch viele WordPress-Entwickler auf jQuery zurückgreifen, um Funktionen ihrer eigenen Vorlagen und Plugins damit zu realisieren. jQuery vereinfacht viele gängige JavaScript-Funktionen in WordPress wie, Bilder-Slider (Effekte und Animationen), Datepicker (Kalenderelemente), Mobile Menü-Buttons (Hamburger Button Toggle), Akkordeon oder Dropdown-Elemente und viele andere „Events“ bzw. Ereignisse (Event Handler / Event Listener), die vom User auf einer Webseite ausgelöst werden können.

Für Webseiten-Betreiber bedeutet dies, dass jedes Plugin oder jede Seitenvorlage bzw. Theme, das bisher auf das jQuery Migrate-Tool angewiesen war, um wie erwartet zu funktionieren (weil es sich um älteren Code handelt oder einfach nur weil Vorlage oder das Plugin nicht mehr weiterentwickelt wurden), nun möglicherweise unerwartete Fehler produzieren und Teilfunktionen der Webseite lahmlegen können. Als Duisburger WordPress Webentwickler helfe ich Ihnen bei Fragen hierzu gerne weiter.

Im besten Fall hat dies mit Ereignissen (Event Handling) zu tun, die durch das asynchrone Laden von jQuery 3 einfach nicht mehr ausgelöst werden. Dann sieht die Webseite auf den ersten Blick voll funktionsfähig aus. Beispielsweise wenn nur „.on(‚load‘, function ()“ nicht mehr zuverlässig funktioniert, weil es innerhalb eines „$(document).ready(function()“ eingebettet wurde, was bislang durchaus üblich war, um erst dann ausgeführt zu werden, wenn alle anderen Seiteninhalte komplett geladen sind. Dies bedeutet, dass einige Funktionen im Hintergrund nicht mehr funktionieren und auch kein Fehler angezeigt wird, aber wenn zum Beispiel durch dieses Verhalten bei einem „Mobilen Menu“ bzw. beim „Hamburger Button“ (Responsive Menu Button) kein „Event Handler“ mehr geladen wird, dann funktioniert die gesamten Seitennavigtion auf Handys oder Tablets plötzlich nicht mehr. Oder eben nur dann, wenn das asynchrone Laden zufällig den richtigen Zeitpunkt erwischt.

Das andere offensichtlichere Problem ist die Verwendung von Funktionen, die veraltet (deprecated) sind. Diese verursachen in WordPress 5.7 nun meist einen schwerwiegenden Fehler und verhindern, dass weitere JavaScript-Funktionen auf einer Webseite wie erwartet funktionieren. Dann ist die Seite „kaputt“, was natürlich sofort auffällt und man kann durch Fehlermeldungen in der Browser-Console das Problem relativ leicht eingrenzen. Falls Sie ein unlösbares Problem mit Ihrer WordPress-Webseite haben, dann können Sie mich gerne dazu kontaktieren. In vielen Fällen kann ich das Problem beheben bzw. Ihre WordPress-Webseite auf den neuesten Stand bringen.

WordPress 5.7 mit jQuery Upgrade – warum, weshalb und was kann man vorab tun?

Das mit WordPress 5.7 eingeführte jQuery-Update wird WordPress natürlich sicherer und effizienter machen. Es bedeutet aber auch, dass einige Javascript-Funktionen auf vielen Webseiten möglicherweise nicht mehr richtig funktionieren. Deshalb haben die WordPress Entwickler auch versucht, dieses Update bereits mit den WordPress-Versionen 5.5 und 5.6 langsam vorzubereiten und die Entwickler vorzuwarnen.

Beispielsweise gibt es eine ausführliche Anleitung zum jQuery 3.0-Update hier und noch einem speziellen Leitfaden zum neuen jQuery Migrate-Plugin und wie man es zum Testen verwendet. Allerdings helfen solche Tipps eigentlich nur Entwicklern weiter und bleiben für die meisten WordPress-Nutzer (und auch Webdesiger) ein Buch mit sieben Siegeln.

Was man allerdings vorab bei den WordPress-Versionen 5.5 und 5.6 hätte tun können, ist die Verwendung einen speziellen WordPress-Plugins mit dem Namen „Enable jQuery Migration Helper“. Das WordPress-Team hat dieses Plugin extra dafür bereitgestellt, um frühzeitig mögliche Probleme zu identifizieren, die mit dem Wechsel auf jQuery 3 entstehen können. Denn das Plugin fügt der WordPress-Administrationsleiste Warnhinweise hinzu, die veraltete Javascript-Fragmente (Deprecations or deprecated code) im Webseiten-Quelltext anzeigen. Darüber hinaus bietet das Plugin, als zwischenzeitlichen Workaround, die Möglichkeit an die WordPress-Website wieder auf die alte Version von jQuery zurücksetzen, damit die Webseite bis zur Fehlerbehebung normal weiterlaufen kann. Dieses „Enable jQuery Migration Helper“-Plugin ist aber nur als temporäre Lösung gedacht.

Wenn Sie also seit den letzten WordPress-Updates 5.6 – 5.7 ungewöhliche Fehler beim Seiteaufbau bemerken bzw. bei der Interaktion mit Ihrer Website auf Probleme stoßen, dann steckt womöglich das Update auf jQuery 3 dahinter. Als WordPress-Webdesiger in Duisburg kenne ich diese Probleme aus meiner täglichen Arbeit und kann Ihnen eventuell bei der Fehler-Analyse weiterhelfen. Rufen Sie mich an oder schreiben Sie mir eine Email. Bei kommerziellen Vorlagen und Plugins können Sie sich natürlich auch an die ensprechenden Entwickler wenden. Allerdings ist das Zusammenspiel von Theme und verschiedenen Plugins nicht immer ganz trivial, so dass der Fehler vielleicht ausschließlich auf Ihrer Seite auftaucht und der Entwickler den Fehler nicht reproduzieren kann.

Wären die jQuery-Probleme in WordPress 5.7 vermeidbar gewesen?

Im Endeffekt war es abzusehen, dass das 5.7-Wordpress Update zahlreiche Probleme verursachen würde. Denn durch die neue jQuery 3 Version und das Abschalten der alten jquery-Migrate 1.x Hilfsfunktionen (und Update auf jQuery Migrate 3.3.2) werden viele ältere Plugins und Seitenvorlagen nicht mehr kompatibel sein und Javascript-Fehlermeldungen erzeugen. Aber es sollte an dieser Stelle auch nicht unerwähnt bleiben, dass die WordPress jQuery Library für sehr lange Zeit nicht aktualisiert wurde – von jQuery 1.12.4 nach jQuery 3.5.1 ist schon ein gewaltiger Sprung – und es deshalb eigentlich auch keine Notwendigkeit für Code-Anpassungen bei älteren Vorlagen und Plugins gab. Denn als Webentwickler hatte man sich an die veraltete Javascript-Bibliothek in WordPress irgendwie gewöhnt, frei nach dem Motto „Never change a running System“. Von daher kann ein Upgrade auf WordPress 5.5, 5.6 oder 5.7 bei vielen WordPress-Webseiten zu Funktionsproblemen führen, wie z. B. fehlende Inhalte, nicht mehr funktionierende Schaltflächen (Dropdown-Menüs) und Buttons, Layout-/Darstellungsprobleme bei Websites mit Plugins und Themes, die nicht komplett mit jQuery 3.x kompatibel sind.

Wenn auch Ihre Vorlage betroffen oder Ihre Webseite mit allen Plugins komplett veraltet ist, müssen Sie nach dem Update auf WordPress 5.7 entweder Ihre Vorlage auf eine neuere Version updaten oder, wenn Ihre Vorlage nicht mehr unterstützt wird, Ihre Website mit einer aktuelle Vorlage aktualisieren.
Als WordPress Webentwickler in Duisburg helfe ich Ihnen bei Fragen hierzu gerne weiter.

Die verwaltungsgeschichtliche Entwicklung der Stadt Duisburg ist nicht immer einfach zu verstehen. Wenn hier also von „47198 Duisburg“ die Rede ist, dann bedeutet dies für einen linksrheinischen Duisbürger vermutlich erst einmal Homberg am Niederrhein. Genauer gesagt, „Homberg, die Stadt im Grünen“, um die Eigenwilligkeiten auf die Spitze zu treiben.Homberg, die Stadt im Grünen So steht es auch seit meinen Kindertagen weithin gut sichtbar auf der Rheinmauer am Homberger Leinpfad, obwohl die Stadt Homberg (4102 Homberg/Ndrh.) bereits im Jahre 1975 im Zuge der kommunalen Neuordnung ein Stadtteil von Duisburg wurde. Wir sehen, ganz so einfach scheint die Sache mit den 1975 eingemeindeten Städten, Gemeinden und Ortsteilen nicht zu sein, zumal der Rhein eigentlich eine natürliche Grenze bildet. Eben eine Grenze zwischen rechts- und linksrheinisch bzw. heutzutage zwischen Duisburger Osten und Duisburger Westen.

Das linksrheinische Homberg liegt am Niederrhein direkt gegenüber der Ruhrmündung und gehörte seit dem 12. Jahrhundert zur Grafschaft Moers und später als kreisangehörige Stadt Homberg/Niederrhein zum Kreis Moers. Deshalb darf man sich auch nicht wundern, wenn sich auch heute noch viele Alt-Homberger eher mit dem linken Niederrhein verbunden fühlen und den Moerser Raum als natürliche Wurzeln ansehen.

Homberg selbst ist ein Zusammenschluß der Gemeinden (Alt-)Homberg, Essenberg und Hochheide, vollzogen 1907. Im Jahre 1921 erhielt Homberg dann die Stadtrechte und die offizielle Bezeichnung „Homberg (Niederrhein)“. 1975 überschritt die Stadt Duisburg dann mittels Eingemeindung erstmals den Rhein, Homberg verlor die Eigenständigkeit und wurde, wie viele andere zunächst selbständige Städte und Gemeinden, zu einem Teil Duisburgs. Zusammen mit dem rechtsrheinisch gelegenen Ruhrort und dem linksrheinischen Baerl bildet Homberg heute den rheinübergreifenden und drittgrößten Duisburger Stadtbezirk Homberg/Ruhrort/Baerl.

Einen guten Eindruck und schönen Panoramablick auf den Rhein, Ruhrort und Duisburg-Homberg erhält man von der im Jahre 1954 fertiggestellten Friedrich-Ebert-Brücke. Auf der Ruhrorter Rheinseite beeindrucken besonders die beiden verbliebenen Brückentürme der ersten Homberg-Ruhrorter-Rheinbrücke, der zwischen 1904 und 1907 erbauten „Admiral-Scheer-Brücke“. Diese Brücke wurde allerdings gegen Ende des zweiten Weltkrieges von der Wehrmacht gesprengt.

Homberger Wahrzeichen:

Der Hebeturm

Blickt man in Richtung Homberg, sieht man auf der linken Seite der Brückenrampe das Wahrzeichen Hombergs, den 30 m hohen Hebeturm. Dieses imposante Bauwerk und damaliges technisches Wunderwerk stammt noch aus der Zeit des Hebeturm-Trajektverkehrs (1856), der wiederum in Verbindung mit dem Anschluss Hombergs an das niederrheinische Eisenbahnnetz (1949) steht.

Zu jener Zeit wurden in Homberg und Ruhrort auch die Eisenbahnhäfen zum Kohletransport über den Rhein angelegt, wobei man ein zweimaliges und zeitraubendes Umladen der Güter vermeiden wollte. Zunächst wurde deshalb versucht, den Trajektverkehr über den Rhein mittels Seilen und schiefer Ebene durchzuführen, d.h. man musste die vollbeladenen Eisenbahnwaggons abseilen, um diese auf ein spezielles Fährschiff für Eisenbahnzüge zu verfrachten. Als Ersatz für dieses ineffiziente und unfallträchtige Verfahren wurden in den Jahren 1854-56 auf beiden Seiten des Rheins die 30 m hohen Hebetürme erbaut. Mittels der hydraulischen Senk- und Hebevorrichtung innerhalb dieser Türme, konnten die Güterwagons fortan direkt auf das Deck der Dampffährschiffe gesetzt werden bzw. nach der Rheinüberquerung, zurück auf das Niveau der Gleisanschlüsse gehoben werden.

Durch den Bau der Rheinhauser Eisenbahnbrücke, wurde das Trajekt Ruhrort-Homberg dann 1885 weitgehend überflüssig, da der gesamte Güterverkehr nun über Rheinhausen abgewickelt wurde. Der baufällige Ruhrorter Hebeturm wurde 1972 abgerissen, der Homberger Hebeturm wurde 1928 bis 1987 als Jugendherberge genutzt und steht mittlerweile unter Denkmalschutz. Im Jahre 1989 wurde das Homberger Wahrzeichen von der Stadt Duisburg verkauft. Eigentümer des sehenswerten Baudenkmals wurde der Duisburger Maler und Grafiker Willi Kissmer, der im Hebeturm seine Wohnung und Atelier einrichtete. Als eine der Homberger Sehenswürdigkeiten ist der Turm Teil der touristischen Themenstraße „Route der Industriekultur“.

Ich weiß, Hass ist ein starkes Wort. Vielleicht übertreibe ich auch, um die Sache hier etwas zuzuspitzen. Dennoch kann ich als WordPress-Webdesigner sagen, dass mir das Konzept der zahlreichen „Drag & Drop“-Editoren nicht gefällt. Vor allem, wenn WordPress-Vorlage und Pagebuilder ein allzu inniges Verhältnis eingehen. Ich weiß, eigentlich ist ein Pagebuilder nur ein Werkzeug, welches den Umgang mit WordPress komfortabler gestalten und die geringen Möglichkeiten des Seiten- und Beitragseditors erweitern soll. Aber…!
Und hier beginnen die Probleme, die Webdesigner mit Programmierkenntnissen und Webentwickler häufig mit Pagebuilder-Plugins haben!

Die 4 größen Nachteile von WordPress Pagebuildern:

1. Nachteil: Aufgeblähter Programmcode

Aufgeblähter Code ist ohnehin schon immer ein Problem gewesen, wenn es um die Nachteile von Content Management Systemen ging. Durch die Pagebuilder bekommt das WordPress-Kernprogramm jetzt noch eine weitere Benutzeroberfläche übergestülpt. Das beeinträchtigt mitunter die Leistung des Browsers, wodurch eine Website schließlich viel langsamer verarbeitet wird. Und obendrein sitzt man irgendwann als vermeintlicher WordPress-Profi vor solch einer Kundenseite und klickt ahnungslos hin und her. Oder um es mit den Worten von Judy Garland zu sagen: „Toto, ich habe das Gefühl, wir befinden uns nicht mehr in Kansas.“ Eine unangenehme Situation wenn der Kunde danebensitzt.

2. Nachteil: Shortcode-Wirrwarr

Während Pagebuilder dem unbedarften Amateur ein mächtiges WYSIWYG-Werkzeug an die Hand gibt („What you see is what you get“), bekommt der Profi ein komplexes Code-Durcheinander in die Seite gekippt. WordPress, Vorlage und Pagebuilder verschmelzen sozusagen zu einer untrennbaren Einheit. Dadurch verliert man völlig den Überblick und kann praktisch nur noch das Page Builder-Plugin komplett deaktivieren. Zurück bleibt normalerweise eine rudimentäre Seitenvorlage und besagte Shortcodes und andere verwaiste Code-Schnipsel, die man dann auch noch von Hand entfernen muss. Danach fängt man gewöhnlich bei null an, weil die ganzen schönen Designelemente und Widgets alle mit den Shortcodes des Pagebuilders realisiert waren.

3. Nachteil: Es gibt keinen Pagebuilder-Standard

Jeder Pagebuilder sieht anders aus und verhält sich anders. Es gibt keinen allgemeinen WordPress-Pagebuilder-Standard oder ein einheitliches Bedien- oder Shortcode-Konzept. Sobald Pagebuilder-Plugins ins Spiel kommen, wird das komplette WordPress-Bedienkonzept über den Haufen geworfen und die standardmäßige WordPress-Benutzererfahrung verfälscht. Dem Amateur bzw. „Einseitenbetreiber“ mag dies egal sein, aber WordPress-Webdesigner die viele verschiedene WordPress-Seiten betreuen und pflegen, müssen ständig umdenken. Denn es gibt mittlerweile eine unglaubliche Anzahl an Pagebuildern für WordPress wie: Elementor, Divi Builder, Beaver Builder, Page Builder von SiteOrigin, Conductor, Themify Builder, Visual Composer und Thrive, um nur einige der beliebtesten zu nennen. Man kann also nur hoffen, dass zumindest WordPress 5.0 und der neue Gutenberg-Editor diesem Pagebuilder-Wildwuchs ein einheitliches Konzept entgegenstellt.

4. Nachteil: WordPress-Vorlagen werden überflüssig

Eigentlich waren WordPress-Templates mal für den WordPress-Seitenaufbau gedacht. Durch die Nutzung von verschiedenen Vorlagen mit unterschiedlichen Themenoptionen konnten dann die Webseiten optisch gestaltet werden. Durch Pagebuilder bekommen die Vorlagen einen weiteren unnötigen Überbau. Templates werden sinnlos und sind eigentlich nur noch für die Intergration von Header, Inhaltscontainer und Footer nötig.
Sobald dann der Pagebuilder das Kommando in WordPress übernimmt, wird die gesamte Inhaltspräsentation vom den Pagebuilder-Plugin übernommen. Damit verkommt WordPress zu einem starren Homepagebuilder bzw. Website-Baukasten, der auf Gedeih und Verderb auf dieses Plugin angewiesen ist. Denn wie oben bereits erwähnt, wird in vielen Fällen das Deaktivieren des Plugins mit dem Verlust aller Inhalte einhergehen.

 

Jedenfalls hasse ich die WordPress-Pagebuilder und verachte Webdesigner die damit arbeiten. Natürlich kann ich auch nicht verschweigen, dass Pagebuilder-Webseiten schon sehr professionell aussehen und vielen Bedürfnissen an eine optische Top-Webseite gerecht werden können. Aber für mich als Webdesigner sind Pagebuilder keine Alternative, solange ich gewisse Elemente noch selbst in die Seiten „programmieren“ kann. Durch die Benutzung von geeigneten WordPress-Vorlagen kann ich in der Regel von Vorlage zu Vorlage wechseln, ohne den Inhalt neu erstellen zu müssen. Ich kann einfach das Design anpassen.
Bei Pagebuildern hingegen, hat man für jede Designoption bzw. Inhaltspräsentation ein eigenes Modul. Sobald man zu einem anderen Builder wechselt, muss Design und Inhalt oftmals komplett neu erstellt werden. Wie soll man das seinen Kunden vermitteln, wenn diese ehemals davon ausgangen waren, dass gerade die Trennung von Inhalt und Design der große Vorteil von Content Management Systemen ist. Andernfalls könnte das Webdesign ja auch wieder zu den alten fest programmierten HTML-Seiten zurückkehren.

Es ist schon erstaunlich, dass Google kürzlich bereits seinen 20. Geburtstag gefeiert hat. Ich erinnere mich noch gut an die Zeiten vor Google, als Suchmaschinen noch eher Verzeichnisse waren (Yahoo!) und die künstliche Intelligenz von Suchmaschinen leicht auszutricksen (Altavista). HTML-Webseiten nutzten Frametechnik, Macromedia Flash war eine Revolution und Suchmaschinenoptimierung beschränkte sich damals auf den Kauf der Vollversion von „Hello Engines!“.
Damals war es schwierig, genau das zu finden, was man gesucht hatte. Vielleicht auch, weil es gar nicht vorhanden war, schließlich war das Netz viel kleiner.

Als die Google-Suche dann auf den Markt kam, war es eine Offenbarung. Diese einfache und unscheinbare kleine Homepage lieferte Suchergebnisse, die relevanter waren als alles was man bis dahin kannte. Und für eine sehr kurze Zeit war Google ein gut gehüteter Geheimtipp.
Seitdem hat sich das Unternehmen Google mit unvollstellbarer Geschwindigkeit entwickelt und übt heute eine erschreckende Marktmacht aus. HTML-Frametechnik und Flash gibt es praktisch nicht mehr, weil Google die Inhalte nicht korrekt zuordnen bzw. lesen konnte. Die Verwendung von „Hello Engines!“ ist auch eher sinnlos, weil nur noch Google den Suchmarkt dominiert. Und diese Beispiele sind nur winzige Nebenkriegsschauplätze, sobald man an Adsense, Adwords, Youtube, Maps, Chrome, Android und Analytics denkt.

Als Webdesigner ist meine Beziehung zu Google sehr eng, obwohl ich dies rückblickend schon etwas bereue. Auf der einen Seite, habe ich durch die unterschiedlichsten Google Services und Dienstleistungen viele kostenlose Tools zur Verfügung, die das Netz revolutioniert haben. Und die von anderen Herstellern bzw. Unternehmen niemals kostenlos bereitgestellt worden wären. Auf der anderen Seite, gibt Google heute den Ton an und entscheidet fast im Alleingang, in welche Richtung sich das Internet entwickelt.
Man ist der Macht von Google ausgeliefert und befindet sich in einem Teufelskreis. Durch einen Martkanteil von ca. 95% bei der Suche, ist eigentlich jeder Webseitenbetreiber dazu gezwungen seine Webseite auf Google auszurichten. Wer im Netz erfolgreich sein will und Besucher auf seiner Webseite benötigt, der muss auf Google hören. Wenn Google also entscheidet, relevante Infos von Webseiten zu sammeln, um diese direkt in den Suchergebnissen anzuzeigen. Dann muss man damit leben. Durch die Bereitstellung dieser Informationen auf der Suchmaschinen-Ergebnisseite (SERP) wird man weniger Besucher auf seiner Seite haben, aber ohne Google hätte man schließlich gar keine Besucher. Was ist, wenn Google in Zukunft die Daumenschrauben noch fester (und in immer mehr Bereichen) anzieht? Für diejenigen von uns, deren Karriere eng mit dem Internet verflochten ist, ist das eine wichtige Frage…