Stylesheets und Javascript-Dateien für den IE6, IE7, IE8 über die functions.php in WordPress laden

Gerade wenn man auch noch ältere Internet Explorer Versionen mit der eigenen Webseite unterstützen möchte ergeben sich unter anderem Probleme durch zB fehlende HTML5-Unterstützung. Durch das zusätzliche Laden von einem Javascript oder einem Stylesheet kann dem abgeholfen werden. Wie auch die Handhabung von sämtlichen anderen Styles und Scripten, werden wir auch dieses Problem direkt über die functions.php des WordPress Themes lösen.

Wer sich schon so manchen head Bereich einer Webseite angesehen hat, wird schon des öfteren Code-Teile wie diesen gesehen haben.

<!--[if lte IE 9]>
    <script type="text/javascript" src="http://example.com/html5.min.js"></script>
<![endif]-->

Mit diesem Codebeispiel wird eine Javascript-Datei – html5.min.js – für den Internet Explorer 9 oder kleiner geladen. Um sicher zu stellen, dass dies auch wirklich nur bei den benannten Browsern geladen wird, müssen wir den sogenannten conditional comment verwenden – <!--[if lte IE 9]>...<![endif]-->.

Um dies jetzt über die functions.php des WordPress Themes zu erreichen, erstellen wir eine zusätzliche Funktion in dieser.

function zoechbauer_ie_support {

}
add_action( 'wp_enqueue_scripts', 'zoechbauer_ie_support' );

Mittels der WordPress Funktion wp_enqueue_script() laden wir die gewünschte Javascript-Datei, am besten von einem CDN Netzwerk um den eigenen Server nicht zusätzlich zu belasten, und fügen mit der WordPress Funktion wp_script_add_data() den Kommentar für den Internet Explorer hinzu.

// HTML5 Support for IE 6, IE 7, IE 8
wp_enqueue_script( 'html5-ie', '//cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js', false, null, false );
    // conditional comment for html5-ie
    wp_script_add_data( 'html5-ie', 'conditional', 'lt IE 9' );

Alte Internet Explorer Versionen benötigen auch teilweise eine angepasste Stylesheet-Version. Um auch CSS-Dateien mit einen conditional comment zu laden gehen wir ähnlich vor. Anstatt wp_enqueue_script() verwenden wir wp_enqueue_style() und statt wp_script_add_data() können wir wp_style_add_data() verwenden.

Als Beispiel hier der Code für eine CSS-Datei für den IE 7 oder kleiner und eine für den IE 8

// CSS for IE 7 and lower
wp_enqueue_style( 'style-ie7', get_template_directory_uri() . '/css/ie7.css' );
    wp_style_add_data( 'style-ie7', 'conditional', 'lte IE 7' );

// CSS for IE 8
wp_enqueue_style( 'style-ie8', get_template_directory_uri() . '/css/ie8.css' );
    wp_style_add_data( 'style-ie8', 'conditional', 'IE 8' );

Abschließend nocheinmal die komplette Funktion der Theme functions.php, aber man könnte diesen Code auch als ein Plugin laden.

function zoechbauer_ie_support() {
    // HTML5 Support for IE 6, IE 7, IE 8
    wp_enqueue_script( 'html5-ie', '//cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js', false, null, false );
        // conditional comment for html5-ie
        wp_script_add_data( 'html5-ie', 'conditional', 'lt IE 9' );
    // CSS for IE 7 and lower
    wp_enqueue_style( 'style-ie7', get_template_directory_uri() . '/css/ie7.css' );
        wp_style_add_data( 'style-ie7', 'conditional', 'lte IE 7' );
    // CSS for IE 8
    wp_enqueue_style( 'style-ie8', get_template_directory_uri() . '/css/ie8.css' );
        wp_style_add_data( 'style-ie8', 'conditional', 'IE 8' );
}
add_action( 'wp_enqueue_scripts', 'zoechbauer_ie_support' );

Bitte beachten Sie, dass dieser Beitrag bereits vor über einem Jahr geschrieben wurde und unter umständen nicht mehr aktuell ist.