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:
grafisches-datum-wordpress

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:

grafisches datum firebug

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:

grafisches-datum-css

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:

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:

dates_orig dates

Der HTML Code

Unser Endergebnis soll wie folgt aussehen:

<div class="postdate">
        <div class="month m-06">Jun</div>
        <div class="day d-30">30</div>
        <div class="year y-2009">2009</div>
</div>

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

grafisches-datum-schema

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:

<div class="postdate">
        <div class="month m-<?php the_time('m') ?>"><?php the_time('M') ?></div>
        <div class="day d-<?php the_time('d') ?>"><?php the_time('d') ?></div>
        <div class="year y-<?php the_time('Y') ?>"><?php the_time('Y') ?></div>
</div>

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 ;)

.postdate {border-botton-width: 0; float: left; position: relative; width: 50px; height: 50px;}

.month, .day, .year {
  position: absolute;
  text-indent: -1000em;
  background-image: url(/wp-content/themes/**DEIN THEME ORDNER**/images/dates.png);
  background-repeat: no-repeat;
}
.month { top: 2px; left: 0; width: 32px; height: 24px;}
.day { top: 25px; left: 0; width: 32px; height: 25px;}
.year { bottom: 0; right: 0; width: 17px; height: 48px;}

.m-01 { background-position: 0 4px;}
.m-02 { background-position: 0 -28px;}
.m-03 { background-position: 0 -57px;}
.m-04 { background-position: 0 -90px;}
.m-05 { background-position: 0 -121px;}
.m-06 { background-position: 0 -155px;}
.m-07 { background-position: 0 -180px;}
.m-08 { background-position: 0 -216px;}
.m-09 { background-position: 0 -246px;}
.m-10 { background-position: 0 -273px;}
.m-11 { background-position: 0 -309px;}
.m-12 { background-position: 0 -340px;}

.d-01 { background-position: -50px 0;}
.d-02 { background-position: -50px -31px;}
.d-03 { background-position: -50px -62px;}
.d-04 { background-position: -50px -92px;}
.d-05 { background-position: -50px -123px;}
.d-06 { background-position: -50px -154px;}
.d-07 { background-position: -50px -185px;}
.d-08 { background-position: -50px -216px;}
.d-09 { background-position: -50px -248px;}
.d-10 { background-position: -50px -278px;}
.d-11 { background-position: -50px -309px;}
.d-12 { background-position: -50px -340px;}
.d-13 { background-position: -50px -371px;}
.d-14 { background-position: -50px -402px;}
.d-15 { background-position: -50px -434px;}
.d-16 { background-position: -50px -465px;}
.d-17 { background-position: -100px 0px;}
.d-18 { background-position: -100px -31px;}
.d-19 { background-position: -100px -62px;}
.d-20 { background-position: -100px -92px;}
.d-21 { background-position: -100px -123px;}
.d-22 { background-position: -100px -154px;}
.d-23 { background-position: -100px -185px;}
.d-24 { background-position: -100px -216px;}
.d-25 { background-position: -100px -248px;}
.d-26 { background-position: -100px -278px;}
.d-27 { background-position: -100px -309px;}
.d-28 { background-position: -100px -340px;}
.d-29 { background-position: -100px -371px;}
.d-30 { background-position: -100px -402px;}
.d-31 { background-position: -100px -434px;}

.y-2006 { background-position: -150px 0;}
.y-2007 { background-position: -150px -50px;}
.y-2008 { background-position: -150px -100px;}
.y-2009 { background-position: -150px -150px;}
.y-2010 { background-position: -150px -200px;}
.y-2011 { background-position: -150px -250px;}
.y-2012 { background-position: -150px -300px;}
.y-2013 { background-position: -150px -350px;}
.y-2014 { background-position: -150px -400px;}
.y-2015 { background-position: -150px -450px;}
.y-2016 { background-position: -150px -500px;}

css-sprites-funktionsweise

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.

Related Posts Plugin for WordPress, Blogger...
ÜBER DEN AUTOR

Roman

PG 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