Web Uygulamanız için Başsız CMS Oluşturmak için WordPress'i React ile Kullanın

WordPress Rest API, WordPress'in sunduğu birçok harika özellikten biridir. Geliştiricilerin büyüleyici eklentiler ve temalar oluşturmasına olanak tanır ve ayrıca WordPress CMS ile üçüncü taraf uygulamaları güçlendirmelerine olanak tanır.

Modern web uygulamalarında, web sitesinin içeriğini yönetmek için de içerik yönetim sistemi geliştirilmiştir. Bu, geliştiriciler için ekstra iş yükü ekleyebilir. Rest API'nin sunduğu pek çok olanakla, JavaScript tabanlı web uygulamaları için WordPress'i React ile başsız bir CMS olarak kullanmak da düşünülebilir.

Peki Başsız WordPress Nedir?

'Başsız' olması kesinlikle CMS'nin başlık bölümünün eksik olduğu anlamına gelmez. Bu, ön uç oluşturmak için kullanılan teknolojiden bağımsız olarak CMS'yi genel bir içerik yönetim sistemi olarak kullanabileceğiniz anlamına gelir.

Rest API, her ikisi de aynı JSON dilini konuştuğu sürece geliştiricilerin teknolojiler arası arayüzlerle etkileşime girmesine olanak tanır. WordPress Rest API, verileri çok sayıda web teknolojisi tarafından anlaşılabilir olan JSON formatında yayar. JSON, anahtar/değer çiftinde veri içeren JavaScript nesnelerinin metin tabanlı bir temsilidir.

 "Arkadaş": [
      {
        "kimlik": 0,
        "isim": "Harriet Stanley"
      },
      {
        "kimlik": 1,
        "isim": "Benton Odom"
      },
      {
        "kimlik": 2,
        "isim": "Jackie Edwards"
      }
    ],

Bugün, temel web uygulamam için başsız bir CMS olarak React ve WordPress ile kullanarak WordPress Rest API'nin gücünü göstereceğim.

Headless WordPress CMS Kullanmanın Faydası

Açık kaynaklı bir platform olmak; WordPress, her türlü web sitesi oluşturmak için büyük esneklik sunar. WordPress'i başsız bir CMS olarak kullanmak, herhangi bir web teknolojisini kullanarak web uygulamanızın ön ucunu oluşturmanıza ve içeriğini en popüler CMS'lerden birini kullanarak yönetmenize olanak tanır.

React veya Angular ile oluşturulmuş mevcut bir web uygulamasında bir blog özelliği eklemeniz gereken bir durumla karşılaşabilirsiniz. Tam teşekküllü içerik yönetim sistemini yerel çerçevede kodlamak yerine; İçeriği Rest API kullanarak yönetmek için başsız WordPress CMS kullanın.

WordPress Sitesi Kurulumu

Ön uç React uygulamamız için bir veri kaynağı görevi göreceğinden, WordPress sitesini kurmaya başlayalım.

WP-Rest API eklentisinin zip dosyasını git'ten indirin ve zip klasörünü WordPress eklentileri klasörünüzün içine yükleyin. Dosya yüklendikten sonra eklentiyi etkinleştirin. Bu, WordPress web sitenizde WordPress Rest API'sini etkinleştirecektir.

Şimdi Ayarlar → Kalıcı Bağlantılar'a gidin ve Gönderi adı veya Özel Yapı'yı seçin.

API çağrılarıyla çalıştığımız için Postman için chrome uzantısını indirin. Postacının içine URL'yi aşağıdaki biçimde girin:

https://example.com/wp-json/wp/v2/posts

Yukarıdaki URL, WordPress sitenizdeki gönderi verilerini getirecektir.

Özel gönderi türleri oluşturmak için Özel Gönderi Türü UI eklentisini indirin. Bu özel gönderi, bir sonraki adımda WordPress'i React ile kullanacağımız zaman görüntülenecektir.

Eklentiyi kurun ve etkinleştirin ve yeni bir gönderi türü eklemek için devam edin. Bu eğitim için Kitaplar için özel bir yazı türü oluşturacağım.

Posta Türü Bilgisi'nin içine özel gönderinizin adını yazın.

Emin Göster REST API onay kutusu doğru ve REST API baz sümüklüböcek de ayarlandığı olduğundan emin olun. WordPress'i başsız CMS olarak kullanmak istiyorsanız bu zorunludur.

REST API'sinden almak istediğiniz bilgiler için tüm kutuları işaretleyin.

Değişiklikleri kaydettikten sonra, kenar çubuğunda yeni bir seçeneğin doldurulduğunu fark edeceksiniz. Özel gönderi türünüze yeni Kitabı eklemek için üzerine tıklayın.

İlk kitabımı, yazım için örnek verileri ve bir alıntıyı koyarak oluşturdum.

Verilerin API aracılığıyla mevcut olduğunu doğrulamak için devam edin ve Postacı içindeki URL'ye basın.

Şimdi, URL https://exampe.com/wp-json/wp/v2/ kitaplar gibi görünmelidir

Ayrıca RestAPI eklentilerine ACF ve ACF kullanarak Publisher gibi başka alanlar da ekleyebiliriz.

Her iki eklentiyi de kurun ve etkinleştirin.

Varsayılan olarak ACF, WordPress Rest API ile konuşmaz, bu nedenle ACF REST API eklentisini de indirmemiz gerekir.

Özel alanlar eklentisini kullanarak kitaplarım için Publisher alanını ekleyeceğim.

Listeden istediğiniz gönderi türünü seçtiğinizden emin olun. Bundan sonra ' Yayınla ' düğmesine basın .

Özel gönderi türümde kitabımın yayıncısını tanımlayabileceğim yeni bir alan dolduruldu. Verilerimizi ReactJS web uygulamamıza göndermek için WordPress'imizi kurmak için tek yapmamız gereken buydu.

React'e Başlarken

ReactJS Nedir?

React, Facebook ve geliştirici topluluğu tarafından sağlanan web için bir JavaScript kitaplığıdır. JavaScript, web geliştirme için güçlü bir araçtır ve web sitelerinin işlevselliğini geliştirmek için JavaScript'te yazılmış birkaç kitaplık vardır. ReactJS temel olarak hızlı, sağlam ve dinamik olan tek sayfalık uygulamalar geliştirmek için kullanılır.

React Uygulamasını Ayarlama

React kullanarak uygulama geliştirmek için bilgisayarınızda aşağıdaki bağımlılıkların kurulu olması gerekir.

• NodeJS ve NPM.
• Sublime veya Visual Studio Code gibi Metin Düzenleyici.
• Sürüm kontrolü için Git (Opsiyonel)

Ortamı kurduktan sonra ReactJS ile projeyi oluşturmak için komut satırını açın ve aşağıdaki kodu çalıştırın.

 npx oluştur-tepki-uygulama ön ucu

Uygulama oluşturulduktan sonra, uygulama klasörüne cd (dizini değiştir) ve API çağrıları için Axios paketini yüklemek için aşağıdaki komutu yazın.

 npm ve aksiyolar

Şimdi, favori metin düzenleyicinizin içindeki klasörü açın. Visual Studio Code kullanıyorum.

npm start komutunu çalıştırarak uygulamayı başlatın.

Her şey düzgün çalışıyorsa, WordPress'i başsız CMS olarak kullanarak React ile web uygulamamızı oluşturmaya hazırız.

Src klasörünün içindeki yeni bir klasör 'bileşenleri' oluşturun ve yeni bir dosya 'Books.js' oluşturmak klasör 'bileşenleri' içeride.

ReactJS'de Gönderi Verilerini Oluşturma

Book.js dosyasının içinde, verileri WordPress Rest API'sinden alacağız. Aşağıda, benim durumumda ' /books ' olan Rest API bitiş noktasını isteyen ve verileri JSON biçiminde görüntüleyen kod yer almaktadır.

 React'i, { Component } 'tepkiden' içe aktar
eksenleri 'axios'tan içe aktarın;

dışa aktarma sınıfı Kitaplar, Bileşeni genişletir {
   durum = {
       kitabın: [],
       isLoaded: yanlış
   }

 componentDidMount () {
   axios.get('https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/books/')
       .then(res => this.setState({
           kitaplar: res.data,
           isLoaded: doğru
       }))
       .catch(err => console.log(err))
   }


   render() {
      konsol.log(bu.durum);
       dönüş (
           <div>
              
           </div>
       )
   }
}

varsayılan Kitapları dışa aktar

Yukarıdaki kod, daha sonra render bloğu içinde kullanılan konsoldaki veri dizisini gösterecektir.

Şimdi, App.js dosyasının içinde Kitaplar bileşenini aşağıda gösterildiği gibi çağırın.

 React'i 'react'ten içe aktar;
'./App.css' içe aktar;
Kitapları './components/Books'tan içe aktarın;

işlev Uygulama() {
 dönüş (
   <div className="Uygulama">
    <Kitaplar/>
   </div>
 );
}

varsayılan Uygulamayı dışa aktar;

App.js , web uygulamamızın giriş noktasıdır, bu nedenle bu dosyanın içindeki “Kitaplar” bileşenlerine başvurmak önemlidir.

ReactJS'de Gönderi Verilerini Görüntüleme

Veriler, render yönteminin içindeki kod eklenerek görüntülenebilir.

 render() {
       const {kitaplar, isLoaded} = this.state;
       dönüş (
           <div>
               {kitaplar.harita(kitap =>
               <h4>{book.title.rendered}</h4>
               )}
           </div>
       );
   }

Burada verileri görüntülemek yerine, yeni bir bileşen oluşturacağız ve onu ana bileşenden ayrı tutmak istediğim için ' BookItems.js ' olarak adlandıracağız.

Bookk.js içindeki render yöntemini şuna benzer bir şekilde değiştirin:

 render() {
       const {kitaplar, isLoaded} = this.state;
       dönüş (
           <div>
               {kitaplar.harita(kitap =>
               <BookItems key={book.id} book={book}/>
               )}
           </div>
       );
   }

Şimdi bunun yerine BookItems bileşenini oluşturmamız gerekiyor.

BookItems.js içine aşağıdaki kodu ekleyin:

 React'i, {Component}'i 'tepkiden' içe aktar
eksenleri 'axios'tan içe aktarın;
PropType'ları 'prop-type'lardan içe aktarın;

dışa aktarma sınıfı BookItems, Bileşeni genişletir {
 
   render() {
       const { başlık } = this.props.book;
       dönüş (
           <div>
              <h2>{title.rendered}</h2>
           </div>
       )
   }
}

varsayılan Kitap Öğelerini dışa aktar

Yukarıdaki kodda, başlığı ve diğer bilgileri almak için kitap desteğine atıfta bulunuyorum.

Not: “Kitaplar” bileşeni içindeki BookItems bileşenine referans verdiğinizden emin olun.

BookItems.js'nin son versiyonum şuna benziyor:

 React'i, {Component}'i 'tepkiden' içe aktar
PropType'ları 'prop-type'lardan içe aktarın;
eksenleri 'axios'tan içe aktarın;
dışa aktarma sınıfı BookItems, Bileşeni genişletir {

   durum = {
       imgUrl: '',
       yazar: '',
       isLoaded: yanlış
   }

   statik propTypes = {
       kitap: PropTypes.object.isRequired
   }

   componentDidMount () {
       const {featured_media, yazar} = this.props.book;
       const getImageUrl = axios.get(`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/media/${featured_media}`);
       const getAuthor = axios.get(`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/users/${author}`);
      
       Promise.all([getImageUrl, getAuthor]).then(res => {

           konsol.log(res);
           this.setState({
               imgUrl: res[0].data.media_details.sizes.full.source_url,
               yazar: res[1].data.name,
               isLoaded: doğru

           });
       });
    }
 
   render() {
       const { başlık, alıntı } = this.props.book;
       const {yazar, imgUrl, isLoaded} = this.state;
       dönüş (
           <div>
              <h2>{title.rendered}</h2>
              <img src={imgUrl} alt={title.rendered}/>
              <strong>{yazar}</strong><br/>
              <div desirelySetInnerHTML={{__html: excerpt.rendered}}></div>
           </div>
       )
   }
}

varsayılan Kitap Öğelerini dışa aktar

Ve tarayıcıdaki çıktı şöyle görünür:

En güzeli değil mi? Bunun nedeni, stil oluşturmanın bu eğitimin kapsamı dışında olmasıdır.

Kapatıyorum!

Bugün size web uygulamanız için başsız bir CMS olarak React ile WordPress'i nasıl kullanacağınızı gösterdim. React kodu, indirmeniz için Git'te de mevcuttur. Ancak, React ile sınırlı değildir. Ayrıca VueJS, Angular veya herhangi bir JavaScript çerçevesi ile denemeler yapabilirsiniz. WordPress Rest API ile yapabileceğiniz tonlarca şey var. Sınır gökyüzü, bu yüzden devam edin ve bir sonraki web projeniz için WordPress'i kullanın.