• Comentarios desactivados en Añadir texto sobre las imágenes destacadas. (WordPress)

Seguramente habréis visto en muchos temas de WordPress cómo las imágenes destacadas pueden tener un texto sobre la imagen. Por ejemplo que el texto sobre la imagen sea la categoría del post.
Pues en Wplif explican cómo hacerlo.

Así es para que el texto sea la categoría del post:

<div class="post-thumb">
<span class="new-wrapper">

<?php
//Display post thumbnail

if ( has_post_thumbnail()) : the_post_thumbnail('thumbnail'); endif;

?>

<span>
<?php
// Get the Name of First Category

$category = get_the_category();
echo $category[0]->cat_name;

?>

</span>
</span>
 </div>

Y mediante CSS se consigue que el texto de la categoría aparezca delante de la imagen porque al elemento que contiene el texto (el spam) se le da posición absoluta:

.new-wrapper span {
	background-color: black;
	color:white;
	font-size: 12px;
	position:absolute;
	bottom:0px;
	left:0px;
	padding-left:10px;
	padding: 10px;
	-moz-opacity:.80;
	filter:alpha(opacity=80);
	opacity:.80;
	width:180px;
	display: block;
}

.new-wrapper {
float:left;
position:relative;
width: 180px;
overflow:hidden;
}

Comentarios cerrados.

volver arriba ↑