2025’te React ve Eklenti Kullanarak Headless WordPress Web Sitesi Nasıl Yapılır?

Modern Web Geliştirme Teknikleriyle WordPress’in Gücünü Birleştirin

Headless WordPress Nedir?

Headless WordPress, geleneksel WordPress teması ve frontend katmanı olmadan, yalnızca içerik yönetim sistemi (CMS) olarak kullanılan bir mimaridir. Bu yaklaşımda, WordPress REST API veya GraphQL ile sağlanan veriler, React gibi modern bir JavaScript framework’ü kullanılarak işlenir. 2025’te bu yöntem, performans, ölçeklenebilirlik ve geliştirici esnekliği açısından öne çıkıyor.

Adım 1: WordPress Kurulumu ve Yapılandırma

1.1. Temel WordPress Kurulumu

• WordPress 6.5+ sürümünü kurun (2025’te güncel sürüm).
• Permalink ayarlarını Post name olarak yapılandırın (REST API erişimi için önemli).

1.2. Gerekli Eklentileri Yükleyin

Headless mimariyi desteklemek için kritik eklentiler:

• WPGraphQL: GraphQL API desteği sağlar.
• JWT Authentication for WP REST API: REST API üzerinden güvenli kimlik doğrulama.
• Advanced Custom Fields (ACF): Özel alanlar oluşturup React’te kullanmak için.
• WP CORS: Cross-Origin Resource Sharing izinlerini yönetin.

1.3. REST/GraphQL API Testi

• REST API endpoint’ini test edin: https://siteadiniz.com/wp-json/wp/v2/posts.
• GraphQL için WPGraphQL Playground’u kullanın: https://siteadiniz.com/graphql.

Adım 2: React Projesi Oluşturma

2.1. React Kurulumu

2025’te önerilen araçlar:

npx create-react-app headless-wp-react --template typescript  
# veya  
npm create vite@latest headless-wp-react -- --template react-ts  

2.2. Temel Bağımlılıklar

• Apollo Client (GraphQL için) veya Axios (REST için).
• React Router DOM (Routing için).
• Tailwind CSS veya Emotion (Stil için).

npm install @apollo/client graphql react-router-dom axios  

Adım 3: WordPress Verilerini React ile Entegre Etme

3.1. REST API ile Veri Çekme

// Örnek: Yazıları listelemek için  
import { useEffect, useState } from 'react';  
import axios from 'axios';  

function Posts() {  
  const [posts, setPosts] = useState([]);  

  useEffect(() => {  
    axios.get('https://siteadiniz.com/wp-json/wp/v2/posts')  
      .then((response) => setPosts(response.data));  
  }, []);  

  return (  
    <div>  
      {posts.map((post) => (  
        <article key={post.id}>  
          <h2>{post.title.rendered}</h2>  
          <div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />  
        </article>  
      ))}  
    </div>  
  );  
}  

3.2. WPGraphQL + Apollo Client Entegrasyonu

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';  

const client = new ApolloClient({  
  uri: 'https://siteadiniz.com/graphql',  
  cache: new InMemoryCache(),  
});  

// GraphQL sorgusu  
const GET_POSTS = gql`  
  query GetPosts {  
    posts {  
      nodes {  
        id  
        title  
        content  
      }  
    }  
  }  
`;  

// Sorguyu çalıştırma  
client.query({ query: GET_POSTS }).then((response) => console.log(response));  

Adım 4: Dinamik Routing ve Sayfalar

React Router ile WordPress sayfalarını eşleştirin:

// App.jsx  
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';  
import Home from './pages/Home';  
import Post from './pages/Post';  

function App() {  
  return (  
    <Router>  
      <Routes>  
        <Route path="/" element={<Home />} />  
        <Route path="/post/:slug" element={<Post />} />  
      </Routes>  
    </Router>  
  );  
}  

Adım 5: Gelişmiş Özellikler

5.1. Statik Site Üretimi (SSG)

Next.js 14+ veya Gatsby 6+ ile build zamanında HTML oluşturun:

// Next.js'de getStaticPaths ve getStaticProps  
export async function getStaticProps() {  
  const res = await fetch('https://siteadiniz.com/wp-json/wp/v2/posts');  
  const posts = await res.json();  
  return { props: { posts } };  
}  

5.2. Gerçek Zamanlı Veri (WebSockets veya GraphQL Subscriptions)

GraphQL Subscription ile anlık güncellemeler:

const POST_SUBSCRIPTION = gql`  
  subscription PostPublished {  
    postPublished {  
      id  
      title  
    }  
  }  
`;  

5.3. Önbellekleme ve Performans

• SWR veya React Query ile istemci tarafında önbellek.
• Redis veya WP Rocket ile sunucu tarafında önbellek.

Adım 6: Güvenlik ve SEO

• reCAPTCHA v3 ile form güvenliği.
• Next-SEO veya React Helmet ile meta etiket yönetimi.
• CORS politikalarını sıkılaştırın.

Adım 7: Deployment

• Vercel veya Netlify ile CI/CD pipeline.
• WordPress’i WP Engine veya Cloudways‘a deploy edin.

Sonuç: Neden Headless WordPress?

• Performans: React’in hızı + WordPress’in esnekliği.
• Ölçeklenebilirlik: Mikroservis mimarisiyle uyumlu.
• Geliştirici Deneyimi: Modern araçlarla entegrasyon kolaylığı.

SSS

Q: REST API vs GraphQL?
A: GraphQL, karmaşık sorgular için daha verimli.

Q: Eklenti uyumluluğu?
A: WPGraphQL + ACF Pro ile çoğu eklenti çalışır.

Q: Maliyet?
A: Sunucu maliyetleri düşük, geliştirme maliyetleri projeye göre değişir.

2025’te headless WordPress, React ve doğru eklentilerle kurumsal düzeyde web uygulamaları oluşturmak için ideal bir seçenek. Geliştirme sürecinizi hızlandırmak için GitHub şablonlarımıza göz atın!