Grafische Datumsanzeige für WordPress

Beim Surfen im Netz bin ich bei LearningjQuery.com auf eine wirklich super geniale Idee der Datumsanzeige gestoßen.
Hab ich natürlich für meine Seite gleich nachgemacht. Das Ergebnis könnt ihr links oben neben diesem Beitrag bestaunen.

Oder im Original auf der LearningjQuery Seite:

Wem diese Art der Datumsanzeige gefällt kann weiter lesen, jetzt erklär ich euch wie ihr diesen Effekt ebenfalls in eurem WordPress Blog einbauen könnt.

Ein kurzer Blick in Firebug offenbart uns viele Geheimnisse des Internets, wie auch hier:

Es wurde also eine extra CSS Klasse definiert “postdate” und die Tage, Monate und Jahre werden einzeln aufgelistet.
Das sich hinter diesem HTML Ausschnitt php Code verbirgt sollte klar sein, denn nur so können wir die Datumsanzeige dynamisch verändern.

Also weiter gesucht und folgendes CSS gefunden:

Hier erkennt man die Css Klasse “postdate” und ganz wichtig – man erkennt dass die Tage-, Monate- und Jahresanzeigen von einer einzelnen Grafik “dates.png” über “css sprites” bezogen werden.

Ein paar Links über CSS Sprites und wie man diese einsetzen kann:

• CSS Sprites – Kombination von Hintergrundbildern
• CSS Sprites – Image Slicing

Die Hintergrundgrafik

Hier seht ihr die “dates.png” aus der die jeweiligen Bereiche durch CSS Sprites ausgeschnitten werden.

Diese Datei müsst ihr in euren Themeordner kopieren:

/wp-content/themes/**DEIN THEME ORDNER**/images/dates.png

Links die originale, rechts meine farblich angepasste Datei:

Der HTML Code

Unser Endergebnis soll wie folgt aussehen:

Um den Code genau zu erläutern habe ich diese Grafik gefunden:

Die folgende HTML muss je nach Theme in “single.php”, “blog_single.php”, “search.php”, “archive.php”, … eingefügt werden. Je nachdem wo ihr diese Art der Datumsanzeige benutzen wollt.

Um obrigen HTML Code in WordPress hervorzurufen, ist folgender PHP Code notwendig:

Das CSS

Über die CSS Datei verläuft das Slicen der “dates.png”. Daher muss der meiste Code hier geschrieben werden.
Da wir dem HTML Code spezielle Klassen vergeben haben, können wir diese im CSS genau definieren.

Als erstes verleihen wir der ganzen Klasse “postdate” eine genaue Position.
Dann die definieren wir die Positionen der einzelnen Zwischenklassen (month, day, year).

Die gesamte Klasse wird relativ positioniert, die einzelnen Zwischenklassen absolut.
Alle drei Klassen sollen das selbe Hintergrundbild enthalten (unser Sprite), jedoch mit speziellen Höhen und Breiten Angaben.

Folglich benötigen wir 12 verschiedene Positionen für alle Monate, 31 Möglichkeiten für die Tage und 10 für die Jahre (sollte reichen ^^).

Hier die CSS Datei mit allen Tagen, Monaten und Jahren. Das war vielleicht eine Arbeit

Das CSS Sprites Verfahren benötigt die genauen Positionen der einzelnen Bildausschnitte – diese sind durch die genauen Koordinaten/Pixel angegeben.

Die CSS hab ich zum Beispiel in “blog.css” eingefügt, einige von euch müssten die vielleicht auch in “style.css” einfügen. -> Je nach Theme unterschiedlich.
Wer von euch WP-Remix benutzt, fügt dies auch in die “blog.css” ein.

Falls ihr mittlerweile FireBug für FireFox installiert habt, könnt ihr es einfach herausfinden.

Klickt im “Untersuchen-Modus” auf eure Datumsanzeige und ihr seht auf der rechten Seite den dazugehörigen CSS Code. Hier wird auch der Name der .CSS angezeigt.

Nachdem ihr alles eingefügt habt, seid nicht enttäuscht wenn die Datumsanzeige total falsch im Raum hängt.
Öffnet FireBug und probiert so lange mit dem CSS herum, bis es passt wie ihr euch das wünscht.

Falls es nicht klappen sollte, helfe ich euch gerne weiter

Viel Spaß mit dem Coden und Rumspielen, hoffe euch hat die Anleitung gefallen.

ÜBER DEN AUTOR

Roman

Hey, willkommen auf meinem Blog! Ich bin 24 Jahre alt und studiere Fahrzeug und Flugzeugtechnik an der FH München. In meiner Freizeit betreibe ich diesen Blog und gehe gerne fotografieren. Um mehr über mich und diese Seite zu erfahren, oder Kontakt mit mir aufzunehmen, habe ich die "About-Seite" eingerichtet. Viele Grüße