WordPress'i başsız bir CMS olarak kullanın

Sep 14, 2025

Nasıl Yapılır

İlk önce Twin şehirlerinden Drupal'dan izlediğim bir konuşmadaki başsız CMS yaklaşımını duydum. Yazma içeriği arasında kaygıların ayrılması ve görüntülenmesi fikrini sevdim.

2019'daki En İyi Web Hosting Hizmetleri

Bir sunucunun ne kadar kolaylaştığını, üzerindeki tüm siteleri alarak, birkaç dakikaya veya saatlerce kalp durdurulan paniğe çıkabileceklerini (benimki 24 yaşındaydı) ne kadar kolayca inebileceğini çoktan tecrübe ettim. Ayrıca, monolitik bir CMS tabanlı sitenin nasıl bir güvenlik ödemene maruz kalacağını ve onarmak için çok çaba sarf edebileceğini de görmüştüm. (Beni iki günden fazla ücretsiz işten çıkardı). Bir dizi için ağ sağlayıcısı Sağlayıcı seçenekleri, rehberimize göz atın.

23 WordPress web sitelerinin büyük örnekleri

Görüntü, ses ve video dosyalarını hızlı teslimat için optimize edilmiş sunuculardaki, ses ve video dosyalarınızı saklayabilecek ve bu bölgelerdeki bu dosyaları bu bölgelere hızlı teslimat için yinelenen, bu bölgelere bu bölgelere yönlendirebilen bu dosyaları yineleyebileceklerini görebilirim. Ya tüm web siteniz bu yaklaşımdan faydalanabilirse?

İhtiyacın olacak…

● İnternet bağlantısına sahip bir bilgisayar (Obds)
● Bir kod düzenleyici (atom veya vs kodu)
● Bir komut satırı kabuğu / terminali
● Yüklü olan NODE.JS'nin yeni bir sürümü (indirebilir ve İşte )
● İçeriği almak için bir WordPress sitesi. Bir tane yoksa, WordPress.com platformunu veya bunu kullanabilirsiniz. Heroku inşa paketi .
● Kaynak dosyalar Gitub'dan .

Başlarken

WordPress, REST API'siyle kutudan çıkıyor ve verilerinizi sorgulamak için kullanacağımız şey budur. Bu yüzden başka bir şeye ihtiyacımız yok! Ekranımız, içerik sitemizden tamamen ayrıdır, bu yüzden ihtiyacımız olmaz Wordpress temaları veya birkaç (isteğe bağlı) eklentilerin dışındaki herhangi bir özelleştirme. Elbette, isterseniz bunları ekleyebilirsiniz.

İstisna, fazladan içerik alanları için özel Meta alanlarına ihtiyacınız varsa. Muhtemelen bunu yapmak için gelişmiş özel alanlar kullanıyorsunuz; Bu verileri WordPress API'sine ekleyebilirsiniz. Bu eklentiyi takma .

Statik bir site jeneratörü kullanın

Use WordPress as a headless CMS: Gatsby starter screen — Gatsby Varsayılan Başlangıç Ekranı

Şimdi içerik kaynağımız var, verileri alalım ve statik bir site jeneratörü kullanarak gösterelim. Bu alanda tercih edilen silahım Gatsby , JavaScript ile inşa edilen mükemmel bir statik site jeneratörü. (Bunları görün Web Sitesi Oluşturucu Bir site oluşturmanın basit yollarını seçer.)

JavaScript becerilerinizi geliştirmenin ve bir kod haline gelerek reaksiyona girmeyi öğrenmek için iyi bir yol arıyorsanız, Gatsby'yi yapmayı denemenizi şiddetle tavsiye ederim. Onunla oynayarak kendimi çok öğrendim.

İlk olarak, Gatsby siteleri oluşturmamızı sağlayan bir komut satırı aracı yükleyelim:

npm install -global gatsby-cli

Şimdi, sitenizi saklamak istediğiniz klasöre gidin ve bu komutu çalıştırın:

gatsby new blog

Bu, 'blog' adlı yeni bir klasör oluşturacak ve GATSBY'yi ve bağımlılıklarını bu klasöre yükleyecektir. Bu klasörü favori metin düzenleyicinizde açın. Orada çok fazla dosya gibi görünebilir. Endişelenme, sadece doğrudan düzenleyeceğiz. gatsby-config.js , gatsby-node.js dosyalar ve src Şablonlarımızın yaşadığı yer klasörü.

Mağaza etmek için çok fazla dosya varsa, yükseltmeye değer Bulut depolama .

İçeriğimizi almak

Almak istediğimiz ilk adım, içeriğimizi WordPress sitesinin API'sinden almaktır.

Bunu yapmak için kuracağız GATSBY-SOURCE-WordPress , WordPress için önceden alınmış bir eklenti. Bu, Gatsby'yi sevdiğim ana nedenlerden birini göstermektedir - verilerinizi çeşitli kaynaklardan elde edebilirsiniz. Çok sayıda statik site jeneratörü, Markdown dosyalarını kullanmakla sınırlıdır ancak Gatsby çok esnektir.

Gatsby's eklentisi ekosistemi çok olgun. Verilerinizi ve çok sayıda akıllı işlevselliğin de faydalı olduğu birçok akıllı işlevsellik yükü vardır.

Eklentiyi yüklemek için, bu komutu kullanarak dizini yeni GATESBY sitenize dönüştürün: cd blog .

Şimdi bu komutu çalıştırın: NPM Kurulumu - Kayış GatsBySource-Wordpres s.

Böyle bir kez, GATESBY-CONFIG.JS dosyasını açmanın zamanı geldi. Gatsby'nin varsayılan olarak bize verdiği yerlerde zaten bazı temel kurulum olduğunu göreceksiniz. Eklentimizi buraya yapılandırmak için bu yapacağız:

 module.exports = {
 SiteMetadata: {
  Başlık: 'Gatsby Varsayılan Starter',
 }
 Eklentiler: [
  'Gatsby-Plugin-react-kask',
  {
   Çözünür: "Gatsby-Source-WordPress",
   Seçenekler: {
    Baseurl: "my-wordpress-site.com",
    Protokol: "https",
    HostingWPCom: Yanlış,
    USEACF: Doğru,
    SearchAndReplaceContenturls: {
     Sourceurl: "https://my-wordpress-site.com",
     replasionurl: "https://my-static-site.com",
    }
   }
  }
 ]
}

İşe yaradı mı?

Terminalinizi açarak, yazarak kontrol edebilirsiniz. gatsby gelişir ve ne olacağını izleyin. Uygun olun! Ayarlarınızı düzeltseniz bile, yine de bazı uyarılar elde edersiniz - bu henüz yazmadığınız içerik arayan Gatsby olabilir.

Artık tarayıcıdaki Gatsby-Starter-Varsayılanı görüntüleyebilirsiniz.

http: // localhost: 8000 /

Graphiql, sitenizin verilerini ve şemasını keşfetmek için bir tarayıcı içi IDE'yi görüntüleyin.

http: // localhost: 8000 / ___ graphql

Geliştirme yapısının optimize edilmediğini unutmayın. Bir üretim yapımı oluşturmak için Gatsby Yapı kullanın.

GATESBY varsayılan başlangıç (sağda), ne elde ettiğiniz şey değilse, WordPress sitenizi bir alt etki alanı değil, kesinlikle HTTPS veya HTTP kullanarak ve ayarlarınızda aynı olduğunuzu kontrol edin.

Şimdi http: // localhost: 8000 / ve Gatsby sitemize bakabilirsiniz!

Verilerimizi sorgulayabilir miyiz?

Burada WordPress içeriği olmadığını fark etmiş olabilirsiniz. Bunun nedeni, Gatsby'ye henüz ne yapacağını söylemedik. Bunu yapmadan önce, hadi sadece içeriğimizi Gatsby'ye verdik. Bunu yapmak için bu URL'yi ziyaret edin:

http: // localhost: 8000 / ___ graphql

Bu yerleşik aracı Graphiql denir ve GATSBY'nin bir başka gizli gücüdür.

GraphQL dinlenmeye benzer: veri sorgulamanın bir yoludur. Ancak GraphQL ile, verilerinizle daha kolay etkileşime girebilirsiniz. Graphiql (GraphQL için bir Visual IDE) bize bu püf noktaları gösterebilir. Sol panelde aşağıdakileri yazmayı deneyin:

 {
 allwordpresspost {
  kenarları {
   düğüm {
    İD
    sümüklü böcek
    durum
    şablon
    biçim
   }
  }
 }
}

Bu biraz JSON gibi görünebilir ama değil. Bir günün büyük ölçüde dinlenmenin API'lerle iletişim kurmanın bir yolu olarak değiştireceğini düşündüğüm yeni bir sorgu dili.

CTRL + GRAPHIQL'e girdiğinizde ne aldınız? Umarım, Wordpress yayınlarınızı ve sayfanızı ekranın sağ tarafında görmüştünüz.

Aslında bu sorguyu bir sonraki adımımızda kullanacağız, bu yüzden kullanışlı tutun! Buradasınızken, Grafiğiql ile ne alabileceğinizi görmek isteyebilirsiniz. Bunu yapmak istiyorsanız, imleci etrafta hareket ettirmeyi ve CTRL + Boşluğu ve / veya Ctrl + Enter'ı yazmayı deneyin. Diğer içerik gruplarını ortaya çıkaracak.

Bu yüzden şimdi Gatsby'de içeriğimiz var. Sonra, göstermemiz gerekiyor.

Mesajlarımızı göster

Use WordPress as a headless CMS: Gatsby development 404 screen — Gatsby Development 404 Sayfa Tüm WordPress Mesajlarımızı Gösterme

Bunun için bir sonraki adım için kullanmaya gidiyoruz gatsby-node.js dosya.

gatsby-node.js Gatsby's NODE API "ile etkileşime geçmek için kullanabileceğiniz bir dosya. Burada sitenizin nasıl oluşturulduğunu ve sayfalar, yazılar ve daha fazlasını oluştururken kontrol edebilirsiniz.

Gatsby'ye verilerimizle ne yapacağını söylemek için burada bazı talimatlar yazacağız:

 Const Path = gerektirir (`yol`);

ihracatçı.createPages = ({graphql, boundactioncreators})
= & gt; {
 const {createPage} = BoundActionCreators
 Yeni vaadi iade edin ((çözünür, reddet) = & gt; {
  graphql (
   `
   {
    allwordpresspost {
     kenarları {
      düğüm {
       İD
       sümüklü böcek
       durum
       şablon
       biçim
      }
     }
    }
   }
  `
 ) .THen (sonuç = ve gt; {
   if (sonuç.errors) {
    console.log (Sonuç.Errors)
    reddetmek (sonuç ..Errors)
   }

   Const PostTemplate = Path.Resolve (`./src/templates/
post.js`)

   sonuç.data.allwordpresspost.edges.foreach (kenar = ve gt; {
    sayfa oluştur({
     Yol: `/ $ {edge.node.slug} /`,
     Bileşen: PostTemplate,
     bağlam: {
      ID: Edge.Node.ID,
     }
    })
   })
   çözmek()
  })
 })
}

Bu kod, GraphQL sorgumuzdan ve her sayfa için sayfalar oluşturur (tanımladığımız bir şablon kullanacaktır ( /src/templates/post.js ). Böylece, bu dosyayı oluşturmamız gerekiyor!

Mesaj şablonu oluştur

/ SRC / Klasörün içinde, şablon adı verilen bir klasör oluşturun ve bunun içindeki bir dosya post.js . Buna ekle Bu kod:

 'tepki' dan ithalat reaksiyonu
'tepki-kask' dan kask ithalatı

Class PostTemplate, React.Component'i genişletir {
 render () {
  Const Post = this.props.data.wordpresspost;
  Const Slug = this.props.data.wordpresspost.slug;

  dönüş (
   & lt; div & gt;
   & lt; kask başlığı = {`$ {titlestring} | $ {Sitetitle} `} / & gt;
   & lt; h1 dangerouslysetinnerhtml = {{__HTML: post.title}} / ve gt;
   & lt; div dangerouslysetinnerhtml = {{__HTML: post.Content}} / ve gt;
   & lt; / div & gt;
  )
 }
}

İhracat Varsayılan Pagetemplate

İhracat Const Query = Graphql`
 sorgu currentpost ($ ID: string!) {
  Wordpresspost (ID: {EQ: $ ID}) {
   Başlık
   içerik
   sümüklü böcek
  }
  site {
   sitemetadata {
    Başlık
   }
  }
}

Bu, belirli yazı ile ilgili verileri almak için farklı bir GrafipQL sorgusu kullanır. gatsbynode.js Dosya, ardından bunu tarayıcıya dönüştürmek için reaksiyona girer.

Tüm yayınlarınızın bir listesini hızlı bir şekilde görmek istiyorsanız, yazabilirsiniz. http: // localhost: 8000 / a Tarayıcınızın adres çubuğuna. Bu, sizi tüm yazılarınızı listelerden oluşan bir geliştirme 404 sayfasına götürecektir. Ziyaret etmek için birine tıklayın!

Sonraki adımlar

WordPress'in başsız bir CMS olarak nasıl kullanılacağının yüzeyini çizdik ve umarım sizi gelecekte kullanabildiğiniz ve deneyebileceğiniz bazı ilginç kavram ve araçlara tanıttım.

Bu hikaye ve meslektaşlarım için çok daha fazla var ve bu konuda bu konuda blogladım. İndigo ağacı . Ayrıca kişisel blogumda daha fazla yazdım. Lezzetli revizyon .

Lütfen başsız CMS dünyasında daha heyecan verici gelişmeler duymak için lütfen bu kanallar ve Twitter'da benimle iletişime geçin!

Bu makale başlangıçta 308 sayılı olarak yayınlandı. ağ , dünyanın web tasarımcıları ve geliştiricileri için en çok satan dergisi. Sayı 308 burada satın al veya abone olun .

İlgili Makaleler:

40 parlak WordPress öğreticileri
Wordpress'te CRO Başarı için 6 En İyi İpuçları
Tasarımcılar için 10 Harika WordPress Eklentileri

WordPress'i başsız bir CMS olarak kullanın

Başlarken

Statik bir site jeneratörü kullanın

İçeriğimizi almak

İşe yaradı mı?

Verilerimizi sorgulayabilir miyiz?

Mesajlarımızı göster

Mesaj şablonu oluştur

Sonraki adımlar

Nasıl Yapılır - En Popüler Makaleler

Bir kuş nasıl çizilir

CSS şekilleri ile nasıl tasarlanır: bir giriş

NPM ile üretkenliği artırmanın 21 yolu

Afinite Tasarımcısı: Kısıtlamalar Nasıl Kullanılır

Karakter sanatınızı nasıl geliştirilir

Postcss-FlexBox ile karmaşık düzenler oluşturun

WordPress Web Sitenizi Çok Dilde Nasıl Yapılır

SVG Gradyanları ile D3.JS Grafiklerini Boost

Kategoriler