Es posible que necesites superponer sobre las imágenes destacadas del blog un texto. En concreto, me refiero a las categorías del artículo.

Esto puede proporcionar una imagen particularmente interesante y con un aspecto profesional de la plantilla de wordpress que estás creando. Para hacer este trabajo reutilizaré código que ya está escrito. Es fácil encontrarlo en Internet. Yo me lo he descargado de la página web w3schools.com.

Quisiera antes de seguir hacer una puntualización. Mis desarrollos los realizo con la plantilla de underscores.me. De ahí extraigo las líneas de código PHP que mostraré en este artículo. Es gratuito y muy práctico, así que os recomiendo que lo probéis.

Abriré el archivo template-tags.php de la plantilla. Busco la función que gestiona las imágenes destacadas. El código que me encuentro tiene el siguiente aspecto.

<a class="post-thumbnail" href="<?php the_permalink(); ?>" aria-hidden="true" tabindex="-1">					
	<?php
		the_post_thumbnail(
			'blog-index',
			array(
				'alt' => the_title_attribute(
				array(
					'echo' => false,
				)
			),
			'class' => 'rounded'
			)
		);
	?>
</a>

Ahora necesito buscar las líneas de HTML5 para modificar el theme y superponer el texto encima. Ese código es el siguiente:

<div class="contenedor-img">
  <img src="nature.jpg" alt="Norway" style="width:100%;">
  <div class="text-block-img">
    <p>What a beautiful sunrise</p>
  </div>
</div>

El cambio que necesito hacer es sumamente sencillo. Simplemente reemplazar la línea con la etiqueta <img> por unas cuantas líneas en PHP que os he mostrado unos párrafos más arriba.

Solo queda una cosa más que hacer; incluir unas lo que necesitamos de PHP que listarán las categorías del artículo que está asociado a imagen destacada. Ese código es:

<?php
	$categories_list = get_the_category_list( esc_html__( ', ', 'antoniogarciaprats' ) );
	if ( $categories_list ) {
		/* translators: 1: list of categories. */
		printf( '<span class="cat-links">' . esc_html__( 'Posted in %1$s', 'antoniogarciaprats' ) . '</span>', $categories_list ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
	}
?>

El siguiente paso es incluir en nuestro fichero style.css las líneas que vamos a utilizar para darle formato.

.contenedor-img {
	position: relative;
  }
  
  /* Bottom right text */
  .text-block-img {
	position: absolute;
	top: 0;
	left: 0;
	background-color: black;
	color: white;
	padding: 3px 10px;
	color: var(--blanco);
	font-family: var(--fuentePrincipal);
	font-size: 0.8em;

	border-radius: 2px 0px 6px 0px;
  }

Cualquier duda o aclaración que necesitéis, os las contestaré a través de la sección de comentarios del blog o de las cuentas de Redes Sociales que tiene asociadas el portal.

Dejar respuesta

Please enter your comment!
Please enter your name here