• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Mostrar entradas de un CPT en formato rejilla mediante un shortcode

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:

Mostrar un loop de entradas de un CPT mediante shortcode.

¿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 1827 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 1827 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].

Ejemplo de shortcode de 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. 😉

CPT PHP Shortcode WordPress

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes identificarte o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?