WordPress: titoli in sovraimpressione sulle immagini dei post

Molti siti in WordPress adottano la tecnica delle immagini con annesso titolo in sovraimpressione. Il problema è che spesso il testo fa parte dell'immagine, ossia non è accessibile all'utente. Possiamo ovviare facilmente a questo problema.

Nel file single.php potete aggiungere il seguente codice, dove ovviamente le dimensioni delle immagini sono a vostra discrezione:

[php htmlscript="true"] <div class="post-thumb-title"> <?php the_post_thumbnail(array(500,470));?> <p class="thumb-title"><?php the_title(); ?></p> </div> <?php the_content(); ?>

Quindi aggiungiamo i seguenti stili al nostro CSS principale:


/*= Post thumb with title */

div.post-thumb-title {
	width: 500px;
	margin: 1em auto;
}

div.post-thumb-title img {
	display: block;
	min-width: 100%;
}

div.post-thumb-title p.thumb-title {
	margin: 0;
	height: 2em;
	line-height: 2;
	position: relative;
	top: -2em;
	max-width: 100%;
	text-align: center;
	color: #fff;
	background: rgba(0, 0, 0, 0.7);
}

Tramite l'uso delle larghezze minime e massime otteniamo questo effetto finale:

Torna su