Das Bild unterliegt keinen urheberrechtlichen Beschränkungen
Achtung, funktioniert in Version 1.0 nicht mehr. Das Childtheme für Version 1.0 gibt es hier.
Nachdem ich gestern feststellte, dass die Darstellung in TwentyTwelve weder IE7- noch IE8-kompatibel ist, setzte sich der Gedanke in mir fest, die Kompatibilität mit Hilfe eines Childthemes herzustellen. Tatsächlich geht das Dank der überschaubaren Struktur des Themes recht schnell.
Der Plan: theme.js durch navi.js ersetzen und html5.js durch modernizr-respond.js. Dem Menü eine Klasse verpassen, um den navi.js-Umschalter darauf anzuwenden. Die neu gesetzte html-CSS-Klasse .no-js wird von modernizr automatisch durch .js ersetzt wenn im Browser der die Website aufruft Javascript aktiviert ist. Auch andere Browser-Capabilities (html5 und CSS3) werden durch modernizr identifiziert (und entsprechende CSS-Klassen generiert), weshalb ich es für alle Browser einbinde, nicht nur IE.
Schritt 1: neues Themeverzeichnis anlegen
Ich nannte es twentytwelveieplus, und es enthält ein Verzeichnis “js” für die neuen Skripte, eine neue style.css, eine Kopie der header.php aus dem TwentyTwelve-Theme (die gleich im Anschluss modifiziert wird) und eine functions.php.
Schritt 2: header.php im Childtheme modifizieren
entfernen von
<!--[if lt IE 9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script> <![endif]-->
ersetzen von
<html <?php language_attributes(); ?>> /* ... */ <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
durch
<html class="no-js" <?php language_attributes(); ?> /* ... */ <?php wp_nav_menu( array( 'menu_class' => 'menu-main-navigation' , 'theme_location' => 'primary' ) ); ?>
Schritt 3: js-Dateien hinzufügen
Auf www.initializr.com modernizr mit Respond generieren lassen und downloaden. Die Datei umbenennen in modernizr-respond.js und in das js-Verzeichnis des Childthemes holen.
Nachfolgenden Code in eine neue Datei navi.js einfügen
jQuery(document).ready(function($){
/* prepend menu icon */
$('#site-navigation').prepend('');
/* toggle nav */
$("#menu-icon").on("click", function(){
$(".menu-main-navigation").slideToggle();
$(this).toggleClass("active");
});
});Schritt 4: functions.php
Im Theme-Setup wird die Funktion entfernt mit der TwentyTwelve die IE7 und IE9 in- bzw. nur teilkompatiblen Skripte lädt. Dadurch gehen auch zwei Optionen verloren, die im nächsten Skript neu eingebunden werden. Das originale Stylesheet habe ich ebenfalls dort eingebunden, da ich css-Dateien aus Performancegründen (IE hat damit manchmal Probleme) nicht gerne include.
function twentytwelveieplus_child_theme_setup() {
load_child_theme_textdomain( 'twentytwelveieplus', get_stylesheet_directory() . '/languages' );
// verhindern, dass Originale IE-Behandlung und theme.js eingebunden werden
remove_action( 'wp_enqueue_scripts', 'twentytwelve_scripts_styles' );
}
add_action( 'after_setup_theme', 'twentytwelveieplus_child_theme_setup' );
function load_twentytwelveieplus_scripts() {
// durch remove-action verlorene Optionen wiederherstellen
global $twentytwelve_options;
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
$options = $twentytwelve_options->get_theme_options();
if ( $options['enable_fonts'] )
wp_enqueue_style( 'fonts', 'http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' );
// Skripte und Stile einbinden
wp_register_script( 'navi', get_stylesheet_directory_uri().'/js/navi.js');
wp_register_script('modernizr', get_stylesheet_directory_uri().'/js/modernizr-respond.js');
wp_register_style('twentytwelve-style', get_template_directory_uri().'/style.css');
wp_register_style('twentytwelveieplus-style', get_stylesheet_directory_uri().'/style.css');
wp_enqueue_script('navi');
wp_enqueue_script('modernizr');
wp_enqueue_style( 'twentytwelve-style' );
wp_enqueue_style( 'twentytwelveieplus-style' );
}
add_action('wp_enqueue_scripts', 'load_twentytwelveieplus_scripts');Schritt 5: style.css
/* Theme Name: twentytwelveieplus Description: IE7 and IE8 compatible Childtheme of TwentyTwelve - Source modernizr with respond.js: www.initializr.com, Source nav.js: webdesignerwall.com Version: 0.6 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentytwelveieplus Template: twentytwelve */ /* new menue styles "twentytwelveieplus" */ nav.main-navigation li { float:left; } @media screen and (max-width: 600px) { .js #site-navigation #menu-icon { padding: 0.125em 0; line-height:2em; background:#eee; border:solid 1px #ccc; cursor: pointer; display: block; text-align:center; } .js #site-navigation #menu-icon.active { } #site-navigation .menu-main-navigation { clear: both; position: relative; top: 0.5em; width: auto; z-index: 10000; } .js #site-navigation .menu-main-navigation { display: none; } .no-js #site-navigation .menu-main-navigation { display:block; } #site-navigation .menu-main-navigation li { clear: both; display:block; float: none; text-align:center; margin-right:0; } #site-navigation .menu-main-navigation li a { border-bottom: 0px none; line-height: 2; } #site-navigation .menu-main-navigation ul { width: auto; position: static; display: block; border: medium none; background: inherit; } #site-navigation .menu-main-navigation ul li { float: none; } } @media screen and (min-width: 601px) { /* ensure navigation is visible on desktop version */ .js #site-navigation .menu-main-navigation { display: block !important; } #menu-icon { display:none; } }
Am Anfang des Artikels befindet sich ein Downloadlink auf das Childtheme.
Hinweis: um das Childtheme zu benutzen, muss das “Parent” TwentyTwelve im Verzeichnis wp-content/themes abgelegt sein.
Hier geht’s zum Download von TwentyTwelve
Zur Info, das Menü des Twenty Twelve 1.0 Releases funktioniert auch nicht mit IE7/IE8 und teils auch nicht mit IE9 (im Kompatibilitätsmodus).
Hier zwei Links mit Meinungen von Leuten, die sich teils massiv beschweren und Lösungsmöglichkeiten suchen: WordPress Support Forum: http://wordpress.org/support/topic/theme-twenty-twelve-nav-bar-fails-in-ie8 – WordPress Bug Tracker: http://core.trac.wordpress.org/ticket/22044 (der aktuelle Patch dort funktioniert anders als angegeben nicht!)
Es wäre toll, wenn die hier angegebene Lösung für die 1.0 Version zur Verfügung stehen würde, da wären Ihnen viele, viele Leute bestimmt dankbar.
Das neue Childtheme für TwentyTwelve gibt es hier.
Die Nadeln glühen noch, und ich hab’s nur kurz getestet (IE7, 8, 9). Bitte Bescheid geben falls ich was übersehen habe.