React Projenizi WordPress'e Bağlayın

import axios from 'axios';

const WP_API_URL = import.meta.env.VITE_WP_API_URL || 'https://wp.kobikom.com/wp-json/wp/v2';

export const wordpressAPI = axios.create({
  baseURL: WP_API_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});

// Blog yazılarını çek
export const getPosts = async (params?: { per_page?: number; page?: number }) => {
  const response = await wordpressAPI.get('/posts', { params });
  return response.data;
};

// Tek blog yazısı
export const getPost = async (slug: string) => {
  const response = await wordpressAPI.get(`/posts?slug=${slug}`);
  return response.data[0];
};

// Sayfaları çek
export const getPages = async () => {
  const response = await wordpressAPI.get('/pages');
  return response.data;
};

// Kategorileri çek
export const getCategories = async () => {
  const response = await wordpressAPI.get('/categories');
  return response.data;
};

import { useState, useEffect } from 'react';
import { getPosts } from '../../services/wordpress';

export default function BlogPage() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const data = await getPosts({ per_page: 12 });
        setPosts(data);
      } catch (error) {
        console.error('Blog yazıları yüklenemedi:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchPosts();
  }, []);

  if (loading) return <div>Yükleniyor...</div>;

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      {posts.map((post: any) => (
        <article key={post.id} className="bg-white rounded-xl shadow-lg">
          <img 
            src={post.featured_media_url} 
            alt={post.title.rendered}
            className="w-full h-48 object-cover rounded-t-xl"
          />
          <div className="p-6">
            <h2 className="text-xl font-bold mb-2">
              {post.title.rendered}
            </h2>
            <div 
              className="text-slate-600 text-sm"
              dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}
            />
            <a 
              href={`/blog/${post.slug}`}
              className="text-purple-600 font-semibold mt-4 inline-block"
            >
              Devamını Oku →
            </a>
          </div>
        </article>
      ))}
    </div>
  );
}

VITE_WP_API_URL=https://wp.kobikom.com/wp-json/wp/v2
VITE_WP_SITE_URL=https://wp.kobikom.com