Descubre cómo insertar a la vez las entradas del blog y otro Custom Post Type (CPT) en la página principal del O Theme usando un snippet.
Una de las ventajas de pertenecer al club de Código Genesis es que puedes dejar tus sugerencias para futuros tutoriales.
A los colegas de Bicicleta Studio, les gustó el tutorial para mostrar tanto posts como CPT en la home del H Theme y nos dejaron este comentario:
¡Genial Nahuai!
¿Qué te parece hacer lo mismo para el O Theme?
Por supuesto, me pareció estupendo. Así que me puse manos a la obra.
Aquí tienes el tutorial para visualizar los posts del blog y otro CPT al mismo tiempo en la página principal del O Theme.
Este es el resultado final:
¿Vamos a por ello?
Código para agregar entradas de blog y otro CPT a la home del O Theme
1. Añade un nuevo Custom Post Type
En este caso, debes modificar el fichero front-page.php ubicado en la carpeta raíz del O Theme.
Atendiendo a tutoriales anteriores, podrías pensar que para mostrar los posts del blog y el CPT «Porfolio» serviría realizar una sustitución tan sencilla como esta:
<?php
$args = array();
if ($display_posts == 'last') {
$args = array('posts_per_page' => $max_posts);
}por:
<?php
$args = array();
if ($display_posts == 'last') {
$args = array(
'posts_per_page' => $max_posts,
'post_type' => array(
'post',
'portfolio'
));
}Pero al usar este bloque te encontrarías con 2 inconvenientes graves:
- Aparecerían todas las entradas mezcladas.
- El botón «Ver más» solo llevaría a un apartado (blog o porfolio).
Por eso es más adecuado que dejes la sección de blog e insertes una nueva para el CPT introduciendo el siguiente código:
Para ver este código y los otros 1869 snippets de esta web,
identifícate o suscríbete aquí.
Con este cambio, consigues que se vean las entradas del CPT «porfolio» bajo los posts del blog en la home del O Theme.
Por supuesto, te invito a modificar el tipo de Custom Post Type (cursos, eventos, podcasts…) y aplicar los ajustes de CSS según te convenga.
Recuerda cambiar el texto del botón que lleva a la página de archivos del CPT («Ir a los proyectos») por uno acorde al tuyo.
2. Personaliza el CSS
El nuevo apartado con las entradas del CPT está envuelto con un div con la clase «posts-cpt-home». Por lo tanto, tienes la opción de darle un aspecto diferente usando CSS.
En este ejemplo no he usado ninguna modificación para mantener el look minimalista del tema. Pero tú puedes alterarlo añadiendo este código al final del style.css y usándolo como referencia:
Para ver este código y los otros 1869 snippets de esta web,
identifícate o suscríbete aquí.
Esta línea solo cambia el color de fondo. Sin embargo, puedes variar a tu gusto cualquier elemento de este apartado.
3. Ajusta el número de entradas
Si no aplicas ningún cambio, el número de entradas del CPT será por defecto el mismo que elijas para las del blog desde el personalizador.
¿Quieres escoger otra cantidad? Modifica la línea:
'posts_per_page' => $max_posts,por:
'posts_per_page' => 3,Y acuérdate de reemplazar el 3 por el número que prefieras. 😉
Conclusiones
Ahora ya sabes cómo mostrar post y entradas de un CPT en la home del O Theme.
¿Tienes alguna sugerencia? Déjamela en los comentarios para que prepare un tutorial a tu medida.
Ventajas de ser suscriptor. 😉
