Consultar la API de WordPress con Alpine.js

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.

Últimas Entradas del Blog

Ejemplo en tiempo real

¿Dónde puedo integrar el código?

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.

Sobre el autor

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *