Aprende en este tutorial cómo enseñar entradas de un CPT de WordPress en formato rejilla usando un shortcode sin necesidad de plugins.
Una de las peticiones más recurrentes de los suscriptores de Código Génesis es cómo mostrar un bucle de entradas de un Custom Post Type en cualquier sitio de la web.
Y si puede ser en formato de rejilla aún mejor. 😉
Así que en el tutorial de hoy vas a ver cómo conseguirlo.
Este sería el resultado final:
¿Te interesa? Sigue leyendo. 😉
Pasos para mostrar un loop de entradas de CPT mediante un shortcode WordPress
1. Genera el shortcode para mostrar las entradas del CPT
Añade este snippet al final del fichero functions.php o a tu plugin de funcionalidades:
Para ver este código y los otros 2063 snippets de esta web,
identifícate o suscríbete aquí.
Con este código creas un loop que mostrará las entradas del CPT curso.
Los elementos que muestras son (por orden):
- Imagen destacada (enlazado a la entrada)
- Título (enlazado a la entrada)
- Excerpt
Y puedes modificar:
- El CTP (en este caso «course»)
- El criterio para ordenar (en este caso por fecha)
- Orden descendente (en este caso DESC, pero puedes cambiar a ASC)
- Número de entradas que se muestran (en este caso 6).
Además, lo encapsulas dentro de un shortcode con add_shortcode para que se muestren donde quieras con solo poner [cursos].
Ya casi lo tienes.
2. Dar diseño de rejilla al bucle de entradas
Añade el siguiente fragmento al final del fichero style.css:
Para ver este código y los otros 2063 snippets de esta web,
identifícate o suscríbete aquí.
Con esto consigues mostrar las entradas en formato de rejilla. Puedes jugar con el valor del minmax (250px) para cambiar el número de columnas que se muestran.
Ya solo te queda un paso.
3. Introduce el shortcode donde desees
La ventaja de los shortcodes es que puedes insertarlos en cualquier punto de la web.
Solo tendrás que escribir «[tu_shortcode]» donde quieras que se visualice, en este caso [cursos].
Importante:
- Si estás utilizando el editor clásico, utiliza la pestaña de HTML para introducir el shortcode.
- En caso de que ya estés usando el nuevo editor de bloques (Gutenberg) puedes añadirlo al bloque normal de párrafo, el de HTML o el de shortcode. Todos ellos renderizarán de forma correcta el contenido.
Conclusiones
Si quieres mostrar un bucle de entradas de un CPT en formato rejilla sin tener que añadirlas a mano ni recurrir a un plugin, ahora ya sabes cómo hacerlo mediante un shortcode.
¿Alguna duda? Te leo en los comentarios.
Y si quieres darme una sugerencia para próximos tutoriales, déjamela en el formulario de contacto. Ventajas de ser suscriptor. 😉
