Schaut euch z.B. meinen hervorragenden Eyecatcher für diesen Artikel an! 97% der männlichen Leser klicken in diesem Moment darauf, sehen das Foto in groß – und bewundern damit auch meine Thickbox!
(In der Tat würde mich jetzt interessieren, wieviele der weibliche Leser auch darauf klicken. Aber das ist ein anderes Thema, grins.)

Praktischerweise verwendet WordPress (im Adminbereich, glaube ich) selber Thickbox, so dass alles nötige bereits mitgeliefert wird und man ein zusätzliches Plugin sparen kann! Langer Rede, kurzer Code – das hier in die functions.php eures Themes und schon klappt es: 

<?php
function load_thickbox_script() {
wp_enqueue_script( 'thickbox');
}
add_action( 'wp_footer', 'load_thickbox_script', 11 );
function load_thickbox_style() {
wp_enqueue_style( 'thickbox' );
}
add_action('wp_enqueue_scripts', 'load_thickbox_style');
?>

Einfach, oder? Und die Frauen Bilder im allgemeinen sehen doch direkt hübscher aus!
Oh, dass ihr jedem Bild manuell die CSS-Klasse “thickbox” mitgeben müsst, ist klar? Ansonsten funktioniert das natürlich nicht…

Eyecatcher by Rob Beyer @ flickr (awesome shots!) – *thumbs up* for sharing under CC BY-NC-ND 2.0. 

Die richtige Antwort, die volle Punktzahl bringt: Es nutzt keiner von euch den Internet Explorer!
Da ich es sowieso noch beschreiben wollte…
Mit dem aktuellen Theme habe ich ein paar CSS3-Spielereien verbaut, z.B. die abgerundeten Ecken bei den einzelnen DIV-Elementen.

Nachdem ich schon fleissig gebaut hatte, kam mir eines Tages die Idee das ganze auch mal mit dem Internet Explorer anzugucken. Eine ganz dumme Idee, je kleiner die jeweilige Versionsnummer wird!
Das die runden Ecken nun auch im IE klappen, liegt an diesem netten, kleinen Skript:  Border radius htc v3 with IE6, 7 & 8 support 

Solltet ihr also mal auf die Idee kommen, eine ähnliche runde Sache zu gestalten – unbedingt verwenden!
Die Nutzung ist richtig einfach, das Skript wird einfach im CSS mit angegeben… könnte so aussehen:

#sidebar {
background-image:url(images/sidebar.png);
border: 2px solid #E3E3D9;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
behavior:url(http://www.gregel.com/border-radius.htc);
}

Wichtig hierbei:  den vollständigen Pfad zur *htc Datei angeben, oder ausgehend vom Dokumenten-Root (nicht, wie sonst bei WP, relativ zum CSS-Ordner).

History

Dutzende Ideen im Kopf und Entwürfe im Blog warten darauf das Licht der Welt zu erblicken, aber die Geburtenrate war in letzter Zeit dann doch etwas sehr zäh, oder?
Nach vielen saftigen Steaks schlaflosen Nächten schoss es mir durch den Kopf, was hier faul war:
Das Theme war schon zu lange da und langweilte mich!

Zahllose Arbeitsstunden später, in denen ich html, php & css wieder auf’s neue lieben und hassen lernte, habe ich heute Abend die Testphase verkürzt (Mut zur Lücke) und das Gesamtpaket online geschoben!
Tja, was soll ich sagen? Mir gefällt’s sehr gut – mit einem neuen Grinsen und frischer Energie haue ich in die Tasten! Und bei euch so?

Vielleicht ein paar Worte mehr zu der Frucht meiner… Finger!

So ein paar Gedanken mehr macht man sich ja doch schon bei der Frage wie soll’s denn aussehen… Somit habe ich mir auch unzählige Themes angesehen, heruntergeladen, ausprobiert. Zeitweise wollte ich auf schwarz-weiß setzen, aber dann musste das Corporate Design, doch irgendwie erhalten bleiben!
Somit also auf jeden Fall der Hintergrund, sowie grundsätzliche Farbelemente. Tja, und nachdem ich viele Themes durchgewühlt hatte,  habe ich mich doch hingesetzt und das bestehende Theme in Eigenregie auf den Kopf gestellt und quasi von Null (oder maximal 10) neu aufgesetzt. Anregungen und Codeschnipsel habe ich in den letzten Tagen z.T. auch von einem Elmastudio-Theme geholt, welches ich mir noch gekauft hatte…

Was ist dabei herumgekommen?
Die linke Sidebar ist verschwunden, somit Platz für einen breiteren Content-Bereich! Dies war mich definitiv wichtig… Ok, ganz verschwunden ist die Sidebar nicht – eher in den Footer gewandert!
Die Inhalte der Sidebars sind ein wenig entrümpelt und werden in den nächsten Tagen erweitert oder optimiert, mal sehen.

Ein paar Plugins habe ich auch schon ausgemistet, bzw. selber umgebaut. So gab es ehemals in der rechten Sidebar zufällige Artikel und neuste Artikel – nun zusammengefasst in weitere Artikel:
Auf der Startseite, wo man das neuste ja eh sieht, erscheinen die Artikel zufällig – in einer Artikelansicht entsprechend die neusten.

Die Gallerie, die oben im Header (noch) verlinkt ist, war ehemals die prinzipiell super geniale NextGEN Gallery. Überdimensinoniert für mich, zumal die internen Galerie-Funktionen immer besser werden…
Fällt mir noch mehr ein? Ja, bestimmt – aber daraus mache ich dann einen zweiten Artikel… :-)

Und jetzt sagt schon, wie es euch gefällt!!
Stop! Bevor ihr euch die Startseite anguckt, überprüft doch bitte einmal die 2Klick-Sharing Funktion! Am besten alle drei Netzwerke, muss doch wissen ob es klappt… ;-) Und hey, schick gelöst ist das doch wohl auch, oder?!

Oh, und nachdem ihr euch die Startseite angeguckt habt, vergesst nicht die Kommentarfunktion dieses Artikels zu… ähm… testen!

In dem Sinne – es gibt noch viel zu tun, vor allem auch zu bloggen!
Ich denke aber, dass ich mit Phase I meines Relaunchs bisher sehr zufrieden bin… Phase II schließt sich ab sofort nahtlos an – Kleine Bugfixe, Plugin- und Widget-Änderungen etc. Oh, und die Cache-Funktionalität – momentan ist alles, was auch nur entfernt mit Cache zusammenhängt, deaktiviert!

Tja, und Phase III wird dann eine Änderung der Startseite in ein paar Wochen – und ein eigener Artikel!

Jetzt ist aber gut für heute – ich hoffe es gefällt euch hier besser als jemals zuvor… :-)

PS: Vielleicht warte ich mit dem Cache sogar noch etwas – denn aktuell muss ich doch ein wenig grinsen! Beim Test der Ladezeit via Pingdom weniger als eine Sekunde – ich bin zufrieden ;-)

Das ganze bringt zwei Vorteile mit sich:

• Die Ladezeit der Website reduziert sich aufgrund der geringeren Strecke, die Bits & Bytes zurücklegen müssen
• Der Browser lädt die komplette Seite schneller, weil der Content von verschiedenen (Sub-) Domains kommt.
  Speziell der letzte Punkt ist interessant, dies schauen wir uns nun mal genauer an.

Ein richtiges CDN bei einem großen Anbieter (wie das Amazon S3 Netzwerk) ist für die meisten Blogs ja ein wenig überdimensioniert. Also scheidet der erste o.g. Punkt am Geldbeutel und somit für den Durchschnittsblogger schonmal aus.
Aber wie sieht es mit der Auslagerung auf eine zweite (und/oder dritte) Domain aus? Bilder, CSS & Javascript ist bei jedem WordPress-Blog reichlich vorhanden, bietet sich also förmlich an.
Werfen wir einen Blick auf AskApache, wo das ganze Verfahren anschaulich dokumentiert ist:

So instead of waiting for 30 items from 1 source, it waits for 30 items from 3 different sources, drastically speeding up the transfer. By using multiple subdomains browsers are further able to maintain persistant connections with all 3 unique servers, making the site load incredibly faster.

Klingt gut.
Ich habe für den Anfang alle Bilder des aktuellen Themes, sowohl die CSS-Datei als solche auf static.gregel.com ausgelagert. Wie immer gilt: Viele Wege führen nach Rom, speziell bei WordPress.

Zum Beipiel bietet das in meiner Cache-Analyse genannte WordPress-Plugin W3 Total Cache von Haus aus die Möglichkeit CDN zu aktivieren (Über W3 Total Cache hat hombertho gebloggt, die entsprechenden Kommentare sind auch lesenswert).
Desweiteren finden sich im WordPress Plugin Directory noch einige andere Plugins speziell für diesen Zweck, z.B. CDN Rewrites oder CDN Tools.

Alle erfüllen sicherlich ihren Zweck – für mich waren sie aber entweder oversized oder suspekt. Letzteres, weil ich auch nach Studium des jeweiligen Codes nicht ganz verstanden habe, wo an welcher Stelle wie engegriffen wird – nichts für mich.

Zudem wollte ich ja klein anfangen – CSS auslagern und damit alle Bilder, die via CSS verknüpft sind. Und dies schafft man mit einfachen WordPress-Bordmitteln und drei Zeilen Code…

So verwendet jedes vernünftige Theme für das Einbinden der CSS im Head-Bereich der Seiten eine Variable:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

Die Variable zielt im Normal auf domain.xy/blogverzeichnis/wp-content/themes/name/styles.css – also biegen wir dieses Ziel doch einfach um auf unsere (Sub-) Domain für statischen Content!

function stylesheet_uri_neu ($stylesheet_uri, $stylesheet) {
$stylesheet_neu_uri = 'http://static.domain.xy/dir/style.css';
return $stylesheet_neu_uri;
}
add_filter('stylesheet_uri' , 'stylesheet_uri_neu', 10, 2);

Die paar Zeilen in eine Datei name.php packen, wie jedes andere Plugin hochladen, aktivieren – fertig. Oder alternativ direkt in die functions.php des jeweiligen Themes.
Ab sofort wird die CSS-Datei und alle darin verknüpften Bilder von der neuen Subdomain geholt und unsere Seite lädt wieder ein wenig schneller.
Mission Accomplished.

CSS Fehler?
Also mal auf den Testblog und frickeln… Oh! Der Testblog sieht völlig in Ordnung aus! Schnell die Version des Themes abgleichen… passt.
Was ist es dann? Ein Plugin? Alles Plugins abschalten – Fehler bleibt. Etwas html in einem Beitrag? Alle Beiträge in den Testblog importiert – Desing sieht nach wie vor gut aus.

Ratlosigkeit.

Quelltext rauf und runter… sieht doch gut aus! Quelltext mal im IE angucken… Oh!
Was ist das denn bitte?
Direkt am Anfang des Codes Sonderzeichen?! Ein Diff von Testblog und produktivem Blog. Ja, in der Tat der einzige Unterschied:

UTF-8 mit Byte Order Mark

Was soll das sein? Die header.php sind identisch!

Die Antwort nach gefühltem monatelangem Suchen:
Die Zeichenkodierung der Theme-Dateien war schuld!

Irgendwann kam ich vermutlich auf die Idee, dass es in einem UTF-8 Blog eine gute Idee ist, die jeweiligen Dateien auch unter UTF-8 zu speichern.
Nur leider macht das nicht jeder Editor gleich gut. In meinem Fall wurden die Dateien teilweise unter UTF-8 mit BOM (Byte Order Mark) gespeichert.

Die UTF-8-Kodierung des BOM besteht aus der Bytesequenz EF BB BF, die in nicht UTF-8-fähigen Texteditoren und Browsern meist als ISO-8859-1-Zeichen  erscheinen.

Da war sie, die Lösung… alle Dateien ohne Bommel gespeichert und sogar der IE mag nun wieder das Design! Was für eine Frickelei!

Dienstag… ja, da wahr was. Bloß was? Ich meine außer dem Ausfall von GMail Google Mail, der das Netz hat stöhnen lassen. Egal, weiter geht’s…

Den 9. April sollten sich Blogger in ihrem Kalender markieren, denn auch dieses Jahr wird es wieder einen CSS Naked Day geben. Alles weitere dazu liest man seit Donnerstag bei Frank Bueltge. Klasse Idee, das könnte lustig werden ;-)

Für den Freitag fällt mir nicht viel ein – darf ich mit einem netten Lied

[-> Eingebundenes Video im Blog ansehen <-]

Am Samstag mal ein bisschen Wirtschaft und Politik, lesenswert: Für Opel gibt es keine Zukunft. 

Sonntag. Der Frühling ist da!
Zum ersten mal in diesem Jahr an der Eisdiele angestellt und geschlemmt – einfach herrlich :-) 
Guten Start in die neue Woche! 

In Verbindung mit dem AdSense Manager Plugin gestaltet sich das ganze besonders simpel, da…

…dort bereits die Möglichkeit besteht, mittels Wrap Html Code Before/After den Code mit einem Div-Tag zu schmücken. Das sieht dann so aus:

CSS-Klasse für AdSense mitgeben

In Blogs ist es ja – mehr oder weniger – üblich, Links nicht in einem neuen Fenster zu öffnen. Dazu gibt es vermutlich auch Grundsatzdiskussionen von morgens bis abends :-) Wenn ich persönlich durch die Gegend surfe, öffne ich Links in meinem Firefox meistens eh mit rechter Maus und “neuem Tab”.
Hier auf dem Blog handhabe dies mehr so nach Lust und Laune – andere Blogs verlinke ich meistens ohne Attribut, andere Websites bekommen idR ein target=”_blank” verpasst, um in einem neuen Fenster aufzugehen.

Alle Links, die in einem neuen Fenster aufgehen, sind ab sofort mit einem kleinen Bild (dem hier: )am Endes des Links gekennzeichnet.

Beispiel:

• Google im gleichen Fenster: http://www.google.de
• Google im neuen Fenster: http://www.google.de

Schick, oder :-)

Das ganze habe ich mit CSS realisiert, alle modernen Browser sollten damit problemlos klarkommen (Gerüchte sagen, dass der IE6 das nicht versteht, deshalb schrieb ich ja auch modern und Browser)

Code in der Stylesheet-Datei:

Das wichtige hierbei ist das [target=_blank] – viel Spass beim testen :-)

"Caption" Bildunterschrift mit schickem Rahmen

Im Editor sah bisher immer alles super aus, live dann eher bescheiden.. Auch hier ist die Lösung natürlich das CSS – und die einfachste gefundene Lösung ist ebenfalls die naheliegendste: Den passenden Code aus dem aktullen Kubrick-Theme-Stylesheet schnappen (und irgendwann später mal selbst modifizieren). Allerdings gefällt es mir noch nicht so ganz, dass das ganze ein entweder-oder ist. Wenn ich mal keine Bildunterschrift haben will, bekommt mein Bild auch keinen Alt-Tag… uhmm, SEOs werden dann aber schimpfen. Na ja, ich halte die Augen mal nach einem passenden Plugin offen… Und hier noch der Code…

Und weil es so schön ist, vergleiche ich direkt nochmal Caption und Nix-Caption: