Browserabhängige Klasse für den BODY-Tag

Verfasst von Mattias Stiller am 06. September 2011 | Wordpress | Keine Kommentare
Eigene Klasse im Body-TAG Wordpress Tutorial

Manchmal ist es sinnvoll browserindividuelle CSS-Befehle zu aktivieren. Ich möchte in diesem kleinen Tutorial kurz zeigen wie ihr das am besten macht. Im Grunde gibt es zwei Möglichkeiten: Einmal mittels Eintrag in die functions.php und die zweite Variante ist ein eigenes Plugin zu schreiben. Beide Möglichkeiten sind schnell umgesetzt. Die Götter streiten sich im Moment noch über den Sinn so einer „Browserweiche“; zumal es ja auch noch sogenannte CSS-Hacks für die unterschiedlichen Browser gibt und auch noch die Conditional Comments. Aber es gibt auch immer mal wieder den Fall, dass Ihr speziell den Safari (MAC) oder das Iphone bzw. das Ipad ansprechen wollt. Da sieht es dann mit Hacks oder Conditional Comments schon etwas anders aus. Daher hat diese Lösung hier, meiner Meinung nach, eine starke „Daseinsberechtigung“. Nun denn, dann wollen wir mal:

1. Eintrag in die functions.php

Einfach diesen Code in die functions.php eintragen und schon wird im BODY-Tag die dazugehörige Klasse gesetzt.

  1. <?php
  2. add_filter('body_class','browser_body_class');
  3. function browser_body_class($classes) {
  4. global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
  5. if($is_lynx) $classes[] = 'lynx';
  6. elseif($is_gecko) $classes[] = 'gecko';
  7. elseif($is_opera) $classes[] = 'opera';
  8. elseif($is_NS4) $classes[] = 'ns4';
  9. elseif($is_safari) $classes[] = 'safari';
  10. elseif($is_chrome) $classes[] = 'chrome';
  11. elseif($is_IE) $classes[] = 'ie';
  12. elseif($is_iphone) $classes[] = 'iphone';
  13. else $classes[] = 'unknown';
  14. return $classes;
  15. }
  16. ?>

2. Mittels Plugin den BODY-Tag erweitern

Für diesen Weg ist es notwendig ein kleines Plugin für Wordpress zu schreiben. Wie ihr gleich sehen könnt, ist das nicht sonderlich schwer. Wir brauchen im Grunde nur eine Art Header, der Wordpress mitteilt: „Hier ist ein neues Plugin mit dem Namen Custom Body Class“ und den oben stehenden Code, den wir nun nicht mehr in die functions.php eintragen sondern in eine eigene PHP-Datei (custom-body.php).

Header der PHP-Datei „custom-body.php

  1. /*
  2. Plugin Name: Custom Body Class
  3. Plugin URI: http://www.webbistdu.de
  4. Description: Custom Class for BODY-Tag
  5. Version: 1.0
  6. Author: Mattias Stiller
  7. Author URI: http://www.webbistdu.de
  8. */

Das ganze sollte nach der Aktivierung des Plugins so im Pluginbereich aussehen:

Hauptteil des Plugins

  1. <?php
  2. add_filter('body_class','browser_body_class');
  3. function browser_body_class($classes) {
  4. global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
  5. if($is_lynx) $classes[] = 'lynx';
  6. elseif($is_gecko) $classes[] = 'gecko';
  7. elseif($is_opera) $classes[] = 'opera';
  8. elseif($is_NS4) $classes[] = 'ns4';
  9. elseif($is_safari) $classes[] = 'safari';
  10. elseif($is_chrome) $classes[] = 'chrome';
  11. elseif($is_IE) $classes[] = 'ie';
  12. elseif($is_iphone) $classes[] = 'iphone';
  13. else $classes[] = 'unknown';
  14. return $classes;
  15. }
  16. ?>

Das war es auch schon. Jetzt nur noch die Datei custom-body.php in das Pluginverzeichnis von Wordpress kopieren und im Adminbereich das Plugin Custom Body Class aktivieren.

Das Ergebnis sollte dann wie folgt, beispielsweise im Firefox (gecko), aussehen:

  1. <body class="home page gecko">

Sorry, the comment form is closed at this time.