Aprende con este tutorial cómo crear una plantilla front-page.php para mostrar las entradas de un Custom Post Type en WordPress.
A raíz de los tutoriales donde muestro cómo crear loops personalizados de Custom Post Type mediante shortcodes, un suscriptor me preguntó como podía conseguir el mismo resultado pero creando un plantilla front-page.php.
Esta es una buena estrategia si no necesitas la versatilidad de un shorcode, que se puede mostrar en cualquier punto de la web, y solo lo necesitas en la página principal.
Vamos a ver cómo conseguirlo:
Pasos para mostrar las entradas de un CPT en la página principal creando un front-page.php
1. Crea el fichero front-page.php
Crea el fichero front-page.php, en la raíz del tema con el siguiente código:
Para ver este código y los otros 2055 snippets de esta web,
identifícate o suscríbete aquí.
En primer lugar eliminas el loop de entradas por defecto y lo reemplazas por uno personalizado.
Del nuevo bucle personalizado puedes modificar desde los argumentos (tipo de CTP, número de entradas…) hasta qué elementos de la entrada quieres mostrar.
En este caso, los argumentos son:
- tipo de entrada > ‘course’ (sustitúyelo por el nombre con el que hayas registrado el CPT)
- orden > mostrará las más antiguas primero (cambia a ‘DESC’ si quieres invertirlo)
- número de entradas > 12
- añade paginación
Y los elementos de las entradas son:
- título
- imagen
- extracto
Por otro lado, en la segunda parte del bloque generas una clase .entry-wrapper que permite aplicar los estilos necesarios para crear el diseño de rejilla.
Además, este código fuerza el diseño de ancho completo, y elimina la metainformación de las entradas, para que el diseño sea más limpio.
¿Ya tienes un tamaño adecuado? Entonces elimina esta línea.
Pero si la mantienes, acuérdate de regenerar todas la miniaturas de las imágenes que ya se encontraban en tu biblioteca de WordPress con el plugin Regenerate Thumbnails.
2. Personaliza el CSS de la rejilla
Una vez realizados los cambios en el child theme, solo te falta asignar los estilos para que se muestre en formato grid.
Para ello inserta este fragmento al final de style.css:
Para ver este código y los otros 2055 snippets de esta web,
identifícate o suscríbete aquí.
Ahora solo te falta el último detalle.
3. Selecciona la página de inicio
Por último, crea una página sin contenido y selecciónala como página de inicio. Esto lo puedes hacer desde el personalizador de WordPress o desde los Ajustes > Lectura > Tu página de inicio muestra > Una página estática > seleccionar.
Conclusiones
Ahora ya sabes cómo crear un fichero front-page.php que muestre las entradas de un Custom Post Type en formato rejilla.
Aunque este código está creado para Genesis Sample (3.4), con unos pocos ajustes te servirá para cualquier child theme de Genesis.
Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.
Todo ventajas de ser suscriptor. 😉
