Semplicemente usando una sola immagine, un po’ di CSS e un pizzico di Php riusciremo a mettere l’icona del calendario con la data in un post di WordPress, senza usare nessun plugin, con un risultato simile a questo :

Apriamo l’editor dei tema di WordPress e selezioniamo il file single.php dove andremo ad inserire il codice che mostrerà la data dell’articolo. Calcolate bene dove volete che appaia, a me piace in alto a destra, e poi inserite queste semplici righe:

<div class="date">
    <div class="date-month"><?php the_time('M'); ?></div>
    <div class="date-day"><?php the_time('d'); ?></div>
</div>

La funzione the_time funziona proprio come la funzione date in Php : la M chiamerà il mese e la d richiamerà il giorno. Caricate quest’immagine nei vostri file di WordPress e annotate l’indirizzo. Ora aprite il file style.css del vostro tema ed alla fine aggiungete lo stile della nuova data appena creata. Non dimenticate di modificare l’url nel css usando l’indirizzo dell’immagine del calendario.

.date {
	background:#fff url('indirizzoImmagine.jpg') no-repeat scroll top left;
	width:60px;
	height:57px;
	color:#FFFFFF;
	text-align:center;
}
.date .date-month {
	height:18px;
	font-size:13px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
}
.date .date-day {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:30px;
}

Possiamo pero’ anche fare un altro esempio, e poi sceglierete quale soluzione si adatta piu’ al vostro tema! Useremo l’immagina del calendario come sfondo, e sopra scriveremo la data.

Sempre nel file single.php scriviamo lo stesso codice dell’esempio precendente

<div class="date">
    <div class="date-month"><?php the_time('M'); ?></div>
    <div class="date-day"><?php the_time('d'); ?></div>
</div>

ma questa volta cambieremo lo stile con :

.date {
	background:#fff url('indirizzoImmagine.jpg') repeat-x scroll top left;
	width:60px;
	height:60px;
	text-align:center;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	text-transform:uppercase;
}
.date .date-day {
	color:#333;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:35px;
}
.date .date-month {
	font-size:11px;
	font-weight:bold;
}

Salvate col tasto destro il vostro calendario preferito, con il colore che piu’ si adatta al vostro tema!

Il risultato lo potete vedere in alto a destra in questo articolo : la data col calendario di questo post è stata ottenuta con questo semplice metodo! 

Articoli che potrebbero interessarti :

Anteprima di un post con immagine nella homepage di WordPress

I lettori che si seguono sempre avranno notato una piccola novità nella homepage: ora le anteprime degli articoli hanno una piccola immagine nella homepage! Per ottenere questo effetto (che a mio ...

Continua a Leggere

Aumentiamo la sicurezza di WordPress

Cercando un po' in giro per la rete su come aumentare la sicurezza della piattaforma di blog più usata al mondo, Wordpress, mi sono imbattuta in questa lista di consigli. Diciamo ...

Continua a Leggere

Come aggiornare a WordPress 2.8

Fare backup del database e dei file del sito così nel caso di danni si può rimediare Verifichiamo se il tema è compatibile con la versione 2.8 andando qui Verifichiamo se i ...

Continua a Leggere

Come usare la funzione Excerpt in WordPress

Possono esserci diverse ragioni per cui si sceglie di pubblicare nella propria home page gli articoli per intero o solo la parte iniziale. I post per intero sono piu facili da ...

Continua a Leggere

Risolvere Errore Feed WordPress Interpretazione XML

Il Feed di Feedburner all'improvviso ha smesso di funzionare dando questo errore dovuto a Wordpress : “XML Parsing Error: XML or text declaration not at start of entity“. Anche se nel ...

Continua a Leggere

Anteprima di un post con immagine nella homepage

Aumentiamo la sicurezza di WordPress

Come aggiornare a WordPress 2.8

Come usare la funzione Excerpt in WordPress

Risolvere Errore Feed WordPress Interpretazione XML

Tags: articolo calendario data guida Wordpress