Entradas-relacionadas-generatepress

Colocar entradas relacionadas al final de las entradas en GeneratePress

Gracias a Elements de Generatepress es muy sencillo implementar un sistema de entradas relacionadas al final de cada post. Basta saber copiar, pegar y aplicar un poco de CSS. Sin necesidad de instalar ningún plugin, y con la facilidad de poder colocar estas entradas relacionadas allá donde queramos.

Por ejemplo podemos colocar las entradas relacionadas a la sidebar, al final de la entrada, después de los comentarios, después de la caja de autor…. Basta indicar la ubicación que quieres que aparezca a través de los hooks. Si te es más fácil, puedes echar un vistazo a la guía de hooks de GeneratePress.

Primero, creamos un nuevo hook

Vamos a Elementos y creamos un nuevo elemento de hook. Aquí simplemente insertamos el código siguiente de WordPress que creará un listado de entradas relacionadas a partir de las categorías. Es decir, mostrará entradas de la misma categoría de la de la entrada. Así de sencillo.

<div class='related-post-bloc'><h3 class='titol-related-post'>Potser també t&apos;interessa</h3>
	<?php $orig_post = $post;
global $post;
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;

$args=array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=> 2, // Número d'entrades que es mostraran.
'ignore_sticky_posts'=>1
);

$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
while( $my_query->have_posts() ) {
$my_query->the_post();?>

	<div class="container-relacionat">
	  <ul>
             <li>
               <?php the_post_thumbnail($recent_post->ID, 'post-thumbnail') ?>
                 <a href="<?php the_permalink(); ?>">
	          <h3><?php the_title(); ?></h3>
                 </a>
                  <?php the_excerpt(); ?>
             </li>
          </ul>
       </div>
<?
}
echo '</div>';
}
}
$post = $orig_post;
wp_reset_query(); ?>
	</div>

Podemos hacer modificaciones en este código, por ejemplo cambiando el número de entradas que necesitamos mostrar a argumentos. O también añadir otros elementos que queremos que salgan al listado de entradas.

Una vez creado el nuevo hook hay que decidir dónde lo ubicamos dentro de la entrada y decidir donde queremos que aparezca (obviamente será en todas las entradas). En mi caso he establecido las siguientes reglas:

  • Que aparezca después del bloque de comentarios: after_main_content
  • Que se localice (display rules) en todas las entradas.
  • También debemos marcar la casilla de ejecutar php.

En mi caso, al no utilizar sidebar, las entradas relacionadas se ven bien en after_main_content. Pero si utilitzais sidebar tendréis que ubicar el bloque de entradas relacionadas donde se vean bién. Tendréis que ir jugando.

Finalmente aplicamos un poco de CSS

Personalmente no me gustaba como se mostraban las entradas relacionadas. En este caso prefiero que se muestren en columnas y dentro de un contenedor blanco con los mismos paddings de las entradas únicas. Así voy insertar el siguiente código CSS.

/* CSS per entrades relacionades */

.related-post-bloc{
	background-color: #fff;
	display: table;
	padding: 40px;
	}

.container-relacionat li{
	list-style: none;
	padding: 20px;
}

.related-post-bloc ul, ol {
    margin: 0 0 0 0;
}

.container-relacionat ul{
	width: 50%;
	float: left;
	background-color: #fff;
}


@media (max-width: 768px) {
    /* CSS entrades relacionades per a mòbils (ample complet) */
.container-relacionat ul{
	width: 100%;
	float: left;
	background-color: #fff;
}
	
}

Y si aún no lo veis claro, aquí un video tutorial de cómo implementar un sistema de entradas relacionadas a GeneratePress

Deja un comentario

Identifícate