Ana içeriğe geç
Destek Çevrimiçi
MirrorLooking Glass
RabisuRabisu
Müşteri Paneli
RehberlerBilgi Bankası

Gatsby.js ile Headless WordPress Kurulumu

Bu Rehberde Ne Öğreneceksiniz?​

Bu rehberde, WordPress’i yalnızca içerik yönetimi için kullanmayı öğreneceksiniz.
Gatsby.js ile statik, hızlı ve React tabanlı bir ön yüz oluşturacaksınız.

🧠 Aşama 1 – Teknik Özet​

Ana Teknik Konu: Headless WordPress ve Gatsby.js entegrasyonu
Çözdüğü Problem: Yavaş, hantal ve güvenlik riski taşıyan klasik WordPress yapısı
İzlenen Adımlar: WordPress ayarı → Gatsby kurulumu → GraphQL bağlantısı → Şablon özelleştirme

Ön Gereksinimler​

  • Çalışan bir WordPress kurulumu
  • En az 2 GB RAM olan bir sunucu
  • Node.js ve Gatsby CLI kurulu bir bilgisayar
  • Temel JavaScript ve React bilgisi

Örnek ortam: Ubuntu 20.04 – WordPress – Node.js – Gatsby

1️⃣ WordPress’i Headless Hale Getirme​

Gatsby, WordPress verilerini GraphQL ile çeker.
Bu yüzden iki eklenti gereklidir.

Gerekli Eklentiler​

  • WPGraphQL
  • WPGatsby

Bu eklentiler WordPress’i Gatsby’ye veri sağlayan bir API’ye dönüştürür.

WordPress yönetim paneline girin:

https://alan-adiniz.com/wp-admin

Eklentiler → Yeni Ekle bölümünden eklentileri kurun ve etkinleştirin.

GraphQL Endpoint Bilgisini Alma​

Ayarlar → GraphQL menüsüne girin.
Endpoint adresini not edin.

Örnek:

https://alan-adiniz.com/graphql

Bu adres Gatsby yapılandırmasında kullanılacaktır.

Kalıcı Bağlantı Ayarı​

Ayarlar → Kalıcı Bağlantılar menüsüne gidin.
Düz (Plain) dışında bir yapı seçin.

Bu ayar headless mimari için gereklidir.

GraphQL Bağlantısını Test Etme​

curl --location --request POST 'https://alan-adiniz.com/graphql' \
--header 'Content-Type: application/json' \
--data-raw '{
  "query": "query { posts { nodes { title } } }"
}'
  • Bu komut WordPress’ten yazı başlıklarını çeker.

2️⃣ Gatsby Projesi Oluşturma​

  1. WordPress uyumlu başlangıç şablonu kullanacağız.

gatsby new rabisu-blog https://github.com/gatsbyjs/gatsby-starter-wordpress-blog
  • Bu komut hazır Gatsby WordPress projesi oluşturur.
  1. Proje dizinine girin:

cd rabisu-blog

3️⃣ Gatsby’yi WordPress’e Bağlama​

  1. Ana yapılandırma dosyasını açın:

nano gatsby-config.js
  1. GraphQL adresinizi ekleyin:

{
  resolve: `gatsby-source-wordpress`,
  options: {
    url: `https://alan-adiniz.com/graphql`,
  },
}
  • Bu ayar Gatsby’nin WordPress’ten veri çekmesini sağlar.
  1. Geliştirme Sunucusunu Başlatma

npm run develop

veya


yarn develop
  • Bu komut yerel geliştirme ortamını başlatır.
  1. Tarayıcıdan açın:

http://localhost:8000

4️⃣ Şablonları Özelleştirme (Excerpt Örneği)​

  1. WordPress yazı özetlerini sayfada göstereceğiz.
  • Şablon Dosyası

{post.excerpt && (
  <div className="post-excerpt">
    {parse(post.excerpt)}
  </div>
)}
  • Bu kod yazı özetini ekrana basar.
  1. CSS ile Stil Verme

.post-excerpt {
  box-shadow: 0 1px 9px rgba(0,0,0,.5);
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}
  • Bu stil özet alanını vurgular.

5️⃣ Özel İçerik Türü: Video Yazıları​

  1. WordPress’te Video formatlı yazılar için özel şablon tanımlanabilir.

const isVideo = post.postFormats.nodes.some(f => f.name === 'Video');
  • Bu kontrol video içerikleri ayırır.

Video içerikler için ayrı React şablonu kullanılır. YouTube linkleri otomatik embed edilir.

❓ Sıkça Sorulan Sorular (SSS)​

1. Neden Headless WordPress kullanmalıyım? Daha hızlı, daha güvenli ve ölçeklenebilir yapı sağlar.

2. Her içerik sonrası build gerekir mi? Evet. Ancak webhook ile otomatikleştirilebilir.

3. SEO açısından dezavantaj var mı? Hayır. Statik yapı SEO için avantaj sağlar.

4. Live Preview çalışır mı? Evet. WPGatsby canlı önizleme sunar.

5. Hosting maliyeti artar mı? Genellikle düşer. Frontend CDN üzerinden sunulur.

🚀 Sonuç​

  • WordPress + Gatsby.js ile modern headless mimari kurdunuz.
  • İçerik yönetimi kolay, ön yüz ise ultra hızlı hale geldi.

Rabisu Bulut platformunda WordPress ve Gatsby projelerinizi yüksek performansla hemen hayata geçirebilirsiniz.