Aprende en este tutorial cómo mostrar al final de un CPT los cursos relacionados al que está viendo el usuario gracias a Advanced Custom Fields (ACF).
En un tutorial anterior ya te expliqué cómo podías mostrar entradas relacionadas con un Custom Post Type. En ese caso utilizabas las categorías y etiquetas para que se mostraran de forma automática.
Si prefieres tener un sistema que te permita, a ti o tu cliente, un control más granular sobre cuáles son las entradas relacionadas que quieres mostrar, Advanced Custom Fields (ACF) puede ser una opción muy interesante (sobre todo si ya estás usando el plugin en el proyecto).
En este tutorial vas a ver como usando el campo de relación de ACF, un poco de PHP y CSS puedes mostrar cursos relacionados con el que está visitando el usuario.
Este es el resultado final:
Vamos a verlo paso a paso.
Pasos para mostrar los cursos relacionados al final del contenido
1. Crea un campo personalizado de relación con ACF
Si no lo has hecho ya, descarga e instala el plugin Advanced Custom Fields. Con la versión gratuita del repositorio de WordPress es suficiente en este caso.
Una vez activado ve a Campos personalizados > Añadir nuevo y crea un campo de relación.
Rellena de la siguiente manera los campos:
Puedes personalizar alguno de ellos a tu gusto (por ejemplo, hacerlo obligatorio), pero respeta los campos que están en recuadros rojos para que el código de los siguientes pasos funcione correctamente. 😉
El máximo de posts también es recomendable que lo mantenga en 3 para aprovechar la maquetación con CSS del paso 3.
Una vez hayas creado y configurado el campo personalizado, indica en Ubicación > Reglas que quieres que se muestre en el post type de curso.
2. Crea un fichero single-course.php
Para mostrar los cursos relacionados vamos a «engancharlos» al final de las entradas single, así que para ello tienes que crear un fichero single-course.php en la raíz del child theme de Genesis.
Una vez lo hayas hecho, añade este código.
<?php
/**
* Archivo de plantilla para la single de los cursos. Mostrará los cursos relacionadas al final del contenido.
*/
add_action( 'genesis_entry_footer', 'cg_related_courses' );
function cg_related_courses() {
$relacionados = get_field('relacionados');
if( $relacionados ): ?>
<h3>Cursos relacionados</h3>
<div class="relacionados">
<?php foreach( $relacionados as $p ): ?>
<div>
<a href="<?php echo get_permalink( $p->ID ); ?>"><?php echo get_the_post_thumbnail( $p->ID, 'gb-block-post-grid-landscape' ); ?></a> <a href="<?php echo get_permalink( $p->ID ); ?>"><?php echo get_the_title( $p->ID ); ?></a>
</div>
<?php endforeach; ?>
</div>
<?php endif;
}
genesis();En este código usas el hook genesis_after_entry para enganchar los cursos relacionados y que se muestren justo debajo del contenido de la entrada.
Con el snippet anterior, el tamaño de imagen que usas es gb-block-post-grid-landscape, pero si no tienes Genesis Blocks instalado puedes usar los nativos de WordPress o los creados por otros plugins (o tema). Si quieres saber todos los tamaños de imagen que tienes en tu instalación de WordPress echa un ojo a este tutorial.
En este caso, los elementos que se mostrarán serán la imagen destacada y el título. Para que se muestren tal y como queremos aún falta un paso.
3. Da estilos a los cursos relacionados
A continuación debes otorgar los estilos para que se muestren en formato de rejilla.
Para ello, añade el siguiente fragmento al final del fichero style.css:
/* Diseño cursos relacionados */
.relacionados {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
}
.entry-footer h3,
.relacionados div {
text-align: center;
}
.relacionados a {
font-size: 18px;
}Ya lo tienes.
Al aplicar estos estilos consigues que los posts se muestren en formato rejilla.
4. Elige los cursos relacionados
Por último, solo te queda elegir los cursos relacionados.
Para ello, edita el curso y ve hasta la metabox «Relacionados», debajo del contenido, y selecciona los cursos que quieras que se muestren.
Por defecto, saldrán todos los cursos, ya que así lo has indicado en los ajustes del campo personalizado. Y también podrás usar el buscador.
Una vez que selecciones los 3 cursos (y guardes) aparecerán en la parte inferior del curso:
Conclusiones
Ahora ya sabes cómo mostrar cursos relacionados al final de un Custom Post Type en WordPress usando Advance Custom Fields.
En realidad este es solo un ejemplo con cursos, pero puedes modificarlo para usarlo con cualquier CPT. Incluso si quieres podrías usarlo para post relacionados en el blog.
Por otro lado, también puedes modificar el diseño de cómo se muestran los cursos/entradas relacionadas. Puedes inspirarte en otros tutoriales, por ejemplo para mostrar un efecto de overlay.
Y aunque el tutorial está pensado para aplicarlo en un child theme de Genesis también se puede adaptar facilmente a otro tipo de tema.
Si te interesa que cree otro tutorial con alguna de las alternativas que te comento, solo tienes que decirlo.
Ventajas de ser suscriptor. 😉
