WordPress REST API: Tüm Yazıları Kolayca Nasıl Çekilir?

WordPress sitenizin içeriğini modern web veya mobil uygulamalarla entegre etmek mi istiyorsunuz? Geleneksel temaların ve eklentilerin ötesine geçerek dinamik çözümler üretmek artık çok kolay. Bu kapsamlı rehberde, WordPress REST API’nin gücünü kullanarak sitenizdeki tüm yazıları nasıl kolayca çekebileceğinizi adım adım öğreneceksiniz.

Geleneksel WordPress kurulumları genellikle bir tema ile gelir ve içeriği doğrudan tarayıcıya sunar. Ancak günümüz modern web dünyasında, bu yaklaşım her zaman yeterli olmayabilir. Özellikle tek sayfalık uygulamalar (SPA’lar), mobil uygulamalar veya statik site oluşturucular gibi “ayrık” (decoupled) mimarilerde, WordPress’in yalnızca bir içerik yönetim sistemi (CMS) olarak kullanılması ve içeriğinin başka bir platform tarafından tüketilip gösterilmesi istenir. İşte tam bu noktada WordPress REST API devreye giriyor.

WordPress REST API, sitenizin veri tabanındaki içeriğe, standart HTTP istekleri aracılığıyla erişim sağlayan bir arayüzdür. Bu sayede, WordPress sitenizi bir veri kaynağı olarak kullanabilir ve yazıları, sayfaları, yorumları veya özel yazı tiplerini (Custom Post Types) istediğiniz herhangi bir uygulamada gösterebilirsiniz. Bu, size eşi benzeri görülmemiş bir esneklik sunar. Örneğin, React, Vue.js veya Angular gibi popüler JavaScript kütüphaneleriyle interaktif ön yüzler geliştirebilir, iOS veya Android için özel mobil uygulamalar oluşturabilir ya da Gatsby veya Next.js gibi çerçevelerle yüksek performanslı statik web siteleri inşa edebilirsiniz. Kısacası, WordPress’in güçlü içerik yönetim yeteneklerini korurken, içeriğin sunum katmanında tam kontrol elde edersiniz. Bu durum, özellikle özelleştirilmiş kullanıcı deneyimleri sunmak isteyen geliştiriciler ve tasarımcılar için büyük avantajlar sağlar.

API’nin temel amacı, farklı sistemler arasında yapılandırılmış ve standart bir veri alışverişi protokolü sağlamaktır. WordPress REST API de bu amaca hizmet ederek, içeriğinizi JSON (JavaScript Object Notation) formatında sunar. JSON, insan tarafından okunabilir ve makineler tarafından kolayca ayrıştırılabilir bir veri formatıdır. Bu sayede, farklı programlama dilleri ve platformlar arasında sorunsuz bir iletişim kurulabilir. Bu özellik, modern web geliştirmenin temel taşlarından biridir ve WordPress’i sadece bir blog platformu olmaktan çıkarıp, güçlü bir içerik yönetim omurgasına dönüştürür. API sayesinde, WordPress’in arka uç gücünden faydalanırken, ön yüzdeki tüm kısıtlamalardan kurtulmuş olursunuz. Örneğin, SEO optimizasyonunu tamamen kontrol edebilir, performans optimizasyonlarını dilediğiniz gibi yapabilir ve kullanıcı deneyimini baştan sona tasarlayabilirsiniz. Ayrıca, farklı hizmetleri (örneğin e-posta pazarlama, CRM) WordPress içeriğinizle entegre etmek için de API’yi kullanabilirsiniz. Bu çok yönlülük, geliştiricilere sınırsız olanaklar sunar.

WordPress REST API Nedir ve Temel Kavramları Nasıl Çalışır?

REST API, yani “Representational State Transfer Application Programming Interface”, internet üzerinde sistemler arası iletişimi sağlamak için kullanılan mimari bir stildir. Basitçe ifade etmek gerekirse, bir uygulamanın diğer bir uygulama ile konuşmasını sağlayan bir dizi kural ve standarttır. WordPress REST API de, bu kuralları uygulayarak WordPress sitenizin verilerine (yazılar, sayfalar, kullanıcılar vb.) HTTP protokolü üzerinden erişilmesini sağlar. Temel olarak, web tarayıcınızın bir web sitesine bağlanıp sayfa istemesi gibi, bir uygulama da WordPress sitenizin API’sine bağlanıp veri isteyebilir veya veri gönderebilir.

REST API’nin Temel Prensipleri Nelerdir?

REST API’ler genellikle aşağıdaki temel prensiplere dayanır:

• Durumsuzluk (Stateless): Her istek, sunucunun isteği işlemek için ihtiyaç duyduğu tüm bilgiyi içermelidir. Sunucu, önceki isteklerden herhangi bir istemci durumunu saklamaz.
• İstemci-Sunucu Mimarisi: İstemci ve sunucu birbirinden bağımsızdır. İstemci sadece sunucudan veri ister, sunucu da bu veriyi sağlar.
• Önbelleklenebilirlik (Cacheable): Yanıtlar, önbelleğe alınıp alınamayacaklarını belirtmelidir. Bu, performansı artırabilir.
• Katmanlı Sistem (Layered System): Bir istemci, doğrudan son sunucuya bağlı olup olmadığını bilmeden bir ara sunucuya bağlanabilir.
• Birleşik Arayüz (Uniform Interface): Kaynakları tanımlamak, onlara erişmek ve manipüle etmek için standart bir yöntem kullanılır.

WordPress REST API, bu prensipleri izleyerek güvenilir ve esnek bir arayüz sunar. Veriler genellikle JSON formatında döndürülür, bu da onu modern web uygulamaları için ideal kılar.

WordPress API Endpoint’leri ve HTTP Metotları Nasıl İşler?

Bir API endpoint’i, API aracılığıyla erişebileceğiniz belirli bir URL’dir. Örneğin, WordPress’teki tüm yazıları çekmek için kullanılan endpoint genellikle /wp/v2/posts şeklindedir. Bir HTTP metodu ise (GET, POST, PUT, DELETE), bu endpoint üzerinde gerçekleştirmek istediğiniz eylemi belirtir:

• GET: Sunucudan veri almak için kullanılır. (Örn: Tüm yazıları çekmek)
• POST: Sunucuya yeni veri göndermek (oluşturmak) için kullanılır. (Örn: Yeni bir yazı eklemek)
• PUT/PATCH: Sunucudaki mevcut veriyi güncellemek için kullanılır. (Örn: Bir yazıyı düzenlemek)
• DELETE: Sunucudaki veriyi silmek için kullanılır. (Örn: Bir yazıyı silmek)

Bu makalede özellikle GET metodu üzerinde duracağız, çünkü amacımız WordPress’ten tüm yazıları çekmektir. WordPress REST API varsayılan olarak açık gelir ve genellikle https://sitenizinadi.com/wp-json/ adresinde bulunur. Burası, tüm API rotalarının başlangıç noktasıdır.

https://sitenizinadi.com/wp-json/

Kimlik doğrulama genellikle yalnızca veri oluşturma, güncelleme veya silme işlemleri için gereklidir. Yazıları okuma (GET istekleri) için genellikle herhangi bir kimlik doğrulama işlemi yapmanıza gerek kalmaz, zira bu veriler genellikle herkesin erişimine açıktır. Ancak taslak halindeki yazılar veya özel izinlere sahip içerikler için kimlik doğrulaması gerekebilir. WordPress, cookie tabanlı kimlik doğrulama, JWT (JSON Web Token) veya OAuth gibi çeşitli kimlik doğrulama yöntemlerini destekler, ancak bunların kurulması ek eklentiler gerektirebilir. Konumuz olan "tüm yazıları çekme" işlemi için genellikle bu tür kompleks kimlik doğrulama adımlarına ihtiyaç duyulmayacaktır.

WordPress REST API ile Tüm Yazıları Nasıl Çekebiliriz? Uygulamalı Adımlar

WordPress REST API'nin temel prensiplerini anladıktan sonra, şimdi en heyecan verici kısma geçebiliriz: sitenizdeki tüm yazıları nasıl çekebileceğimizi adım adım öğrenmek. Bu bölümde, basit bir tarayıcı isteğinden başlayarak, JavaScript kullanarak programatik olarak nasıl veri çekileceğine kadar çeşitli yöntemleri ele alacağız.

Varsayılan Yazı Endpoint'ini Keşfetmek: İlk Adımınız Ne Olmalı?

WordPress sitenizdeki tüm yayınlanmış yazılara erişmek için varsayılan endpoint /wp/v2/posts'tur. Tam URL'niz ise sitenizin adresine bağlı olarak şöyle olacaktır: https://sitenizinadi.com/wp-json/wp/v2/posts. Bu URL'yi doğrudan web tarayıcınızın adres çubuğuna yapıştırarak ilk API isteğinizi yapabilirsiniz. Tarayıcınız, API'den gelen JSON formatındaki yanıtı gösterecektir. Bu yanıt, her bir yazı için başlık, içerik, yazar, tarih, kategoriler, etiketler ve diğer birçok meta veriyi içeren bir nesneler dizisidir.

Bu basit tarayıcı denemesi, API'nin çalışıp çalışmadığını ve temel verileri nasıl sunduğunu anlamanın en hızlı yoludur. Eğer tarayıcınızda okunaksız bir JSON metni görüyorsanız, JSON görüntüleyici eklentileri (örneğin Chrome için JSON Formatter) kullanmak, verileri daha düzenli ve okunabilir bir şekilde görmenize yardımcı olacaktır.

JavaScript ile Yazıları Çekme: Popüler Yöntemler ve Kod Örnekleri

Web uygulamalarında REST API'den veri çekmek için genellikle JavaScript kullanılır. İşte iki popüler yöntem:

Fetch API Kullanarak Yazı Çekme

Modern tarayıcıların yerleşik olarak sunduğu Fetch API, HTTP istekleri yapmak için güçlü ve esnek bir yoldur. Promise tabanlı yapısıyla asenkron işlemleri kolayca yönetmenizi sağlar.

async function tumYazilariCekFetch() {
    try {
        const apiUrl = 'https://sitenizinadi.com/wp-json/wp/v2/posts?per_page=100'; // Daha fazla yazı çekmek için per_page kullanın
        const response = await fetch(apiUrl);

        if (!response.ok) {
            throw new Error(HTTP hatası! Durum: ${response.status});
        }

        const posts = await response.json();
        console.log("Çekilen Yazılar (Fetch API):", posts);

        // Örnek: İlk yazının başlığını ve içeriğini göster
        if (posts.length > 0) {
            console.log("İlk Yazı Başlığı:", posts[0].title.rendered);
            console.log("İlk Yazı İçeriği (HTML):", posts[0].content.rendered);
        }

        return posts;
    } catch (error) {
        console.error("Yazıları çekerken bir hata oluştu (Fetch API):", error);
        return [];
    }
}

tumYazilariCekFetch();
    

Yukarıdaki kod bloğunda, tumYazilariCekFetch adında asenkron bir fonksiyon tanımladık. Bu fonksiyon, belirtilen API URL'sine bir GET isteği gönderir, yanıtı JSON formatına dönüştürür ve konsola yazıları basar. per_page=100 parametresini ekleyerek, tek bir istekte varsayılan 10 yazı yerine 100 yazı çekmeye çalıştık. Maksimum per_page değeri genellikle 100'dür.

Axios Kütüphanesi Kullanarak Yazı Çekme

Axios, tarayıcıda ve Node.js ortamında HTTP istekleri yapmak için popüler, Promise tabanlı bir HTTP istemcisidir. Daha zengin özelliklere ve daha kolay hata yönetimine sahiptir.

// Öncelikle Axios'u projenize dahil etmelisiniz:
// 

async function tumYazilariCekAxios() {
    try {
        const apiUrl = 'https://sitenizinadi.com/wp-json/wp/v2/posts?per_page=100';
        const response = await axios.get(apiUrl); // axios.get() doğrudan yanıtı döner

        console.log("Çekilen Yazılar (Axios):", response.data);

        // Örnek: İlk yazının başlığını ve bağlantısını göster
        if (response.data.length > 0) {
            console.log("İlk Yazı Başlığı:", response.data[0].title.rendered);
            console.log("İlk Yazı Bağlantısı:", response.data[0].link);
        }

        return response.data;
    } catch (error) {
        console.error("Yazıları çekerken bir hata oluştu (Axios):", error);
        return [];
    }
}

tumYazilariCekAxios();
    

Axios'ta, response.data doğrudan JSON yanıtını içerir, bu da Fetch API'deki response.json() adımını ortadan kaldırır. Her iki yöntem de oldukça etkilidir; tercihiniz projenizin ihtiyaçlarına ve kişisel zevkinize göre değişebilir.

JSON Yanıtını Anlamak ve Sayfalandırma Nasıl Çalışır?

API'den gelen JSON yanıtı genellikle bir dizi (array) içerir ve bu dizinin her elemanı bir yazı nesnesidir. Her yazı nesnesi içinde id, slug, title (başlık), content (içerik), excerpt (alıntı), date (yayınlanma tarihi), link (yazının kalıcı bağlantısı), author (yazar ID'si), categories (kategori ID'leri) ve tags (etiket ID'leri) gibi birçok anahtar-değer çifti bulunur. Başlık ve içerik gibi alanlar genellikle .rendered alt özelliğinde HTML olarak gelir.

WordPress REST API, performansı ve veri transferini optimize etmek için tek bir istekte döndürülen yazı sayısını sınırlar. Varsayılan olarak bu limit 10'dur. Daha fazla yazı çekmek için sayfalandırma (pagination) parametrelerini kullanmanız gerekir:

• per_page=: Her sayfada kaç yazı gösterileceğini belirler (maksimum 100).
• page=: Hangi sayfanın çekileceğini belirler.

Örneğin, 2. sayfadaki 20 yazıyı çekmek için URL şöyle olur: https://sitenizinadi.com/wp-json/wp/v2/posts?per_page=20&page=2. Tüm yazıları çekmek istiyorsanız ve sitenizde 100'den fazla yazı varsa, birden fazla istek yapmanız gerekecektir. Toplam yazı sayısını ve toplam sayfa sayısını HTTP yanıt başlıklarında bulabilirsiniz:

• X-WP-Total: API'nin bulduğu toplam yazı sayısı.
• X-WP-TotalPages: Toplam sayfa sayısı.

Bu başlıkları programatik olarak okuyarak tüm yazılarınızı döngülerle çekebilirsiniz. Örneğin, bir döngü içinde X-WP-TotalPages'e kadar her page numarasını artırarak istek gönderebilirsiniz. Bu sayede, sitenizdeki tüm yazılara eksiksiz bir şekilde erişebilirsiniz.

Veri Filtreleme ve Sorgulama: Daha Akıllı Yazı Çekme Yöntemleri Nelerdir?

WordPress REST API, sadece tüm yazıları çekmekle kalmaz, aynı zamanda bu verileri çeşitli parametrelerle filtrelemenize ve sorgulamanıza olanak tanır. Bu sayede, uygulamanızın ihtiyaç duyduğu spesifik içerikleri daha verimli bir şekilde alabilirsiniz. Gelişmiş filtreleme yetenekleri, uygulamanızın daha dinamik ve kullanıcı odaklı olmasını sağlar.

Hangi Parametrelerle Yazıları Filtreleyebiliriz?

REST API, yazıları filtrelemek için geniş bir parametre yelpazesi sunar. İşte en sık kullanılanlardan bazıları:

• categories=: Belirli kategori ID'lerine sahip yazıları çeker. Birden fazla kategori için virgülle ayırabilirsiniz.
• tags=: Belirli etiket ID'lerine sahip yazıları çeker.
• author=: Belirli yazar ID'lerine ait yazıları çeker.
• search=: Başlık, içerik veya alıntıda belirtilen anahtar kelimeyi içeren yazıları arar.
• status=: Yazı durumuna göre filtreler (örneğin publish, draft, pending). Genellikle sadece yayınlanmış yazılara erişim izni verilir.
• orderby=: Yazıların hangi alana göre sıralanacağını belirler (örneğin date, title, modified, relevance).
• order=: Sıralama düzenini belirler (asc - artan, desc - azalan). Varsayılan desc'tir.
• slug=: Belirli bir slug'a sahip yazıyı çeker.
• per_page=: Her sayfada kaç yazı gösterileceğini belirler (maksimum 100).
• page=: Hangi sayfanın çekileceğini belirler.

Birden fazla parametreyi aynı anda kullanabilirsiniz. Örneğin, "spor" kategorisindeki en yeni 5 yazıyı çekmek için URL şöyle olurdu: https://sitenizinadi.com/wp-json/wp/v2/posts?categories=5&per_page=5&orderby=date&order=desc (Burada 5'in "spor" kategorisinin ID'si olduğunu varsayıyoruz).

Tarih Aralığına Göre Filtreleme Nasıl Yapılır?

API, belirli tarih aralıklarındaki yazıları çekmek için de esnek seçenekler sunar:

• after=: Belirtilen tarihten sonraki yazıları çeker.
• before=: Belirtilen tarihten önceki yazıları çeker.

Tarih formatı genellikle ISO 8601 (örn. 2023-01-01T00:00:00) olmalıdır. Örneğin, 2023 yılının Ocak ayında yayınlanan tüm yazıları çekmek için:

const apiUrl = 'https://sitenizinadi.com/wp-json/wp/v2/posts?after=2023-01-01T00:00:00&before=2023-02-01T00:00:00';
    

Bu parametreler, uygulamanızın belirli bir zaman dilimindeki olayları, haberleri veya güncellemeleri göstermesi gerektiğinde son derece kullanışlıdır.

Vaka Analizi: E-ticaret Sitesinde Blog Yazılarının Akıllıca Filtrelenmesi

Bir e-ticaret sitesinin, ürünleriyle ilgili blog yazılarının bulunduğu bir bölümü olduğunu varsayalım. Müşterilerin, ilgilendikleri ürün kategorisine göre blog yazılarını kolayca bulmalarını istiyoruz. Ayrıca, en popüler yazıları ve son eklenenleri de göstermemiz gerekiyor.

Bu senaryoda, WordPress REST API'yi kullanarak şu filtrelemeleri uygulayabiliriz:

1. Kategoriye Göre Filtreleme: Müşteri "Elektronik" kategorisini seçtiğinde, yalnızca bu kategoriye ait yazıları çekmek için categories= parametresini kullanırız.
2. Arama Çubuğu Entegrasyonu: Arama çubuğuna girilen anahtar kelimelerle yazıları filtrelemek için search= parametresini kullanırız.
3. Sıralama Seçenekleri: Kullanıcıya "En Yeni" veya "En Popüler" (görülme sayısına göre, bu özel bir meta alanı olabilir) gibi sıralama seçenekleri sunmak için orderby ve order parametrelerini kullanırız.

// Örnek: 'Elektronik' kategorisindeki 'indirim' anahtar kelimesi geçen en yeni 10 yazı
const kategoriId = 7; // Elektronik kategorisinin ID'si
const aramaKelimesi = 'indirim';
const apiUrlFiltered = https://sitenizinadi.com/wp-json/wp/v2/posts?categories=${kategoriId}&search=${aramaKelimesi}&per_page=10&orderby=date&order=desc;

fetch(apiUrlFiltered)
    .then(response => response.json())
    .then(data => {
        console.log("Filtrelenmiş Yazılar:", data);
        // Burada filtrelenmiş yazıları frontend'de işleyebilirsiniz
    })
    .catch(error => console.error("Filtrelenmiş yazıları çekerken hata:", error));
    

Bu şekilde, e-ticaret sitenizin blog bölümü, kullanıcıların ihtiyaçlarına göre dinamik olarak içerik sunabilir. Ayrıca, API'den gelen meta verileri kullanarak yazının okunma süresini, popülerliğini veya yazar bilgilerini de gösterebiliriz, bu da kullanıcı deneyimini zenginleştirir. Bu esneklik, WordPress'in sadece bir blog platformu olmaktan öte, güçlü bir içerik dağıtım motoru haline gelmesini sağlar.

Performans ve Güvenlik İpuçları: REST API Kullanırken Nelere Dikkat Etmeliyiz?

WordPress REST API'yi kullanırken sadece veri çekmek yeterli değildir; aynı zamanda uygulamanızın performanslı ve güvenli çalıştığından emin olmanız gerekir. Özellikle büyük sitelerden veri çekerken veya kullanıcı etkileşimli uygulamalar geliştirirken bu faktörler kritik önem taşır. İşte dikkat etmeniz gereken bazı önemli ipuçları:

Önbellekleme (Caching): Neden Önemli ve Nasıl Uygulanır?

Her API isteği, sunucunuzda kaynak tüketir. Eğer uygulamanız aynı veriyi tekrar tekrar istiyorsa, bu durum sunucu yükünü artırır ve yanıt sürelerini uzatır. Önbellekleme (caching) burada devreye girer. Sıkça istenen verileri geçici olarak saklayarak, sonraki isteklerde sunucuya gitmeden doğrudan önbellekten servis etmenizi sağlar.

Önbellekleme Yöntemleri:

• Tarayıcı Tarafı Önbellekleme: HTTP yanıt başlıklarını (Cache-Control, Expires) kullanarak tarayıcıların verileri belirli bir süre önbelleğe almasını sağlayabilirsiniz.
• CDN (Content Delivery Network): Verilerinizi coğrafi olarak yakın sunucularda önbellekleyerek son kullanıcıya daha hızlı teslimat yapabilirsiniz.
• Uygulama Tarafı Önbellekleme: Kendi uygulamanızda (örneğin Node.js veya PHP backend'inde) Redis, Memcached gibi in-memory veri depolarını kullanarak API yanıtlarını önbelleğe alabilirsiniz.
• WordPress Eklentileri: WP Super Cache veya W3 Total Cache gibi WordPress önbellekleme eklentileri, REST API yanıtları da dahil olmak üzere genel site performansını artırabilir.

Güvenlik: Veri Bütünlüğü ve Yetkilendirme

Okuma (GET) işlemleri genellikle açık olsa da, API üzerinden veri oluşturma, güncelleme veya silme (POST, PUT, DELETE) işlemleri yapacaksanız güvenlik hayati önem taşır. Yetkisiz erişimi engellemek için kimlik doğrulama yöntemleri kullanmalısınız:

• Uygulama Şifreleri (Application Passwords): WordPress 5.6 ile birlikte gelen bu özellik, belirli kullanıcılar için API erişimine özel şifreler oluşturmanıza olanak tanır.
• JWT (JSON Web Tokens): Eklentiler aracılığıyla WordPress'e entegre edilebilir. Kullanıcı girişi yaptıktan sonra bir token alır ve sonraki API isteklerinde bu token'ı kullanarak yetkisini kanıtlar.
• OAuth: Daha büyük ve karmaşık entegrasyonlar için endüstri standardı bir yetkilendirme çerçevesidir.
• Nonce: WordPress'in kendi güvenlik anahtarı mekanizmasıdır. Özellikle WordPress arka ucundan AJAX istekleri yaparken yaygın olarak kullanılır.

API endpoint'lerinizi düzenli olarak gözden geçirin ve yalnızca ihtiyaç duyulan verilere erişim izni verin. Minimum yetki prensibini uygulayın.

Veri Miktarını Sınırlama: _fields Parametresinin Gücü

Bir API isteği yaptığınızda, genellikle dönen JSON yanıtı ihtiyacınızdan çok daha fazla bilgi içerir. Her yazının tüm meta verisini (revizyon geçmişi, ping durumları vb.) çekmek, gereksiz bant genişliği tüketimine ve yavaşlamaya neden olabilir. _fields parametresini kullanarak sadece ihtiyacınız olan alanları isteyebilirsiniz:

// Sadece id, title ve link alanlarını çekmek için
const apiUrl = 'https://sitenizinadi.com/wp-json/wp/v2/posts?_fields=id,title,link';
fetch(apiUrl)
    .then(response => response.json())
    .then(data => console.log("Minimal Veri:", data))
    .catch(error => console.error("Hata:", error));
    

Bu basit ama etkili optimizasyon, hem ağ trafiğini azaltır hem de istemci tarafında JSON ayrıştırma süresini kısaltarak uygulamanızın daha hızlı çalışmasını sağlar. Özellikle mobil cihazlar gibi bant genişliğinin kısıtlı olduğu ortamlarda bu yöntem çok önemlidir.

Rate Limiting ve DDoS Koruması

API'nize aşırı yüklenmeyi veya kötü niyetli saldırıları (DDoS) önlemek için "Rate Limiting" (hız sınırlama) uygulayabilirsiniz. Bu, belirli bir IP adresinden belirli bir zaman diliminde yapılabilecek API isteklerinin sayısını sınırlar. Bu özellik genellikle sunucu seviyesinde (örneğin Nginx veya Apache yapılandırmalarıyla) veya bir güvenlik duvarı (WAF) hizmeti aracılığıyla uygulanır. WordPress eklentileri de bu tür korumalar sağlayabilir.

Mobil Uyumlu HTML ve API Verisi Entegrasyonu

API'den çekilen verileri bir mobil uygulamada veya responsif bir web sitesinde göstermek, kullanıcı deneyimi açısından kritik öneme sahiptir. API'den gelen içerik genellikle HTML formatında (örneğin post.content.rendered) olduğu için, bu HTML'i mobil ekranlara uygun şekilde stilize etmeniz gerekir. CSS @media sorguları, farklı ekran boyutlarına göre elementlerin boyutunu, düzenini ve görünümünü ayarlamanın en yaygın yoludur.

/* Örnek bir CSS medya sorgusu */
@media (max-width: 768px) {
    .post-content img {
        max-width: 100%; /* Resimlerin ekrana sığmasını sağla */
        height: auto;
    }
    .post-title {
        font-size: 1.5em;
    }
}
    

API verilerini alıp dinamik olarak HTML oluştururken, bu CSS kurallarının doğru bir şekilde uygulanmasını sağlamak, mobil uyumlu bir deneyim için hayati önem taşır. JavaScript ile içerik eklerken

// Örnek React bileşeni (basitlestirilmiş)
import React, { useEffect, useState } from 'react';

function HaberlerListesi() {
    const [haberler, setHaberler] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const fetchHaberler = async () => {
            try {
                const response = await fetch('https://sitenizinadi.com/wp-json/wp/v2/posts?per_page=10&orderby=date&order=desc');
                const data = await response.json();
                setHaberler(data);
            } catch (error) {
                console.error("Haberler çekilemedi:", error);
            } finally {
                setLoading(false);
            }
        };
        fetchHaberler();
    }, []);

    if (loading) return 
Haberler yükleniyor...
;

    return (
        

            
Son Dakika Haberleri
            

                {haberler.map(haber => (
                    

                        
{haber.title.rendered}
                        

                        Devamını Oku
                    
                ))}
            
        
    );
}

export default HaberlerListesi;