Imprimiendo las categorias sobre la imagen destacada

Imprimiendo las categorias sobre la imagen destacada

Desde mi punto de vista, el buen diseño de una página web descansa, entre otras mucha cosas, en la sencillez del diseño y en los pequeños detalles que marcan la diferencia.

En Internet es posible encontrar muchos trucos completamente gratuitos que podemos reutilizar en nuestra página web. Hoy dedicaré esta publicación a uno de ellos que he encontrado en la página w3schools: sobre imprimir las categorías de los artículos de tu blog en las imágenes destacadas. Es un pequeño detalle que sólo afecta al diseño y que queda muy bien.

Veamos, primero, el código que tenemos que insertar en el lugar en el que llamemos a la función de wordpress para insertar las imagenes destacadas: the_post_thumbnail ():

<div class="container_img_index">
  <a href="<?php the_permalink() ?>">
     <?php the_post_thumbnail ('post-thumbnails', ['class' => 'img-fluid']);
     ?>
  </a>
  <div class="bloque_texto_img">
     categorias
  </div>
</div>

El código se lee bastante bien, no creo que haga falta ningún comentario adicional. Ahora vamos a dedicar unos minutos al código css que escribiremos en nuestro fichero style. css del theme que estamos construyendo.

.container_img_index { position: relative; }

.bloque_texto_img {
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
  color: #232323;
  background-color: #ffd200;
}

Situaremos el bloque de texto en la parte superior izquierda de la imagen destacada de la página de index, con un fondo de una tonalidad amarilla y letras en negro ( esos valores los personalizas a tu gusto ).

Solo queda un detalle que seguro ya has advertido: en el código anterior pusimos el texto categorías en donde deben buscarse las categorias e imprimirse. Necesitamos sustituir éste texto por código php y llamadas a funciones de wordpress. Veamos:

$categories_list = get_the_category_list( esc_html__( ', ', 'wp' ) );
  if ( $categories_list ) {
    printf( '<span class="cat-links">' . esc_html__( 'Posted in %1$s', 'wp' ) . '</span>', $categories_list ); 
}

En una variable almacenamos la lista de categorias de cada uno de los articulos que obtenemos de la función de wordpress get_the_category_list, indicándole en el argumento que éstas estarán separadas unas de otras (en caso de que haya varias) por una coma. Si la variable no está vacía, entonces imprimirá las categorías sobre la imagen destacada.

Como siempre, termino el artículo solicitando a mis lectores a que comenten, compartan código alternativo o dejen sus aportaciones.

No Comments

Post a Comment