Necesito extraer un listado de posts de la base de datos de una web hecha en WordPress.
En este ejemplo voy a coger los últimos 4 posts de mi blog para luego mostrarlos en la «Home» como sección de últimos artículos publicados.
Voy a usar Alpine.js, una librería de Javascript que utiliza propiedades declarativas y reactivas dentro del propio HTML. Nos ayudará a construir interfaces más avanzadas de manera más rápida y simple.
En este caso NO sería la opción habitual ya que se podría hacer con la clase WP_Query. Vamos a pensar que queremos obtener los datos de consulta sobre un WordPress externo. Imagina el poder de esta función y todo lo que se puede obtener.
Utilidades
- Listado de artículos de webs referentes para mostrar en una intranet privada.
- Widget con los próximos eventos de una API de Terceros.
- Nuevos productos de un WooCommerce de un proveedor para mostrar en una aplicación headless.
- Información de una API de inmobiliaria
Empezamos…
Lo primero que vamos a hacer es insertar por CDN la librería Alpine.js. Utilizando el hook de WordPress wp_head. Agrega este código en el archivo functions.php de tu tema hijo.
<?php
// Snippet para llamar a alpine.js
function agregar_alpinejs() {
?>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" ></script>
<?php
}
add_action('wp_head', 'agregar_alpinejs');En nuestro componente Alpine.js, definimos una variable para almacenar los datos que obtendremos de la API. Puedes inicializarla con la función que vamos a crear para obtener los posts. Por ejemplo:
<div x-data="fetchPosts()">
<!-- Contenido del componente -->
</div>La función principal fetchPosts() devuelve un array con la data que inicializamos vacío. posts: [].
Utilizamos el método fetch de JavaScript para hacer una solicitud HTTP a la API y obtener los datos. Se ha agregado un método init() que llama a fetchData() para inicializar la carga de datos cuando se inicia el componente.
<div x-data="{ data: [] }" x-init="fetchData()">
<!-- ...contenido del componente... -->
<script>
function fetchPosts() {
return {
posts: [],
fetchData() {
fetch('https://israelescuer.com/wp-json/wp/v2/posts?per_page=4&orderby=date')
.then(response => {
if (!response.ok) {
throw new Error('La solicitud a la API falló');
}
return response.json();
})
.then(posts => {
// Assign the fetched posts directly to the Alpine.js scope
this.posts = posts; // Assuming this is inside a component, use 'this' to refer to the component's scope
})
.catch(error => {
console.error('Error al obtener los datos:', error);
});
},
init() {
this.fetchData();
}
};
}
</script>
</div>En el ejemplo anterior, se utiliza el método fetch para hacer una solicitud GET a la URL de la API. Una vez que se obtienen los datos, se convierten a formato JSON y se asignan a la variable posts del componente.
Utiliza una herramienta como Postman para probar la url de la API y observar los parámetros que necesitarás para extraer sus datos.
En mi caso para WordPress necesitaré obtener:
- title.rendered
- link
- excerpt.rendered
Ahora que tenemos los datos almacenados en la variable posts, podemos utilizarlos en el componente HTML. Por ejemplo, para iterar sobre los elementos del array y mostrarlos en una lista:
<div x-data="fetchPosts()">
<ul>
<template x-for="post in posts" :key="post.id">
<li x-text="post.title.rendered"></li>
</template>
</ul>
<script>
function fetchPosts() {
return {
posts: [],
fetchData() {
fetch('https://israelescuer.com/wp-json/wp/v2/posts?per_page=4&orderby=date')
.then(response => {
if (!response.ok) {
throw new Error('La solicitud a la API falló');
}
return response.json();
})
.then(posts => {
// Assign the fetched posts directly to the Alpine.js scope
this.posts = posts; // Assuming this is inside a component, use 'this' to refer to the component's scope
})
.catch(error => {
console.error('Error al obtener los datos:', error);
});
},
init() {
this.fetchData();
}
};
}
</script>
</div>En este ejemplo, se utiliza la directiva x-for para iterar sobre cada elemento en el array posts y se muestra el titulo de cada elemento en un elemento <li> de la lista.
Con estos pasos, deberías poder consumir una API externa utilizando Alpine.js. Recuerda adaptar el código a tus necesidades y asegurarte de manejar los posibles errores que puedan ocurrir durante la solicitud a la API.
El resultado es el siguiente: Para completar mi componente le añadíré al titulo un enlace al post correspondiente y un pequeño resumen. Lo voy a maquetar con un estilo Bento Box.
¿Dónde puedo integrar el código?
- Creando un shortcode no te olvides de ponerle un buffer de salida
- En un bloque personalizado con ACF
- Utilizando el HTML directamente en «Templates»
Más sobre Alpine.js
- Es una buena opción para crear componentes o bloques como Pestañas, ventanas modales, carruseles, acordeones, notificaciones…
- Viene a sustituir a jQuery, es más rápida y ligera.
¡Gracias por llegar hasta el final del turorial! Espero haberte ayudado, practica creando tus propios widgets o haciendo widgets para clientes.
