Aprende en este tutorial cómo mostrar entradas de un CPT de WordPress en formato rejilla usando un shortcode con parámetros sin necesidad de plugins.
Una de las peticiones más recurrentes de los suscriptores de Código Génesis es cómo insertar 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. 😉
Esto ya lo viste en un tutorial reciente.
Pero hoy vas a combinarlo con otra de las peticiones populares: poder cambiar el parámetro que identifica al CPT de las entradas que vas a mostrar.
De esta manera, puedes crear bucles de entradas de cualquier CPT con un solo shortcode, indicándole el parámetro del mismo.
Interesante ¿verdad?
Este sería el resultado final para un tipo de entrada:
¿Quieres ver otro? Sigue leyendo. 😉
Pasos para mostrar un loop de entradas de CPT mediante un shortcode con parámetros
1. Genera el shortcode con parámetros 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 1867 snippets de esta web,
identifícate o suscríbete aquí.
Con este código creas un loop con 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 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 y le añades el parámetro 'cpt' , para poder indicarle qué tipo de entrada quieres que muestre.
Ya casi lo tienes.
2. Aplica 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 1867 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.
Ahora solo te queda un paso.
3. Introduce el shortcode con el parámetro 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, como tienes que indicar el parámetro del CPT del cual quieres que se muestren las entradas, el shortcode sería algo así: [loop cpt='course'].
Y tendría este resultado:
¿Quieres insertar las entradas de otro CPT? Entonces solo tienes que cambiar el parámetro cpt='course'.
Por ejemplo, para mostrar las entradas del CPT de porfolio, usarías este shortcode: [loop cpt='portfolio'].
En definitiva, solo tienes que cambiar el parámetro del shortcode que identifica al CPT por el slug con el que registrarte dicho Custom Post Type.
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 y un parámentro.
¿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. 😉
