WordPress Entwickler für Programmierung Ihrer Webprojekte

Worum geht’s?

Microsofts Internetexplorer ist für Webentwickler immer noch ein schwarzes Tuch. Zu stark kochte Microsoft ein eigenes Süppchen, hielt sich nicht an Standards und hinkte mit der Entwicklung hinterher.

Daher muss auch noch im Jahr 2016 auf alte Internet-Explorer-Versionen Rücksicht genommen werden.

Wer ein eigenes Theme entwickelt, wird daher auch folgende Codepassage aus der header.php kennen:

<!--[if lt IE 9]>      <script src="<?php echo get_stylesheet_directory_uri() ?>/js/html5shiv.min.js"></script>   <![endif]-->

Damit wird alten Internetexplorern HTML5 beigebracht. (Nebenbei erwähnt: html5shiv ist eine fantastische Arbeit von Alexander Farkas)
Dieses Schnippsel findet sich in den meisten WordPress-Themes wieder.

Problem – Conditional Comments und wp_enqueue_script()

So richtig schön und richtig ist dieser Code aber nicht – WordPress bietet dazu eh eine Hilfestellung:
Grundsätzlich sollte man JavaScript-Dateien mit wp_register_script() und/oder wp_enqueue_script() zb in der functions.php laden, und nicht in der eigentliche Theme-Datei wie header.php.

Leider gab es bis WordPress 4.2 keine Möglichkeit, die JavaScript-Dateien nur für bestimmte Browserversionen zu laden. Conditional Comments und wp_enqueue_script() verstanden sich nicht miteinander.

(Kleiner Hinweis: Man sollte das auch mit respond.js uÄ machen)

Lösung

Das änderte sich in der WordPress Version 4.2 mit der Einführung der Funktion wp_script_add_data().

Damit war es möglich, mit wp_enqueue_script() JavaScript-Dateien zu notieren und WordPress darauf hinzuweisen, diese Datei nur unter bestimmten Umständen zu laden.
Das funktioniert so:

  wp_enqueue_script( 'html5shiv', get_template_directory_uri() . '/js/html5shiv.min.js' );   wp_script_add_data( 'html5shiv', 'conditional', 'lt IE 9' );

Hier sehen wir

laden der html5shiv Datei mit wp_enqueue_script()
Hinzufügen von Metadaten für dieses Skript mit wp_script_add_data()
Anleitung, das Skript nur für Internetexplorer-Versionen kleiner 9 zu laden.

Jetzt können wir alle Javascript-Dateien gebündelt zb in der functions.php laden.
Damit gibt es nur mehr einen Punkt im Theme, wo dies passiert und wird haben dadurch die header.php bereinigt.