¿No lo sabías?, pues sí, WordPress viene por defecto con una API REST implementada, que podemos usar para lo que necesitemos.
Esto nos permite usar WordPress como un verdadero CMS, encargado del contenido, y aislarlo de la vista o vistas que queramos implementar. A esto se le viene llamando WordPress Headless.
Usaremos la API para conectar nuestro WordPress con las distintas vistas, por lo que vamos a ver qué tenemos por defecto, y qué mejoras vamos a necesitar.
Empecemos con un par de endpoints básicos:
/wp-json/wp/v2/posts : Consulta el listado de posts
/wp-json/wp/v2/posts/123 : Consulta la información de un post en concreto.
Ambas llamadas nos darán información sobre los posts de nuestro blog, como puede ser sus títulos, contenidos, categorías, etc …
Vamos a implementar un cliente php independiente que consuma parte de esta información, por ejemplo para listar los posts, mostrando su imagen, título y descripción.
Primero vamos a consultar la información del listado de posts, por lo que tendremos que consultar el endpoint /wp-json/wp/v2/posts
$url = 'http://localhost/wp/wp-json/wp/v2/posts';
$file = @file_get_contents($url);
$json = json_decode($file, true);
Con file_get_contents hacemos la llamada a la API, consiguiendo los datos en formato json. Cuyo resultado decodificamos, convirtiéndolos en un array con json_decode.
Ya tendríamos la información de los posts disponibles para recorrerlos e irlos mostrando.
Pero si nos fijamos en el json que nos proporciona WordPress, no tenemos la imagen destacada directamente, sino que tenemos el id del objeto media que tiene información sobre ella, por lo que para cada uno de los posts, tendremos que hacer una llamada adicional a la api, concretamente al endpoint wp-json/wp/v2/media/123 (si 123 es el id de featured_media).
$url = 'http://localhost/wp/wp-json/wp/v2/media/' . $post['featured_media'];
$file = @file_get_contents($url);
$json_media = json_decode($file, true);
Entre los distintos datos que nos proporciona /media, tenemos la url de la imagen, así como información sobre las distintas miniaturas que genera WordPress.
En nuestro caso, como estamos implementando un listado de posts, vamos a usar el tamaño medium.
<img src="<?php echo $json_media['media_details']['sizes']['medium']['source_url'];?>" width="<?php echo $json_media['media_details']['sizes']['medium']['width'];?>" height="<?php echo $json_media['media_details']['sizes']['medium']['height'];?>"/>
Con esto, ya tendríamos todo lo necesario para nuestro cliente que consumirá la API de WordPress, recorriendo los posts, y mostrando información sobre ellos.
El código final quedaría:
<html>
<head>
<title>Cliente API</title>
</head>
<body>
<ul>
<?php
$url = 'http://localhost/wp/wp-json/wp/v2/posts';
$file = @file_get_contents($url);
$json = json_decode($file, true);
if ( $json && (is_array($json)) ) {
foreach ( $json as $post ) {
$url = 'http://localhost/wp/wp-json/wp/v2/media/' . $post['featured_media'];
$file = @file_get_contents($url);
$json_media = json_decode($file, true);
?>
<li>
<?php
if ( $json_media && (is_array($json_media)) ) {
?>
<img src="<?php echo $json_media['media_details']['sizes']['medium']['source_url'];?>" width="<?php echo $json_media['media_details']['sizes']['medium']['width'];?>" height="<?php echo $json_media['media_details']['sizes']['medium']['height'];?>"/>
<?php
}
?>
<h2><?php echo $post['title']['rendered'];?></h2>
<p><?php echo $post['excerpt']['rendered'];?></p>
</li>
<?php
}
}
?>
</ul>
</body>
</html>
Con el que obtendríamos como resultado, sin formato alguno, simplemente html plano:
Ahora piensa en una app móvil, software de escritorio o las mil posibilidades que te da tener el contenido centralizado, en la nube, y el consumo de ellos por todo tipo de clientes. 🚀 🚀