{"id":43931,"date":"2026-08-08T08:00:51","date_gmt":"2026-08-08T05:00:51","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=43931"},"modified":"2026-08-08T08:01:17","modified_gmt":"2026-08-08T05:01:17","slug":"wordpress-icerigini-gatsby-js-uygulamasiyla-kullanma-kapsamli-bir-rehber","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/wordpress-icerigini-gatsby-js-uygulamasiyla-kullanma-kapsamli-bir-rehber\/","title":{"rendered":"WordPress \u0130\u00e7eri\u011fini Gatsby.js Uygulamas\u0131yla Kullanma: Kapsaml\u0131 Bir Rehber"},"content":{"rendered":"

WordPress \u0130\u00e7eri\u011fini Gatsby.js Uygulamas\u0131yla Kullanma: Kapsaml\u0131 Bir Rehber<\/h2>\n

Modern web geli\u015ftirme d\u00fcnyas\u0131nda performans, g\u00fcvenlik ve geli\u015ftirici deneyimi, projelerin ba\u015far\u0131s\u0131 i\u00e7in kritik \u00f6neme sahiptir. Geleneksel i\u00e7erik y\u00f6netim sistemleri (CMS) ile statik site olu\u015fturucular\u0131n (SSG) birle\u015fimi, bu ihtiya\u00e7lar\u0131 kar\u015f\u0131lamak i\u00e7in g\u00fc\u00e7l\u00fc bir \u00e7\u00f6z\u00fcm sunar. Bu makalede, d\u00fcnyan\u0131n en pop\u00fcler CMS’i olan WordPress’in esnek i\u00e7erik y\u00f6netim yeteneklerini, y\u00fcksek performansl\u0131 ve modern bir React tabanl\u0131 statik site olu\u015fturucu olan Gatsby.js ile nas\u0131l entegre edece\u011fimizi ayr\u0131nt\u0131l\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n

Neden WordPress ve Gatsby.js Birlikte Kullan\u0131lmal\u0131?<\/h3>\n

WordPress, milyonlarca web sitesinin arkas\u0131ndaki g\u00fc\u00e7t\u00fcr. Kullan\u0131c\u0131 dostu aray\u00fcz\u00fc, zengin eklenti ekosistemi ve tema se\u00e7enekleriyle i\u00e7erik olu\u015fturucular ve y\u00f6neticiler i\u00e7in vazge\u00e7ilmez bir ara\u00e7t\u0131r. Ancak, dinamik yap\u0131s\u0131 ve PHP tabanl\u0131 \u00e7al\u0131\u015fmas\u0131 nedeniyle performans ve g\u00fcvenlik konusunda baz\u0131 zorluklar ya\u015fayabilir. \u0130\u015fte burada Gatsby.js devreye girer.<\/p>\n

Gatsby.js, React, GraphQL ve Webpack gibi modern web teknolojilerini kullanarak h\u0131zl\u0131, optimize edilmi\u015f ve g\u00fcvenli statik web siteleri olu\u015fturmay\u0131 sa\u011flayan bir framework’t\u00fcr. WordPress’in i\u00e7erik y\u00f6netimini Gatsby.js’in performans ve g\u00fcvenlik avantajlar\u0131yla birle\u015ftirmek, “headless CMS” yakla\u015f\u0131m\u0131n\u0131n en iyi \u00f6rneklerinden birini sunar.<\/p>\n

Bu birle\u015fimin sundu\u011fu temel avantajlar \u015funlard\u0131r:<\/p>\n

* \u00dcst\u00fcn Performans:<\/strong> Gatsby.js, web sitenizi derleme (build) zaman\u0131nda statik HTML, CSS ve JavaScript dosyalar\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. Bu, sunucu taraf\u0131nda i\u015fleme ihtiyac\u0131n\u0131 ortadan kald\u0131r\u0131r ve sitenizin inan\u0131lmaz derecede h\u0131zl\u0131 y\u00fcklenmesini sa\u011flar. Google Lighthouse gibi performans testlerinde y\u00fcksek puanlar almak kolayla\u015f\u0131r.
\n* Art\u0131r\u0131lm\u0131\u015f G\u00fcvenlik:<\/strong> WordPress backend’i (y\u00f6netim paneli ve veritaban\u0131) do\u011frudan internete a\u00e7\u0131k olmaz. Gatsby.js uygulamas\u0131 sadece statik dosyalardan olu\u015ftu\u011fu i\u00e7in, olas\u0131 sald\u0131r\u0131 y\u00fczeyi \u00f6nemli \u00f6l\u00e7\u00fcde azal\u0131r. DDoS sald\u0131r\u0131lar\u0131na kar\u015f\u0131 daha diren\u00e7li hale gelir.
\n* M\u00fckemmel Geli\u015ftirici Deneyimi:<\/strong> Gatsby.js, modern JavaScript ekosisteminin t\u00fcm avantajlar\u0131n\u0131 sunar. React bile\u015fenleri, GraphQL veri katman\u0131 ve zengin eklenti sistemi sayesinde geli\u015ftiriciler daha verimli ve keyifli bir \u015fekilde \u00e7al\u0131\u015fabilirler.
\n* Daha \u0130yi SEO:<\/strong> H\u0131zl\u0131 y\u00fcklenen siteler, arama motorlar\u0131 taraf\u0131ndan daha \u00e7ok sevilir. Gatsby.js’in performans optimizasyonlar\u0131 ve \u00f6nceden olu\u015fturulmu\u015f HTML yap\u0131s\u0131, arama motoru optimizasyonu (SEO) i\u00e7in do\u011fal bir avantaj sa\u011flar.
\n* \u00d6l\u00e7eklenebilirlik ve Da\u011f\u0131t\u0131m Kolayl\u0131\u011f\u0131:<\/strong> Statik dosyalar, CDN (\u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011f\u0131) \u00fczerinden kolayca ve uygun maliyetle da\u011f\u0131t\u0131labilir. Bu, y\u00fcksek trafikli siteler i\u00e7in bile m\u00fckemmel \u00f6l\u00e7eklenebilirlik anlam\u0131na gelir.
\n* \u0130\u00e7erik Y\u00f6netimi Kolayl\u0131\u011f\u0131:<\/strong> \u0130\u00e7erik y\u00f6neticileri, al\u0131\u015ft\u0131klar\u0131 WordPress aray\u00fcz\u00fcnde i\u00e7eriklerini olu\u015fturmaya ve d\u00fczenlemeye devam ederken, frontend modern bir Gatsby.js uygulamas\u0131 taraf\u0131ndan sunulur.<\/p>\n

Gatsby.js ve WordPress Entegrasyonunun Temelleri<\/h3>\n

WordPress i\u00e7eri\u011fini Gatsby.js ile kullanman\u0131n temel mant\u0131\u011f\u0131, WordPress’i bir “headless CMS” olarak konumland\u0131rmakt\u0131r. Yani WordPress sadece i\u00e7erik depolama ve y\u00f6netim katman\u0131 olarak i\u015flev g\u00f6r\u00fcrken, bu i\u00e7eri\u011fi bir API arac\u0131l\u0131\u011f\u0131yla Gatsby.js uygulamas\u0131na sunar. Gatsby.js ise bu API’den ald\u0131\u011f\u0131 verileri kullanarak statik sayfalar\u0131 derler.<\/p>\n

Veri Kayna\u011f\u0131 Olarak WordPress REST API veya GraphQL<\/h4>\n

WordPress, varsay\u0131lan olarak g\u00fc\u00e7l\u00fc bir REST API’ye sahiptir. Bu API, g\u00f6nderiler, sayfalar, kategoriler, etiketler ve kullan\u0131c\u0131lar gibi t\u00fcm i\u00e7erik t\u00fcrlerine programatik eri\u015fim sa\u011flar. Gatsby.js, bu REST API’yi kullanarak WordPress’ten veri \u00e7ekebilir.<\/p>\n

Ancak, Gatsby.js’in GraphQL ile derin entegrasyonu g\u00f6z \u00f6n\u00fcne al\u0131nd\u0131\u011f\u0131nda, WordPress i\u00e7in WPGraphQL<\/code> eklentisini kullanmak \u00e7ok daha verimli ve esnek bir yakla\u015f\u0131m sunar. WPGraphQL<\/code>, WordPress verilerini GraphQL sorgular\u0131yla \u00e7ekmeyi m\u00fcmk\u00fcn k\u0131lar ve Gatsby’nin dahili GraphQL veri katman\u0131yla m\u00fckemmel bir uyum i\u00e7indedir. Bu sayede, ihtiyac\u0131n\u0131z olan veriyi tam olarak sorgulayabilir ve gereksiz veri y\u00fck\u00fcn\u00fc azaltabilirsiniz.<\/p>\n

Gatsby’nin Veri Katman\u0131 ve Kaynak Eklentileri<\/h4>\n

Gatsby.js, gatsby-source<\/code> eklentileri arac\u0131l\u0131\u011f\u0131yla \u00e7e\u015fitli veri kaynaklar\u0131ndan veri \u00e7ekebilir. WordPress i\u00e7in \u00f6zel olarak geli\u015ftirilmi\u015f gatsby-source-wordpress<\/code> (REST API tabanl\u0131) veya gatsby-source-wordpress-experimental<\/code> (WPGraphQL tabanl\u0131, \u00f6nerilir) gibi eklentiler bulunur. Bu eklentiler, WordPress verilerini Gatsby’nin dahili GraphQL veri katman\u0131na aktar\u0131r. Geli\u015ftiriciler daha sonra bu verilere GraphiQL aray\u00fcz\u00fc veya kod i\u00e7inde GraphQL sorgular\u0131 yazarak eri\u015febilirler.<\/p>\n

Statik Site Olu\u015fturma S\u00fcreci<\/h4>\n

Gatsby.js ile WordPress i\u00e7eri\u011fini kullanman\u0131n \u00f6z\u00fc, derleme (build) zaman\u0131nda ger\u00e7ekle\u015fir. gatsby build<\/code> komutu \u00e7al\u0131\u015ft\u0131r\u0131ld\u0131\u011f\u0131nda:<\/p>\n

1. Gatsby kaynak eklentisi, WordPress sitenizden t\u00fcm gerekli verileri (g\u00f6nderiler, sayfalar vb.) \u00e7eker.
\n2. Bu veriler, Gatsby’nin dahili GraphQL \u015femas\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcl\u00fcr.
\n3. gatsby-node.js<\/code> dosyas\u0131nda tan\u0131mlanan kurallara g\u00f6re, \u00e7ekilen veriler kullan\u0131larak programatik olarak sayfalar olu\u015fturulur. Her g\u00f6nderi veya sayfa i\u00e7in ayr\u0131 bir statik HTML dosyas\u0131 \u00fcretilir.
\n4. React bile\u015fenleri, bu verilerle doldurulur ve statik HTML, CSS ve JavaScript dosyalar\u0131 olu\u015fturulur.
\n5. Sonu\u00e7 olarak, da\u011f\u0131t\u0131ma haz\u0131r, tamamen statik bir web sitesi elde edilir.<\/p>\n

Ad\u0131m Ad\u0131m Entegrasyon Rehberi<\/h3>\n

\u015eimdi, WordPress i\u00e7eri\u011fini Gatsby.js uygulamas\u0131na entegre etmek i\u00e7in izlemeniz gereken ad\u0131mlar\u0131 detayl\u0131ca inceleyelim.<\/p>\n

Ad\u0131m 1: WordPress Kurulumu ve \u0130\u00e7erik Haz\u0131rl\u0131\u011f\u0131<\/h4>\n

\u00d6ncelikle, bir WordPress kurulumuna ihtiyac\u0131n\u0131z var. Mevcut bir WordPress siteniz varsa onu kullanabilir veya yerel bir ortamda (Local by Flywheel, XAMPP, MAMP) ya da bir hosting sa\u011flay\u0131c\u0131s\u0131nda yeni bir kurulum yapabilirsiniz.<\/p>\n

1. WordPress Kurulumu:<\/strong> WordPress’i kurun ve temel ayarlar\u0131n\u0131 yap\u0131n. Kal\u0131c\u0131 ba\u011flant\u0131lar\u0131 (Permalinks) Post Name<\/code> (G\u00f6nderi Ad\u0131) olarak ayarlaman\u0131z \u015fiddetle tavsiye edilir. Bu, Gatsby’de daha temiz URL yap\u0131lar\u0131 olu\u015fturman\u0131z\u0131 sa\u011flar. Ayarlar > Kal\u0131c\u0131 Ba\u011flant\u0131lar yolunu izleyerek bu ayar\u0131 yapabilirsiniz.
\n2. \u0130\u00e7erik Olu\u015fturma:<\/strong> Entegrasyonu test etmek i\u00e7in birka\u00e7 \u00f6rnek g\u00f6nderi ve sayfa olu\u015fturun. Ba\u015fl\u0131k, i\u00e7erik, \u00f6ne \u00e7\u0131kan g\u00f6rsel, kategori ve etiketler eklemeyi unutmay\u0131n.
\n3. WPGraphQL Eklentisi Kurulumu (\u00d6nerilen):<\/strong> WordPress paneline giri\u015f yap\u0131n. Eklentiler > Yeni Ekle yolunu izleyerek WPGraphQL<\/code> eklentisini aray\u0131n ve kurup etkinle\u015ftirin. Bu eklenti, WordPress sitenizin GraphQL API endpoint’ini (\/graphql<\/code>) sa\u011flayacakt\u0131r.
\n * Ek WPGraphQL Eklentileri:<\/strong> E\u011fer Yoast SEO veya Advanced Custom Fields (ACF) gibi eklentileri kullan\u0131yorsan\u0131z, WPGraphQL for ACF<\/code> ve WPGraphQL for Yoast SEO<\/code> gibi uyumlu eklentileri de kurup etkinle\u015ftirmeniz, bu eklentilerin verilerini Gatsby’ye \u00e7ekmenizi sa\u011flar.<\/p>\n

Ad\u0131m 2: Gatsby.js Projesi Olu\u015fturma<\/h4>\n

Gatsby CLI (Komut Sat\u0131r\u0131 Aray\u00fcz\u00fc) kurulu de\u011filse, \u00f6ncelikle kurman\u0131z gerekir:
\nnpm install -g gatsby-cli<\/code><\/p>\n

Ard\u0131ndan, yeni bir Gatsby projesi olu\u015fturun:
\ngatsby new my-wordpress-site https:\/\/github.com\/gatsbyjs\/gatsby-starter-hello-world<\/code><\/p>\n

Bu komut, my-wordpress-site<\/code> ad\u0131nda yeni bir dizin olu\u015fturacak ve i\u00e7ine temel bir Gatsby projesi kuracakt\u0131r. Proje dizinine gidin:
\ncd my-wordpress-site<\/code><\/p>\n

Ad\u0131m 3: Gatsby Kaynak Eklentisini Kurma ve Yap\u0131land\u0131rma<\/h4>\n

WordPress verilerini Gatsby’ye \u00e7ekmek i\u00e7in gatsby-source-wordpress-experimental<\/code> eklentisini kullanaca\u011f\u0131z (WPGraphQL kulland\u0131\u011f\u0131m\u0131z i\u00e7in bu \u00f6nerilir). Proje dizininizde \u015fu komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n

npm install gatsby-source-wordpress-experimental<\/code><\/p>\n

Ard\u0131ndan, gatsby-config.js<\/code> dosyan\u0131z\u0131 a\u00e7\u0131n ve eklentiyi yap\u0131land\u0131r\u0131n:<\/p>\n

module.exports = {\n  siteMetadata: {\n    title: Gatsby WordPress Starter<\/code>,\n    description: Bir Gatsby ve WordPress entegrasyonu \u00f6rne\u011fi.<\/code>,\n    author: @gatsbyjs<\/code>,\n  },\n  plugins: [\n    gatsby-plugin-react-helmet<\/code>,\n    {\n      resolve: gatsby-source-filesystem<\/code>,\n      options: {\n        name: images<\/code>,\n        path: ${__dirname}\/src\/images<\/code>,\n      },\n    },\n    gatsby-transformer-sharp<\/code>,\n    gatsby-plugin-sharp<\/code>,\n    {\n      resolve: gatsby-source-wordpress-experimental<\/code>,\n      options: {\n        url:\n          process.env.WPGRAPHQL_URL ||\n          http:\/\/localhost\/wordpress\/graphql<\/code>, \/\/ Kendi WordPress GraphQL endpoint'inizi buraya girin\n        verbose: true,\n        develop: {\n          nodeUpdateInterval: 3000,\n          hardCacheMediaFiles: true,\n        },\n        production: {\n          hardCacheMediaFiles: false,\n        },\n        debug: {\n          graphql: {\n            showQueryVarsOnRequest: true,\n          },\n        },\n        \/\/ ACF kullan\u0131yorsan\u0131z bu k\u0131sm\u0131 etkinle\u015ftirin\n        \/\/ useACF: true,\n        \/\/ acf: {\n        \/\/   postTypes: [post<\/code>, page<\/code>],\n        \/\/ },\n        \/\/ Yoast SEO kullan\u0131yorsan\u0131z bu k\u0131sm\u0131 etkinle\u015ftirin\n        \/\/ enableWpArticles: true,\n        \/\/ enableWpCategories: true,\n        \/\/ enableWpTags: true,\n        \/\/ enableWpPages: true,\n        \/\/ enableWpMedia: true,\n        \/\/ enableWpUsers: true,\n        \/\/ enableWpMenus: true,\n      },\n    },\n    \/\/ Di\u011fer eklentiler...\n  ],\n};<\/code><\/pre>\n
url<\/code> alan\u0131n\u0131 kendi WordPress sitenizin GraphQL endpoint’i ile de\u011fi\u015ftirmeyi unutmay\u0131n. Genellikle http:\/\/yourdomain.com\/graphql<\/code> veya http:\/\/localhost\/yourwordpressfolder\/graphql<\/code> \u015feklinde olacakt\u0131r.<\/p>\n
Ad\u0131m 4: Verileri Sorgulama (GraphQL)<\/h4>\n
Gatsby projenizi geli\u015ftirme modunda ba\u015flat\u0131n:
\ngatsby develop<\/code><\/p>\n
Bu komut, projenizi http:\/\/localhost:8000<\/code> adresinde \u00e7al\u0131\u015ft\u0131racak ve ayn\u0131 zamanda http:\/\/localhost:8000\/___graphql<\/code> adresinde bir GraphiQL aray\u00fcz\u00fc sa\u011flayacakt\u0131r. GraphiQL, Gatsby’nin veri katman\u0131n\u0131 ke\u015ffetmek ve GraphQL sorgular\u0131 yazmak i\u00e7in harika bir ara\u00e7t\u0131r.<\/p>\n
GraphiQL’i a\u00e7\u0131n ve WordPress’ten \u00e7ekilen verileri g\u00f6rmek i\u00e7in \u015fu sorgular\u0131 deneyin:<\/p>\n
T\u00fcm WordPress G\u00f6nderilerini \u00c7ekmek:<\/strong><\/p>\n
query MyQuery {\n  allWpPost {\n    nodes {\n      id\n      title\n      excerpt\n      uri\n      date(formatString: "MMMM DD, YYYY")\n    }\n  }\n}<\/code><\/pre>\n
Bu sorgu, t\u00fcm WordPress g\u00f6nderilerinin id<\/code>, title<\/code>, excerpt<\/code>, uri<\/code> (kal\u0131c\u0131 ba\u011flant\u0131) ve date<\/code> alanlar\u0131n\u0131 d\u00f6nd\u00fcrecektir. allWpPost<\/code> gibi tipler, gatsby-source-wordpress-experimental<\/code> eklentisi taraf\u0131ndan otomatik olarak olu\u015fturulur.<\/p>\n
Tek Bir WordPress G\u00f6nderisini \u00c7ekmek (\u00d6zel bir uri<\/code> ile):<\/strong><\/p>\n
query MySinglePostQuery($uri: String!) {\n  wpPost(uri: { eq: $uri }) {\n    title\n    content\n    date(formatString: "MMMM DD, YYYY")\n    author {\n      node {\n        name\n      }\n    }\n    categories {\n      nodes {\n        name\n      }\n    }\n    featuredImage {\n      node {\n        altText\n        localFile {\n          childImageSharp {\n            gatsbyImageData(\n              width: 800\n              placeholder: BLURRED\n              formats: [AUTO, WEBP, AVIF]\n            )\n          }\n        }\n      }\n    }\n  }\n}<\/code><\/pre>\n
Bu sorgu, tek bir g\u00f6nderinin detaylar\u0131n\u0131 \u00e7ekmek i\u00e7in kullan\u0131labilir. featuredImage<\/code> alan\u0131nda gatsbyImageData<\/code> kullan\u0131larak g\u00f6rsellerin otomatik olarak optimize edildi\u011fine dikkat edin.<\/p>\n
Ad\u0131m 5: Sayfalar\u0131 Programatik Olarak Olu\u015fturma<\/h4>\n
Gatsby’de, WordPress g\u00f6nderileri veya sayfalar\u0131 gibi dinamik i\u00e7erikler i\u00e7in ayr\u0131 ayr\u0131 sayfalar olu\u015fturmak i\u00e7in gatsby-node.js<\/code> dosyas\u0131n\u0131 kullan\u0131r\u0131z. Bu dosya, Gatsby’nin Node.js \u00e7al\u0131\u015fma zaman\u0131nda \u00e7al\u0131\u015ft\u0131\u011f\u0131 ve derleme s\u00fcrecini \u00f6zelle\u015ftirmek i\u00e7in g\u00fc\u00e7l\u00fc API’ler sundu\u011fu yerdir.<\/p>\n
Projenizin k\u00f6k dizininde gatsby-node.js<\/code> ad\u0131nda bir dosya olu\u015fturun (e\u011fer yoksa) ve i\u00e7ine a\u015fa\u011f\u0131daki kodu ekleyin:<\/p>\n
const path = require(path<\/code>);\n\nexports.createPages = async ({ graphql, actions }) => {\n  const { createPage } = actions;\n\n  \/\/ T\u00fcm WordPress g\u00f6nderilerini sorgula\n  const result = await graphql(\n    query {\n      allWpPost {\n        nodes {\n          uri\n          id\n        }\n      }\n    }\n  <\/code>);\n\n  if (result.errors) {\n    throw result.errors;\n  }\n\n  const posts = result.data.allWpPost.nodes;\n\n  \/\/ G\u00f6nderi \u015fablonunu tan\u0131mla\n  const blogPostTemplate = path.resolve(.\/src\/templates\/blog-post.js<\/code>);\n\n  \/\/ Her g\u00f6nderi i\u00e7in bir sayfa olu\u015ftur\n  posts.forEach((post) => {\n    createPage({\n      path: post.uri, \/\/ WordPress'ten gelen URI'yi kullan\n      component: blogPostTemplate,\n      context: {\n        id: post.id,\n        uri: post.uri, \/\/ \u015eablonda kullanmak i\u00e7in ID ve URI'yi context olarak ge\u00e7ir\n      },\n    });\n  });\n};<\/code><\/pre>\n
Bu kod par\u00e7as\u0131:
\n1.  graphql<\/code> yard\u0131mc\u0131 fonksiyonunu kullanarak t\u00fcm WordPress g\u00f6nderilerinin uri<\/code> ve id<\/code>‘lerini \u00e7eker.
\n2.  blogPostTemplate<\/code> ad\u0131nda bir \u015fablon dosyas\u0131n\u0131n yolunu tan\u0131mlar. Bu \u015fablon, her bir g\u00f6nderinin i\u00e7eri\u011fini g\u00f6sterecek React bile\u015fenini i\u00e7erecektir.
\n3.  posts.forEach<\/code> d\u00f6ng\u00fcs\u00fc ile her bir g\u00f6nderi i\u00e7in createPage<\/code> API’sini \u00e7a\u011f\u0131r\u0131r.
\n4.  path<\/code> olarak WordPress’ten gelen uri<\/code>‘yi kullan\u0131r\u0131z, bu da temiz URL’ler sa\u011flar (\u00f6rne\u011fin \/hello-world\/<\/code>).
\n5.  component<\/code> olarak tan\u0131mlad\u0131\u011f\u0131m\u0131z \u015fablon dosyas\u0131n\u0131 belirtiriz.
\n6.  context<\/code> objesi ile g\u00f6nderinin id<\/code> ve uri<\/code>‘sini \u015fablona ge\u00e7iririz. Bu sayede \u015fablon i\u00e7inde bu id<\/code> veya uri<\/code>‘yi kullanarak g\u00f6nderinin tam detaylar\u0131n\u0131 sorgulayabiliriz.<\/p>\n
Ad\u0131m 6: \u015eablonlar\u0131 Olu\u015fturma<\/h4>\n
\u015eimdi, gatsby-node.js<\/code> dosyas\u0131nda referans verdi\u011fimiz \u015fablon dosyas\u0131n\u0131 olu\u015fturmam\u0131z gerekiyor. src<\/code> dizininin alt\u0131nda templates<\/code> ad\u0131nda yeni bir klas\u00f6r olu\u015fturun ve i\u00e7ine blog-post.js<\/code> ad\u0131nda bir dosya ekleyin: src\/templates\/blog-post.js<\/code>.<\/p>\n
Bu dosya, her bir blog g\u00f6nderisi i\u00e7in kullan\u0131lacak React bile\u015fenini i\u00e7erecektir.<\/p>\n
Bu \u015fablonda:
\n*   data<\/code> prop’u, pageQuery<\/code> taraf\u0131ndan \u00e7ekilen verileri i\u00e7erir.
\n*   pageContext<\/code> prop’u, gatsby-node.js<\/code>‘den ge\u00e7irdi\u011fimiz id<\/code> ve uri<\/code>‘yi i\u00e7erir.
\n*   dangerouslySetInnerHTML<\/code> kullanarak WordPress’ten gelen HTML i\u00e7eri\u011fini g\u00fcvenli bir \u015fekilde render ederiz.
\n*   \u00d6ne \u00e7\u0131kan g\u00f6rsel i\u00e7in gatsbyImageData<\/code> kullan\u0131larak otomatik olarak optimize edilmi\u015f bir g\u00f6rsel \u00e7ekilir. <\/code> tag’inin src<\/code> \u00f6zelli\u011fine eri\u015fmek i\u00e7in dikkatli bir yol izlenir.<\/p>\n
Not:<\/strong> Layout<\/code> ve Seo<\/code> bile\u015fenlerini kendi projenize g\u00f6re olu\u015fturman\u0131z veya starter projenizdeki varsay\u0131lanlar\u0131 kullanman\u0131z gerekebilir.<\/p>\n
Ad\u0131m 7: G\u00f6r\u00fcnt\u00fc Optimizasyonu<\/h4>\n
WordPress’ten \u00e7ekilen g\u00f6rsellerin performans\u0131 art\u0131rmas\u0131 i\u00e7in Gatsby’nin g\u00fc\u00e7l\u00fc g\u00f6r\u00fcnt\u00fc optimizasyon \u00f6zelliklerini kullanmak kritik \u00f6neme sahiptir. gatsby-source-wordpress-experimental<\/code> eklentisi, gatsby-plugin-sharp<\/code> ve gatsby-transformer-sharp<\/code> ile entegre \u00e7al\u0131\u015farak WordPress g\u00f6rsellerini otomatik olarak optimize edebilir.<\/p>\n
gatsby-config.js<\/code> dosyan\u0131zda gatsby-plugin-sharp<\/code> ve gatsby-transformer-sharp<\/code> eklentilerinin kurulu oldu\u011fundan emin olun:<\/p>\n
\/\/ gatsby-config.js\nplugins: [\n  \/\/ ... di\u011fer eklentiler\n  gatsby-transformer-sharp<\/code>,\n  gatsby-plugin-sharp<\/code>,\n  \/\/ ... gatsby-source-wordpress-experimental yap\u0131land\u0131rmas\u0131\n],<\/code><\/pre>\n
Ard\u0131ndan, GraphQL sorgular\u0131n\u0131zda gatsbyImageData<\/code> alan\u0131n\u0131 kullanarak g\u00f6rselleri optimize edin. \u00d6rne\u011fin, blog-post.js<\/code> \u015fablonundaki featuredImage<\/code> sorgusuna bak\u0131n. Bu, g\u00f6rsellerin farkl\u0131 boyutlarda, modern formatlarda (WebP, AVIF) ve lazy-loading \u00f6zellikleriyle sunulmas\u0131n\u0131 sa\u011flar.<\/p>\n
Ad\u0131m 8: Navigasyon ve Linkleme<\/h4>\n
WordPress men\u00fclerini Gatsby uygulaman\u0131za \u00e7ekmek ve site i\u00e7inde navigasyon sa\u011flamak i\u00e7in gatsby-link<\/code> bile\u015fenini kullan\u0131n.<\/p>\n
WordPress Men\u00fclerini \u00c7ekmek:<\/strong>
\ngatsby-source-wordpress-experimental<\/code> eklentisi ile WPGraphQL \u00fczerinden men\u00fcleri \u00e7ekebilirsiniz. \u00d6ncelikle, WordPress paneline girip G\u00f6r\u00fcn\u00fcm > Men\u00fcler alt\u0131ndan bir men\u00fc olu\u015fturun ve \u00f6geler ekleyin.<\/p>\n
Ard\u0131ndan, Gatsby’de bir men\u00fc bile\u015feni olu\u015fturun ve GraphQL sorgusu ile men\u00fc verilerini \u00e7ekin:<\/p>\n
query MyMenuQuery {\n  wpMenu(slug: { eq: "main-menu" }) { # Men\u00fcn\u00fcz\u00fcn slug'\u0131n\u0131 buraya girin\n    name\n    menuItems {\n      nodes {\n        id\n        label\n        path\n      }\n    }\n  }\n}<\/code><\/pre>\n
Bu sorguyu bir layout bile\u015feni i\u00e7inde veya bir header bile\u015feninde kullanabilirsiniz. path<\/code> alan\u0131n\u0131 kullanarak gatsby-link<\/code> ile dahili sayfalara y\u00f6nlendirme yap\u0131n:<\/p>\n
import React from “react”;
\nimport { Link, graphql, useStaticQuery } from “gatsby”;<\/p>\n
const Header = () => {
\n  const data = useStaticQuery(graphql
\n    query HeaderMenuQuery {
\n      wpMenu(slug: { eq: \"main-menu\" }) {
\n        name
\n        menuItems {
\n          nodes {
\n            id
\n            label
\n            path
\n          }
\n        }
\n      }
\n    }
\n  <\/code>);<\/p>\n
  const menuItems = data.wpMenu.menuItems.nodes;<\/p>\n
  return (<\/p>\n
\n