馃摑Integraci贸n API WordPress para mostrar posts

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!