Descubre en este tutorial cómo obtener y mostrar las últimas entradas de un CPT de cualquier instalación remota de WordPress usando la API REST.
Y hoy vas a ver cómo puedes mostrar las últimas entradas de cualquier tipo de CPT y del dominio que tu elijas. Este sería el resultado:
Vamos a verlo:
Instrucciones para mostrar las últimas entradas de un CPT en la instalación de WordPress que quieras usando la API REST
Para obtener la información sobre las últimas entradas vas a usar el endpoint de la API REST que te da acceso a esa información.
Además, vas a encapsular estos datos dentro de un shortcode, con los parámetros de dominio, CPT y número de entradas por página, para poder mostrar las entradas donde quieras.
Añade el siguiente snippet al 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 shortcode que te permite mostrar un listado con todos los posts de una instalación remota de WordPress usando el shortcode [listado_entradas].
El shortcode tiene 3 parámetros:
- Dominio: donde indicas el dominio del que quieres obtener las entradas. Por ejemplo:
domain="nbadiola.com"
. - Tipo de entrada: donde indicas el tipo de entrada que quieres obtener. Puede ser cualquier Custom Post Type o entrada o página. Por ejemplo:
cpt="newsletter"
. - Número de entradas por página: donde indicas el número de entradas que quieres mostrar. Por ejemplo:
per_page="6"
.
Es decir, este shortcode[[cg_post_list domain="nbadiola.com" cpt="newsletter" per_page="6"]]
obtendría 6 entradas de newsletter de la web de nbadiola.com.
Podrás usar cualquier dominio que use WordPress y que no tenga deshabilitada la API REST, pero como siempre te recomiendo usar el código «para hacer el bien». 😉
A nivel de la API usas la función wp_remote_request
para obtener el endpoint para las entradas (con el método GET
) y una vez obtienes la información enviada por la API utilizas las funciones wp_remote_retrieve_body
para extraer los datos del cuerpo y json_decode
para decodificarla.
Y cuando ya tienes el array con los datos, usas un bucle (foreach) para extraer la información que te interesa.
En este caso, el título [title->rendered]
> con enlace al mismo [link]
y la imagen destacada.
Para obtener la imagen destacada podrías usar [featured_media]
pero la limitación que tiene es que esta opción no te permite elegir el tamaño de la imagen. Esto no es óptimo a nivel de rendimiento, ya que no quieres usar una imagen de 1600px de ancho si vas a mostrarlo en una rejilla donde se va a tener máximo 300px.
Por eso usas el parámetro ?_embed
y obtienes la imagen destacada con $remote_post->_embedded->{'wp:featuredmedia'}[0]
. En este caso, usas el tamaño medio (medium
) pero puedes modificarlo a tus necesidades. Si no sabes cuÁles son los tamaños disponibles en tu instalación puedes usar este tutorial para obtener un listado.
Además, el listado de entradas lo envuelves en un div
con la clase grid-posts
para poder personalizar el diseño y que se muestren en formato de cuadrícula.
2. Aplica diseño de rejilla al bucle de entradas
Añade el siguiente fragmento al final del fichero style.css:
/* Rejilla de posts */
.grid-posts {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
}
Con esto consigues mostrar las entradas en formato de rejilla. Puedes jugar con el valor del minmax (150px) para cambiar el número de columnas que se muestran.
Para poder ver el listado en formato de rejilla solo te queda un paso.
3. Introduce el shortcode donde desees
Por último, solo tienes que escribir
donde quieras que se visualice y modificar los parámetros.[[listado_entradas domain="eldominio" cpt="elcpt" per_page="6"]]
Este sería un ejemplo del listado que mostraría el shortcode:
Conclusiones
Ahora ya sabes cómo utilizar la API REST para obtener y mostrar las últimas entradas de un CPT (post o página) en la instalación remota de WordPress que tú elijas.
La API REST de WordPress es muy potente y permite un amplio abanico de opciones. Tienes más información técnica al respecto en página oficial para desarrolladores de WordPress.
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. 😉