¿Cuáles fueron los pasos principales que seguiste para integrar la API de WordPress y mostrar las últimas publicaciones?

En esta publicación, quiero compartir una funcionalidad que recientemente me tocó agregar en el sitio web a una empresa, y que también he implementado en mi propia web. La idea es integrar la API de WordPress en tu sitio web o portafolio para mostrar las últimas publicaciones de tu blog. Es una funcionalidad interesante que puede añadir valor a tu perfil profesional al mantenerlo actualizado con tu contenido más reciente.

Voy a explicar cómo lo hice utilizando Laravel, un framework de PHP que facilita mucho el desarrollo web. A continuación, les muestro el código que usé para obtener las publicaciones de un blog de WordPress y mostrarlas en la web.

Paso 1: Obtener las Publicaciones del Blog

Primero, creamos una función en Laravel para obtener las publicaciones. La API de WordPress ofrece un endpoint para obtener los posts, que es: https://[URL DE TU BLOG]/wp-json/wp/v2/posts. Vamos a solicitar las últimas 3 publicaciones, pero este número puede ajustarse según tus necesidades.

public function getBlogPosts()
{
    // URL para obtener las publicaciones
    $url = 'https://[URL DE TU BLOG]/wp-json/wp/v2/posts?per_page=3';

    // Hacer la solicitud cURL para obtener las publicaciones
    $posts = $this->makeCurlRequest($url);

    // Si hubo un error en la solicitud
    if (!$posts) {
        return view('index', ['publicaciones' => []]);
    }

    // Arreglo donde guardaremos las publicaciones con las imágenes
    $postsWithImages = [];

    // Recorrer las publicaciones para obtener la imagen destacada
    foreach ($posts as $post) {
        $featuredMediaId = $post['featured_media'];

        // Si la publicación tiene imagen destacada, hacer otra solicitud para obtener los detalles de la imagen
        if ($featuredMediaId) {
            $mediaUrl = "https://[URL DE TU BLOG]/wp-json/wp/v2/media/$featuredMediaId";
            $mediaDetails = $this->makeCurlRequest($mediaUrl);

            if ($mediaDetails && isset($mediaDetails['media_details']['sizes']['full']['source_url'])) {
                $post['featured_image_url'] = $mediaDetails['media_details']['sizes']['full']['source_url'];
            } else {
                $post['featured_image_url'] = null;
            }
        } else {
            $post['featured_image_url'] = null;
        }

        // Agregar la publicación con su imagen al arreglo
        $postsWithImages[] = $post;
    }

    // Pasar las publicaciones con las imágenes a la vista
    return view('index', [
        'publicaciones' => $postsWithImages,
    ]);
}

Paso 2: Configurar la Función makeCurlRequest

Para realizar las solicitudes a la API de WordPress, utilizamos una función llamada makeCurlRequest, que se encarga de hacer la solicitud cURL y devolver los datos obtenidos. Asegúrate de tenerla implementada en tu código:

private function makeCurlRequest($url)
    {
        // Inicializar cURL
        $ch = curl_init();

        // Configurar opciones de cURL
        curl_setopt($ch, CURLOPT_URL, $url);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);  

        // Ejecutar la solicitud
        $response = curl_exec($ch);

        // Manejar errores de cURL
        if (curl_errno($ch)) {
            curl_close($ch);
            return false;
        }

        // Cerrar cURL
        curl_close($ch);

        // Decodificar la respuesta JSON
        return json_decode($response, true);
    }

Paso 3: Actualizar la Vista para Mostrar las Publicaciones

Finalmente, debes actualizar la vista para mostrar las publicaciones con los títulos, extractos y, si es posible, las imágenes destacadas. El siguiente código es un ejemplo básico de cómo hacerlo en Blade, la plantilla de Laravel:

<!-- blog dinamico wp -->
        <div class="container py-5">
            <h1 class="text-center mb-4">Últimas Publicaciones de Mi Blog</h1>

            @if(isset($publicaciones) && count($publicaciones) > 0)
                <div class="row">
                    @foreach($publicaciones as $publicacion)
                        <div class="col-md-4 mb-4">
                            <div class="card shadow-sm h-100">
                                <a href="#" target="_blank">
                                    @if (isset($publicacion['featured_image_url']))
                                        <img src="{{ $publicacion['featured_image_url'] }}"
                                            class="card-img-top img-fluid"
                                            alt="Imagen destacada del post"
                                            style="max-height: 200px; object-fit: cover;">
                                    @else
                                        <img src="/ruta/a/imagen/por_defecto.jpg"
                                            class="card-img-top img-fluid"
                                            alt="Imagen por defecto"
                                            style="max-height: 200px; object-fit: cover;">
                                    @endif
                                </a>
                                <div class="card-body">
                                    <h5 class="card-title">
                                        <a href="{{ $publicacion['link'] }}" target="_blank" class="text-dark text-decoration-none">{{ $publicacion['title']['rendered'] }}</a>
                                    </h5>
                                    <p class="card-text">{{ Str::limit(strip_tags($publicacion['excerpt']['rendered']), 150) }}</p>
                                </div>
                                <div class="card-footer bg-transparent text-end">
                                    <a href="{{ $publicacion['link'] }}" class="btn btn-primary btn-sm" target="_blank">Leer más</a>
                                </div>
                            </div>
                        </div>
                    @endforeach

                </div>
            @else
                <p class="text-center">No se encontraron publicaciones.</p>
            @endif
        </div>
        </section>

Consideraciones Adicionales

• Reemplaza [URL DE TU BLOG] por la URL real de tu blog.
• Si las publicaciones no tienen imágenes destacadas, la propiedad featured_media será 0. Puedes manejar este caso mostrando una imagen predeterminada o simplemente omitiendo la imagen.
• Puedes personalizar la cantidad de publicaciones a mostrar cambiando el parámetro per_page en la URL.

Espero que esta guía te sea de utilidad si alguna vez necesitas integrar publicaciones de un blog de WordPress en tu sitio web. ¡No dudes en experimentar con la API de WordPress y adaptarla a tus necesidades!