Bissinger’s Blog

Da ich doch immer mal wieder diversen Code hier niederschreibe hat sich ein Plug-In zum Syntax Highlighting namens “Snippet Highlight” in mein WordPress dazugesellt. Schlecht bzw. gut - weil ja eigentlich Sinn der Sache - ist, dass ein pre-formatierter Text eben genau so wiedergegeben wird, wie er eingetippt wurde. Die Folge ist meist, dass bei langen Strings diese regelmäßig schön über das Layout hinaus schießen oder, je nach Layout, auf einmal im nirgendwo verschwinden.

Mit HTML kann man das “Problem” lösen, indem man im pre-Tag einfach width=50 eingibt. Somit wird nach maximal 50 Zeichen ein Zeilenumbruch durchgeführt. Je nach genutztem WordPress-Plugin wird dies jedoch wieder entfernt, wenn man pech hat.

CSS ist da schon etwas sicherer. Im Blog “Unwakeable” von Tyler Longren bin ich mal auf ein schönes CSS-Format gestoßen, dass jeden Browser gut bedient.

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
 width: 99%;
}

Alternativ dazu kann man sich natürlich auch einen div-Container drum herum bauen, mit fester Breite und Höhe und dem ganzen einen overflow verpassen. Kann man, muss man aber nicht, weil nicht wirklich elegant. Vorteil ist jedoch, dass es ins Layout passt und trotzdem die Formatierung erhalten bleibt.

Wollte mir heute mal die Software für Woopra herunterladen und musste dementsprechend auf deren Homepage. Erstmal war ich leicht irritiert, da mir die Seite im Firefox gänzlich ohne Design präsentiert wurde. Im Internet Explorer 6 bekommt man zwar ein Design zu sehen, allerdings ist die Navigation leicht zerschossen.

Beim durchsehen des Quelltextes stößt man zur Zeit auf folgenden, leicht kuriosen, Eintrag:

<link style="display: none;" rel="stylesheet" href="http://www.woopra.com/wp-content/themes/woopra/style.css" type="text/css" media="screen">

Der Fokus liegt hier auf dem style="display: none;", der im link-Tag meiner Meinung nach ziemlich überflüssig ist. Nach einem Test mit einer Beispielseite scheint dieser Eintrag jedoch vom Firefox wie auch vom IE6 gekonnt ignoriert zu werden. Ich habe mal über die Web Developer Toolbar für den Firefox das im link-Tag angegebene Stylesheet manuell eingebunden und siehe da, zumindest das Design wird wieder korrekt dargestellt. Allerdings ohne Bilder. Über die im Quelltext angegebenen Source-Links lässt sich jedoch darauf zugreifen und vor allem der IE6 zeigt diese auch ganz normal an.

Ich bastel ja jetzt schon seit einiger Zeit an Websites herum, aber diesen Effekt kann ich mir im Augenblick noch nicht so ganz erklären. Vor allem, da nur Firefox das Design und die Bilder verschmäht.

Update: Nach einigem suchen bin ich jetzt doch noch auf den Übeltäter gestoßen. Das Problem verursacht das Plug-In Adblock Plus. Hat man hier den “ABP Tracking Filter” abonniert erhält man eine Regel namens “.woopra.”. Diese deaktiviert jegliche Anzeige und Ausführung von Scripten, Bildern und Stylesheets, die über eine Website geladen werden. Ausgenommen ist hierbei die direkte Anzeige im Browser über einen URL-Aufruf, weshalb auch das direkte Laden der Bilder bzw. das manuelle Einbinden des Stylesheets funktioniert hat.

Manchmal sollte man schon wissen, was diverse Plug-Ins bzw. Addons so treiben und im Hintergrund anstellen.

Bei hunderten von Themes, die es mittlerweile für WordPress gibt, fällt es vielen Usern schwer, sich da für eines zu entscheiden. Auch fehlt vielen entweder das Know-How oder, wie mir, einfach die Zeit oder die Muse, sich ein eigenes Theme zu gestalten. Durch ein einfaches hinein-kopieren der Themes in den wp_content/Themes-Ordner auf dem Server lassen sich die Designs unter dem Reiter “Darstellung” bei Version 2.5 auswählen. Hierbei wird allerdings, so wie es auch gewollt ist, der komplette Theme für alle sichtbar geändert. Wer jedoch einfach nur mal testen will, wie sein Blog bei einem Theme aussieht, für den empfiehlt sich das PlugIn “Theme Test Drive” von Vladimir Prelovac. Hiermit lässt sich das Theme nur für den Administrator verändern. Alle anderen User, die sich vielleicht auch gerade im Blog befinden, bekommen vom Design-Wechsel nichts mit.

Ein klasse PlugIn für alle, die gerne und oft mal neue Themes ausprobieren wollen.