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:
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:
<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:
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;}
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.
Ähnliche Artikel:
- WordPress Custom-Logo im Dashboard
- WordPress Menü – Seiten und Kategorien gleichzeitig
- WordPress – Eigene Login Seite gestalten
- WordPress Loop – Er stellt sich ausführlich vor!
- FaceBook “Gefällt mir” Button für WordPress
Dir hat der Artikel gefallen?
Loading ...
Aktuelle Diskussion