Code Styling Project

Wenn man gerade eine sehr stabil laufende Version 2.7 von WordPress hat, sich auch an die Maxime hält, nur Scripte zu benutzen, die im Standard Lieferumfang enthalten sind, dann erlebt man mit dem Update auf WordPress 2.8 eine Überraschung.
Einige der auf den Basis-Bibliotheken beruhenden Implementierungen versagen plötzlich ihren Dienst. Also wieder ein Fall für eine tiefergehende Analyse, womit man es nun wieder zu tun hat. Ich sollte eine Serie daraus machen: “Und was passiert diesesmal ?” …

Viele Benutzer kennen zumindest eine Komponente von jQuery, weil sie in sehr vielen Blogs zu finden ist: jQuery UI Tabs. Entweder wird sie als Featured Content Umschalter oder in der Sidebar als Gruppierung von Inhalten verwendet.

In der WordPress Version 2.7(.1) hat man standardmäßig jQuery selbst in Version 1.2.6 und jQuery UI in Version 1.5.2 zur Verfügung. Dies hat sich jedoch mit WordPress 2.8 geändert, jetzt bekommt man jQuery 1.3.2 und jQuery UI 1.7.1 bereitgestellt. Da die Tabs Komponente von jQuery UI abhängt, ist diese natürlich auch neu. Leider ist aber zwischen diesen Versionen ein großer Sprung im jQuery Sektor erfolgt, sodass Scripte, die mit der älteren Version anstandslos liefen nur nicht mehr funktionieren, weil sich die Logik und Struktur der Manipulationen geändert hat, die Komponenten durchführen.

jQuery Tabs Markup laut Beschreibung

Wie man der Dokumentation entnehmen kann, sollte ein Grundgerüst für Tabs in etwa so aussehen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

 
<div id="tabs">
   <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
   </ul>
   <div id="tabs-1">
      <p>Tab 1 content</p>
   </div>
   <div id="tabs-2">
      <p>Tab 2 content</p>
   </div>
   <div id="tabs-3">
      <p>Tab 3 content</p>
   </div>
</div>
 

Die grundlegende Struktierung ist in beiden Versionen gleich, was genau der Unterschied ist, werde ich nun gegenüberstellen:

Lösung für 2 Versionen von WordPress

Man möchte ja nicht immer für verschiedene Versionen von WordPress sein Plugin mit mehreren Versionen des Markup’s oder noch schlimmer, mit verschiedenen Versionen von jQuery überfrachten. Unter der Maßgabe, weiterhin nur jQuery zu benutzen, wie es WordPress beiliegt und dabei den Spagat zwischen beiden Versionen zu schaffen, kann man auf sehr einfache Weise hinbekommen:

//jQuery UI 1.5.2 doesn’t expect tab ID’s at DIV, so we have to apply a hotfix instead
var needs_jquery_hotfix = (($.ui.version === undefined) || (parseInt($.ui.version.split(’.')[1]) < 7));
$("#tabs"+(needs_jquery_hotfix ? “>ul” : “”)).tabs();

Falls man bei anderen Komponenten ähnliche oder noch gravierendere Eingriffe braucht, ist es sinnvoll, die Variable bereitzustellen, die festhält, das die entsprechende Version besondere Aufmerksamkeit benötigt. Der Test prüft, ob die Versionkennung von jQuery UI überhaupt vorhanden ist (nein: 1.5.2) oder wenn doch mindestens 1.7.0 sein muß, damit das nicht gepatched werden braucht.
Ich kann jetzt schon versprechen, dass Code, der unter Annahme von jQuery UI 1.7.1 geschrieben wurde, nicht unter WordPress 2.7 sauber laufen wird, wenn UI Komponenten im Spiel sind. Man kann das alles aber so programmieren, dass es für beide Versionen funktioniert und teilweise nur mit einer Handvoll zusätzlicher Javascript Zeilen, die per Patch das nachrüsten, was der Version jQuery UI 1.5.2 fehlt.

Ich überleg schon, ob ich eine eigene jQuery Serie hier im Blog auflege, denn ich hab bereits eine Menge solcher Kompatibilitätsfixes in den letzten Tagen maßgeschneidert. Wenn Bedarf besteht, würde ich das in Angriff nehmen.