Descubre cómo insertar a la vez las entradas del blog y otro Custom Post Type (CPT) en la página principal del H 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.
Todo empezó cuando Juanma, uno de nuestros suscriptores, me dejó este comentario:
Una idea muy interesante sería, en este mismo theme o en otros de Genesis, la posibilidad de sustituir el loop de las entradas que se muestran debajo (en la página front-page.php) por el de algún CPT que tengamos creado (cursos, libros, porfolio…).
Me puse manos a la obra y en primer lugar expliqué cómo hacerlo en el N Theme (home con widgets) y luego lo adapté al H Theme (home sin widgets).
Poco después, Carlos sugirió algunas opciones extra muy interesantes:
Cómo hacerlo cuando tienes más de un CPT si quieres mostrar todos. O, por ejemplo, como mostrar los post y los CPT en la home a la vez.
Dicho y hecho. 😉
Aquí tienes el tutorial para visualizar los posts del blog y otro CPT al mismo tiempo en la página principal del H Theme.
Y este es el resultado final:
¿Vamos a por ello?
Código para agregar entradas de blog y otro CPT a la home del H 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 H Theme.
Atendiendo a los tutoriales anteriores, podrías pensar que para mostrar los posts del blog y el CPT «Curso» serviría un snippet tan sencillo como este:
<?php $posts = get_posts(array(
'posts_per_page' => $max_posts,
'post_type' => array(
'post',
'curso'
))); ?>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 cursos).
Por eso es más adecuado que dejes la sección de blog y añadas una nueva para el CPT que te interese insertando el siguiente código:
Para ver este código y los otros 2057 snippets de esta web,
identifícate o suscríbete aquí.
Con este cambio, consigues que se vean las entradas del CPT «curso» bajo los posts del blog en la home del H Theme.
Además, este fragmento aprovecha la clase de CSS «featured» para que el apartado del CPT se muestre de otro color, diferenciándose.
Por supuesto, te invito a modificar el tipo de Custom Post Type (porfolio, 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 cursos») por uno personalizado para el tuyo.
2. Personaliza el CSS
Al crear una sección nueva con fondo gris, es probable que te interese resaltar el botón del CPT o alterar el del blog para conseguir un contraste superior.
¿Prefieres un resultado final como este?:
Entonces, sustituye este código en el apartado Front Page del style.css:
Para ver este código y los otros 2057 snippets de esta web,
identifícate o suscríbete aquí.
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
Ya ves que no solo puedes sustituir las entradas del blog con las de tu propio CPT, sino que también puedes mostrar ambas en la home del H Theme.
Aunque está creado para una plantilla concreta, puedes usar este snippet de guía para modificar otros temas de AsiThemes.
¿Quieres que cree este tutorial para otro child theme concreto? Dímelo en los comentarios para que prepare uno a tu medida.
Ventajas de ser suscriptor. 😉
