Inicio / CMS & DEV / API de REST de WordPress
CMS & DEV
Consumir API REST de WordPress desde React
WordPress expone de forma nativa una API REST a /wp-json/wp/v2/. Aquí le mostramos cómo recuperar sus artículos de forma limpia desde una aplicación React, sin un complemento adicional.
Recuperar elementos con búsqueda
import { useEffect, useState } from 'react';
function ArticlesList() {
const [posts, setPosts] = useState([]);
useEffect(() => {
fetch('https://monsite.com/wp-json/wp/v2/posts?_embed')
.then((res) => res.json())
.then((data) => setPosts(data));
}, []);
return (
{posts.map((post) => (
- {post.title.rendered}
))}
);
}
Activar Cors en el lado de WordPress
add_action('rest_api_init', function () {
header('Access-Control-Allow-Origin: https://monapp-react.com');
header('Access-Control-Allow-Methods: GET');
});
Sugerencia: use _Embed en la URL para recuperar la imagen resaltada y el autor en una sola consulta, en lugar de multiplicar las llamadas a la API.
Preguntas frecuentes
¿Necesita un complemento para activar la API REST?
No, está habilitado de forma predeterminada desde WordPress 4.7 sin instalación adicional.
¿Cómo publicar contenido y no solo leerlo?
Luego, debe autenticarse a través de contraseñas de la aplicación o JWT y enviar solicitudes POST autenticadas.