Usa CSS Sprites per abbellire le tue post di WordPress

Ti sei mai chiesto come si può migliorare la data di pubblicazione del tuo blog? Ti mostrerò come farlo usando gli sprite CSS in circa 18 minuti.

Nota editoriale: questo post è orientato verso i progettisti di temi. Si consiglia la conoscenza preventiva di CSS e WordPress.

Di cosa avrai bisogno:

• Un programma di grafica (io uso Adobe Photoshop CS4)
• Un semplice editor di testo

Cosa realizzerai in questo tutorial:

• Le date sui post del tuo blog saranno super in stile usando CSS Sprites

Iniziamo…

Passo 1

Accendi il tuo programma di grafica. È possibile scaricare un modello PSD o PNG per aiutare con il layout di tutte le date nel nostro Sprite.

Passo 2

Fondamentalmente vuoi creare una griglia usando mesi, giorni e anni. Come puoi vedere, la mia griglia ha i mesi in una colonna, i giorni in due colonne e infine gli anni in verticale in una colonna. Una volta che hai le tue date sulla "griglia" puoi salvare il file. Suggerimento: assicurati che il testo sia equidistante da cima a fondo e da sinistra a destra. Ciò rende più facile la matematica quando ogni data ha lo stesso spazio bianco.

Passaggio n. 3

Verso la codifica ... Non preoccuparti, è davvero facile, specialmente se stai usando il mio PNG o hai usato il file PSD (Include linee guida per mantenere la tua "griglia" più bella e più bella, quindi puoi tagliare e incollare il codice CSS in questo passaggio direttamente nel foglio di stile dei temi senza alcuna matematica.)

Il CSS è il seguente:

/ * Data Sprite * /
.data di pubblicazione
posizione: relativa;
larghezza: 66 px;
altezza: 60px;
fluttuare: a sinistra;

.mese giorno anno
posizione: assoluta;
text-indent: -1000em;
background-image: url (images / date_img.png);
background-repeat: no-repeat;

.month top: 10px; a sinistra: 0; larghezza: 33 px; altezza: 30 px;
.day top: 30px; a sinistra: 0; larghezza: 33 px; altezza: 30 px;
.anno fondo: 0; a destra: 13px; larghezza: 20px; altezza: 60px;

.m-01 background-position: 0 0px;
.m-02 background-position: 0 -30px;
.m-03 background-position: 0 -62px;
.m-04 background-position: 0 -94px;
.m-05 background-position: 0 -125px;
.m-06 background-position: 0 -155px;
.m-07 background-position: 0 -185px;
.m-08 background-position: 0 -217px;
.m-09 background-position: 0 -248px;
.m-10 background-position: 0 -279px;
.m-11 background-position: 0 -310px;
.m-12 background-position: 0 -341px;

.d-01 background-position: -51px 0;
.d-02 background-position: -51px -27px;
.d-03 background-position: -51px -57px;
.d-04 background-position: -51px -91px;
.d-05 background-position: -51px -122px;
.d-06 background-position: -51px -151px;
.d-07 background-position: -51px -185px;
.d-08 background-position: -51px -214px;
.d-09 background-position: -51px -249px;
.d-10 background-position: -51px -275px;
.d-11 background-position: -51px -309px;
.d-12 background-position: -51px -338px;
.d-13 background-position: -51px -373px;
.d-14 background-position: -51px -404px;
.d-15 background-position: -51px -436px;
.d-16 background-position: -51px -462px;
.d-17 background-position: -100px -0px;
.d-18 background-position: -100px -27px;
.d-19 background-position: -100px -57px;
.d-20 background-position: -100px -91px;
.d-21 background-position: -100px -122px;
.d-22 background-position: -100px -151px;
.d-23 background-position: -100px -185px;
.d-24 background-position: -100px -214px;
.d-25 background-position: -100px -249px;
.d-26 background-position: -100px -275px;
.d-27 background-position: -100px -309px;
.d-28 background-position: -100px -338px;
.d-29 background-position: -100px -373px;
.d-30 background-position: -100px -404px;
.d-31 background-position: -100px -436;

.y-2009 background-position: -150px 0;
.y-2010 background-position: -150px -60px;
.y-2011 background-position: -150px -120px;
.y-2012 background-position: -150px -180;
.y-2013 background-position: -150px -240px;
.y-2014 background-position: -150px -300px;

Spiegazione:

.data di pubblicazione - Imposta la larghezza e l'altezza dell'intera data. In questo caso, inseriremo la nostra data in una casella 66px per 60px.

.mese giorno anno - Imposta la larghezza e l'altezza dei singoli elementi che compongono la nostra intera data Sprite. I nostri mesi e giorni sono di 33 px di larghezza per 30 px di altezza. Gli anni sono 33px di larghezza per 60px di altezza. Quando metti insieme questi elementi, formano una scatola di 66 px di larghezza per 60 px di altezza. Allega anche il grafico che abbiamo creato nel passaggio n. 1 in modo che possiamo posizionarlo per ogni singolo elemento nello Sprite.

.da m-01 a .m-12 - Hai indovinato! Questi sono i nostri mesi. Questa parte del CSS posiziona il nostro grafico per visualizzare i mesi. Come puoi vedere, ho impostato l'immagine da spostare su un asse X Y in base a dove appare sull'immagine. Il modo più semplice per capire dove l'angolo in alto a sinistra (0,0) di ogni mese, giorno o anno si trova sull'immagine più grande è aprire Photoshop e selezionare lo strumento Selezione. Seleziona dall'alto in basso a sinistra e in alto a destra fino a poco sopra l'angolo in alto a sinistra del tuo mese, giorno o anno e nota dove il puntatore sta usando le statistiche del pannello informazioni.

.da d-01 a .d-31 - È usato esattamente per la stessa cosa di .m-01 - .m-12 ad eccezione del loro usato per i giorni piuttosto che per i mesi.

.y-2009 fino a .y-2014 - Come sopra, li usiamo solo per anni.

Passaggio 4

Apri il ciclo in WordPress. Il ciclo in WordPress è la pagina (s) che mostra (s) i tuoi post del blog. Questa è solitamente la pagina index.php. Le date vengono visualizzate anche su altre pagine, ma questo tutorial sostituisce solo le date nel ciclo principale. Se sei arrivato a questa sezione del tutorial sei abbastanza intelligente da cercare e sostituire le altre istanze di date nel tuo tema in altri file come single.php, page.php, archives.php etc.

Cerca qualcosa lungo questa linea nel tuo loop:

Sostituisci con queste linee:

Passaggio n. 5

Carica la tua immagine, i tuoi CSS e il tuo ciclo di temi (index.php). Hit refresh sul tuo blog (assicurati di essere sulla pagina in cui vengono mostrati i post) e Voila! Hai semplicemente stilizzato le tue date usando gli sprite CSS.

Todd Santoro è il preside e Sr. Designer nella sua compagnia ToddSantoro.com Designs. Todd ha lavorato sul web per 11 anni ed eccelle nell'interfaccia utente e nella progettazione grafica. Ama prestare attenzione ai dettagli e lo sviluppo nel quadro di WordPress. Puoi seguirlo cinguettio.