Teilen Sie dies:
Verwenden Sie CSS-Sprites zur Verschönerung Ihrer WordPress-Post-Termine
Haben Sie sich jemals gefragt, wie Sie das Postdatum Ihres Blogs super gestalten können? Ich werde Ihnen in etwa 18 Minuten zeigen, wie das mit CSS-Sprites geschieht.
Redaktioneller Hinweis: Dieser Beitrag richtet sich an Designdesigner. Vorkenntnisse in CSS und WordPress werden empfohlen.
Was wirst du brauchen:
- Ein Grafikprogramm (ich verwende Adobe Photoshop CS4)
- Ein einfacher Texteditor
Was Sie in diesem Tutorial erreichen werden:
- Die Daten in den Blog-Beiträgen werden mit CSS-Sprites im Super-Stil gestaltet
Lass uns anfangen…
Schritt 1
Starten Sie Ihr Grafikprogramm. Sie können eine PSD- oder PNG-Vorlage herunterladen, um das Layout aller Daten in unserem Sprite zu erleichtern.
Schritt 2
Grundsätzlich möchten Sie ein Raster mit Monaten, Tagen und Jahren erstellen. Wie Sie sehen, hat mein Raster die Monate in einer Spalte, dann die Tage in zwei Spalten und schließlich die Jahre vertikal in einer Spalte. Sobald Sie Ihre Daten im "Raster" erhalten, können Sie die Datei speichern. Hinweis: Stellen Sie sicher, dass Ihr Text von oben nach unten und von links nach rechts gleichmäßig verteilt ist. Dies erleichtert die Berechnung, wenn jedes Datum das gleiche Leerzeichen hat.
Schritt 3
Zum Coding… Machen Sie sich keine Sorgen, es ist wirklich einfach, vor allem, wenn Sie mein PNG-Format verwenden oder die PSD-Datei verwendet haben (es enthält Richtlinien, damit Ihr „Raster“ schön bleibt, und Sie können den CSS-Code ausschneiden und einfügen Dieser Schritt wird ohne Mathe direkt in das Stylesheet Ihrer Themes aufgenommen.)
Das CSS lautet wie folgt:
/ * Date Sprite * /
.nach Datum
Position: relativ;
Breite: 66px;
Höhe: 60px;
Schwimmer: links;
.Monat Tag Jahr
Position: absolut;
Gedankenstrich: -1000em;
Hintergrundbild: URL (images / date_img.png);
Hintergrundwiederholung: keine Wiederholung;
.Monat top: 10px; links: 0; Breite: 33px; Höhe: 30px;
.Tag oben: 30px; links: 0; Breite: 33px; Höhe: 30px;
.year bottom: 0; rechts: 13px; Breite: 20px; Höhe: 60px;.m-01 Hintergrundposition: 0 0px;
.m-02 Hintergrundposition: 0 -30px;
.m-03 Hintergrundposition: 0 -62px;
.m-04 Hintergrundposition: 0 -94px;
.m-05 Hintergrundposition: 0 -125px;
.m-06 Hintergrundposition: 0 -155px;
.m-07 Hintergrundposition: 0 -185px;
.m-08 Hintergrundposition: 0 -217px;
.m-09 Hintergrundposition: 0 -248px;
.m-10 Hintergrundposition: 0 -279px;
.m-11 Hintergrundposition: 0 -310px;
.m-12 Hintergrundposition: 0 -341px;.d-01 Hintergrundposition: -51px 0;
.d-02 Hintergrundposition: -51px -27px;
.d-03 Hintergrundposition: -51px -57px;
.d-04 Hintergrundposition: -51px -91px;
.d-05 Hintergrundposition: -51px -122px;
.d-06 Hintergrundposition: -51px -151px;
.d-07 Hintergrundposition: -51px -185px;
.d-08 Hintergrundposition: -51px -214px;
.d-09 Hintergrundposition: -51px -249px;
.d-10 Hintergrundposition: -51px -275px;
.d-11 Hintergrundposition: -51px -309px;
.d-12 Hintergrundposition: -51px -338px;
.d-13 Hintergrundposition: -51px -373px;
.d-14 Hintergrundposition: -51px -404px;
.d-15 Hintergrundposition: -51px -436px;
.d-16 Hintergrundposition: -51px -462px;
.d-17 Hintergrundposition: -100px -0px;
.d-18 Hintergrundposition: -100px -27px;
.d-19 Hintergrundposition: -100px -57px;
.d-20 Hintergrundposition: -100px -91px;
.d-21 Hintergrundposition: -100px -122px;
.d-22 Hintergrundposition: -100px -151px;
.d-23 Hintergrundposition: -100px -185px;
.d-24 Hintergrundposition: -100px -214px;
.d-25 Hintergrundposition: -100px -249px;
.d-26 Hintergrundposition: -100px -275px;
.d-27 Hintergrundposition: -100px -309px;
.d-28 Hintergrundposition: -100px -338px;
.d-29 Hintergrundposition: -100px -373px;
.d-30 Hintergrundposition: -100px -404px;
.d-31 Hintergrundposition: -100px -436;.y-2009 Hintergrundposition: -150px 0;
.y-2010 Hintergrundposition: -150px -60px;
.y-2011 Hintergrundposition: -150px -120px;
.y-2012 Hintergrundposition: -150px -180;
.y-2013 Hintergrundposition: -150px -240px;
.y-2014 Hintergrundposition: -150px -300px;
Erläuterung:
.nach Datum - Legt die Breite und Höhe des gesamten Datums fest. In diesem Fall werden wir unser Datum in eine Box mit 66px für 60px passen lassen.
.Monat Tag Jahr - Legt die Breite und Höhe der einzelnen Elemente fest, aus denen unser ganzes Datums-Sprite besteht. Unsere Monate und Tage sind 33px breit und 30px hoch. Die Jahre sind 33px breit und 60px hoch. Wenn Sie diese Elemente zusammenstellen, bilden sie eine Box mit 66 Pixel Breite und 60 Pixel Höhe. Es fügt auch die in Schritt 1 erstellte Grafik hinzu, damit wir sie für jedes einzelne Element im Sprite positionieren können.
.m-01 bis m-12 - Du hast es erraten! Das sind unsere Monate. Dieser Teil des CSS positioniert unsere Grafik, um die Monate anzuzeigen. Wie Sie sehen, habe ich das Bild so eingestellt, dass es sich auf der X-Y-Achse bewegt, je nachdem, wo es im Bild angezeigt wird. Der einfachste Weg, um herauszufinden, wo sich die obere linke Ecke (0,0) jedes Monats, Tages oder Jahres auf dem größeren Bild befindet, besteht darin, Photoshop zu öffnen und das Auswahlwerkzeug auszuwählen. Wählen Sie von links oben nach oben und von rechts nach rechts bis über die obere linke Ecke Ihres Monats, Tages oder Jahres und notieren Sie, wo Ihr Zeiger die Statistiken des Infofensters verwendet.
.d-01 bis .d-31 - Wird für genau dasselbe wie für .m-01 - .m-12 verwendet, außer für die Tage und nicht für die Monate.
.y-2009 bis .y-2014 - Wie oben, nur wir benutzen sie für die Jahre.
Schritt 4
Öffnen Sie die Schleife in WordPress. Die Schleife in WordPress ist die Seite (n), auf der Ihre Blogbeiträge angezeigt werden. Dies ist normalerweise die index.php-Seite. Datumsangaben werden auch auf anderen Seiten angezeigt, aber dieses Tutorial ersetzt nur die Datumsangaben in der Hauptschleife. Wenn Sie zu diesem Abschnitt des Tutorials gekommen sind, sind Sie intelligent genug, um die anderen Instanzen von Datumsangaben in Ihrem Design in anderen Dateien wie single.php, page.php, archives.php usw. zu suchen und zu ersetzen.
Suche nach etwas entlang dieser Linie in deiner Schleife:
Ersetzen Sie mit diesen Zeilen:
Schritt # 5
Laden Sie Ihr Bild, CSS und die Schleife Ihrer Designs hoch (index.php). Klicken Sie auf "Aktualisieren" in Ihrem Blog (stellen Sie sicher, dass Sie sich auf der Seite befinden, auf der die Beiträge angezeigt werden) und "Voila!". Sie haben Ihre Daten einfach mit CSS-Sprites gestylt.
Todd Santoro ist der Chef und Senior Designer in seiner Firma ToddSantoro.com Designs. Todd arbeitet seit 11 Jahren im Web und zeichnet sich durch UI und Grafikdesign aus. Er liebt es, auf Details zu achten und das WordPress-Framework zu entwickeln. Du kannst ihm folgen Twitter.