Le mie frequenze

Da un paio di settimane lo staff di sviluppo di Wordpress.org ha rilasciato la versione 2.6 della propria piattaforma: moltissime le novità di rilievo, soprattutto nel back-office. Tra le modifiche prettamente estetiche spicca l’introduzione della didascalia con sfondo colorato sotto le immagini, che nel pacchetto di installazione/aggiornamento si applica però esclusivamente al tema di default.

Nel caso in cui abbiate installato e personalizzato un tema differente, precedente al lancio di WordPress 2.6, bisogna implementare questa miglioria nel foglio di stile del tema in uso. In realtà non è una modifica molto facoltativa, perché se anche non gradissimo l’aggiunta della didascalia la visualizzazione delle immagini risulterebbe alterata, dato che adesso il codice HTML fa riferimento ad uno stile (caption) non presente nel foglio di stile.

La modifica è estremamente semplice e richiede solo un banalissimo copia e incolla: nel back-office della nostra installazione di WordPress andiamo a modificare il foglio di stile (style.css) del tema desiderato ed in fondo, dopo l’ultima riga, incolliamo il seguente testo:

/* Captions */
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
/* End captions */  

Quindi salviamo ed aggiorniamo la nostra home-page per verificare che le immagini adesso siano visualizzate correttamente.

AGGIORNAMENTO

A quanto pare questa aggiunta nel foglio di stile corregge la visualizzazione della didascalia delle immagini, ma non corregge il problema dell’allineamento. Scegliendo infatti di allineare l’immagine a destra o a sinistra, il tema non sarà in grado di posizionarla con il testo intorno, a meno che non aggiungiamo anche queste impostazioni al foglio di stile:

/* Begin Images */
p img {
padding: 0;
max-width: 100%;
}
/* Using 'class="alignright"' on an image will (who would've
thought?!) align the image to the right. And using 'class="centered',
will of course center the image. This is much better than using
align="center", being much more futureproof (and valid) */
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
.alignright {
float: right;
}
.alignleft {
float: left
}
/* End Images */