WordPress REST API: Yeni Nesil CMS Özelliği

Web'in dörtte birinden fazlası WordPress'te çalışıyor. On yıldan fazla bir süredir var olduğu düşünüldüğünde, oldukça dikkat çekici bir başarı, bu da onu teknoloji yıllarında oldukça eski yapıyor.

WordPress'in gizli sosu nedir? Kolay – içeriğinizi yönetmenin en basit ama en genişletilebilir yolu. Ancak bir süreliğine WordPress geride kalmış gibi görünüyordu.

Web, sürükleyici, etkileşimli deneyimler oluşturmak için JavaScript'e daha fazla bağımlı hale geldikçe, WordPress'in kullanıcılara ve geliştiricilere içerikleriyle etkileşim kurmaları için yeni yollar sunması gerektiği giderek daha açık hale geldi.

WordPress, PHP'nin üzerine inşa edilmiş ve inşa edilmeye devam edecek olsa da, WP REST API, PHP WordPress çekirdeğinin mirası ile JavaScript web uygulamalarının potansiyeli ve gücü ile yerel mobil cihazlar arasında bir köprü oluşturma girişimidir. ve masaüstü uygulamaları.

WordPress REST API, herhangi bir WordPress web sitesinin içeriğini kolayca tüketilebilen bir API'ye getirerek WordPress'in web'de içerik yayınlamak için bir depolama ve alma sistemi olarak hizmet etmesine olanak tanır.

REST API'sini WordPress'e getirme

WP REST API'sinin birdenbire ortaya çıktığını düşünüyorsanız, yanılıyorsunuz.

WordPress'e tamamen yeni bir özellik eklemek basit bir iş değildir. Açık kaynaklı yazılım olmanın doğası gereği, WordPress geliştirme, ilerleme kaydetmek için büyük ölçüde topluluğa bağlıdır.

API için geliştirme, geliştiricilerin kontrollü bir ortamda projeyi denemelerine ve projeye katkıda bulunmalarına olanak tanıyan ayrı bir özellik eklentisi olarak birkaç yıl önce başladı.

Birçok yineleme ve geliştirme ve tamamen ayrı iki sürüm boyunca, REST API'nin arkasındaki katkıda bulunanlar, on milyonlarca web sitesindeki verilere açık API erişimi sağlamanın faydalarını ve muazzam sonuçlarını test etmek ve değerlendirmek zorunda kaldı.

Kod adı “Clifford” olan WordPress 4.4, projenin ilk altyapısını WordPress çekirdeğine getirirken, uç noktalar WordPress 4.7, “Vaughan”a kadar görünmüyordu.

Esasen bu, geliştiricilerin API'ye güç sağlayan işlevselliği, verileri gerçekten açığa çıkarmadan test etmelerine izin verdi.

İlk içerik uç noktaları, WordPress'in tüm güncel sürümleriyle birleştirildiğine göre, eklenti geliştiricileri ve tema yazarları, geleneksel wp-admin deneyiminin dışında verileri almanın, görüntülemenin ve değiştirmenin heyecan verici yeni yollarını deneyebilir.

Kısaltmaları Ayırmak: HTTP'den JSON REST API'sine

WP REST API'sinin önemini anlamak için, verileri çevrimiçi olarak nasıl paylaştığımızın ve İnternet'in nereye gidebileceğinin temelini anlamak yardımcı olabilir.

HTTP, günlük olarak uğraştığımız çoğu web trafiğinin temelidir. Bir tarayıcıya bir URL yazarsanız, bir istekte bulunursunuz. İlgili sunucu isteğinizi alır ve bir yanıt verir. Bu işlem, çevrimiçi olarak yaptığımız neredeyse her şeyin temelidir. Tarayıcılar istekte bulunur ve sunucular yanıt verir.

Yaptığımız istek türü, aldığımız yanıtın türünü etkileyebilir. Çoğu zaman basit bir GET isteğinde bulunuyoruz: "Ok Google, açılış sayfanı bana GET." Google bir yanıt sağlar.

Web daha etkileşimli hale geldikçe, PUT , POST ve DELETE dahil olmak üzere diğer HTTP isteklerinden yararlanmaya başladık.

Örneğin, bir web sitesinde bir arama çubuğunu doldururuz: "Ok Google, e-posta adresimi ve şifremi giriş sayfana POST ile gönder." Google bizim için yeni bir oturum başlatıyor ve farklı bir yanıt veriyor.

Bu protokol, WordPress sitelerimizi üzerine kurduğumuz temel temeldir.

Verileri veritabanımıza GET ve POST için formlar ve PHP kullanıyoruz. Popüler görüşün aksine, WordPress'in bu temel temeli yakın zamanda değişmeyecek. WordPress'in şu anda yaptığı tek şey, geliştiricilere bir RESTful API aracılığıyla WordPress verileriyle etkileşim kurmaları için yeni bir yol sağlamak.

Temsili Durum Transferi (REST)

WordPress geliştiricileri, Kısa Kod API'si ve Seçenekler API'si gibi genel olarak API'lere aşina olmalıdır. Bu API'ler, WordPress'i oluşturan bileşenlerin işlevselliğini tanımlar, böylece tema ve eklenti yazarları WordPress'in temel özelliklerini genişletebilir. Ancak WP REST API biraz farklıdır.

REST veya RESTful API, verilerinizi harici kaynaklardan gelen HTTP isteklerine güvenli bir şekilde maruz bırakmakla ilgilidir. Aynı zamanda, bu isteklere yanıt vermek için ortak bir mimari ve bir dizi protokol kurmakla da ilgilidir. Bu tür hizmetin arkasında daha gelişmiş fikirler ve ilkeler olsa da, bunlar bu makalenin kapsamı dışındadır.

WP REST API'sinin, özellikle WordPress 4.7'den sonra varlığı, gönderiler, sayfalar, yorumlar ve herhangi bir genel gönderi meta dahil olmak üzere sitenizin tüm içeriğine artık doğrudan ham veri olarak erişilebilir olduğu anlamına gelir. Ayrıca, isterseniz bu verilerde wp-admin geleneğinin dışından, belki bir mobil veya masaüstü uygulaması aracılığıyla değişiklik yapabileceğiniz anlamına gelir.

Verilerinizi bir veritabanındaki basit satırlar olarak düşünmek yerine, artık ona JSON biçiminde serileştirilmiş erişime sahip olabilirsiniz.

JSON - XML'e ne oldu?

WordPress uzmanları, siteler arasında içerik paylaşmak için yaygın bir biçim olan XML konusunda çok fazla deneyime sahiptir.

XML'e benzer şekilde, JSON, verileri belirli bir sözdizimine toplayarak kolayca aktarmamıza izin veren bir mekanizmadır. JSON aslında bir JavaScript nesnesinin metinsel temsili olan bir dizedir ve verilerinizi bir dizi anahtar/değer çiftinde saklar. Bir WordPress gönderisinin ortak bir JSON temsili şöyle görünebilir:

 { “id”: 1, “title”: { “rendered”: “Hello World” }, “content”: { “rendered”: “Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!” } }

(Gerekirse JSON yanıtını güzelleştirmek için bir JSON biçimlendirici aracı kullanabilirsiniz.)

WP REST API aracılığıyla tam bir JSON yanıtı, meta veriler dahil olmak üzere gönderi hakkında ek bilgiler içerecektir. Bu verileri JSON biçiminde uygun bir şekilde bir araya getirerek, WordPress içeriğinizle yeni ve heyecan verici yollarla etkileşime girebilirsiniz.

JSON'un JavaScript ile en iyi şekilde eşleştirilmesi tesadüf değildir. Daha fazla WordPress geliştiricisi “JavaScript'i Derinlemesine Öğrenmeye” başladıkça, WordPress'in arka uç olarak daha gelişmiş kullanımlarını göreceğiz.

Verileri Nasıl Buluyoruz: Bir Uç Noktaya Giden Rotayı Takip Edin

Tüm site verilerinize REST API aracılığıyla erişmek, bir URL oluşturmak kadar basittir.

En az 4.7 sürümünü çalıştıran herhangi bir WordPress sitesi için, sitenizin url'sinin sonuna şu dizeyi ekleyin: /wp-json/wp/v2 (örneğin, http://example.com/wp-json/wp/v2 ). Bu URL'yi tarayıcınıza koyun ve ne olduğunu görün.

JSON'u temizleyen bir tarayıcı uzantısı yüklemediyseniz, sonuç muhtemelen büyük bir veri karmaşası gibi görünüyor. Bu büyük veri karmaşası, belirli WordPress sitenizin JSON biçimindeki içerik ve meta bilgileridir.

Bu içeriği yükleyerek, sadece bir rota tanımladınız ve tarayıcınızdan onu sizin için ALmasını istediniz.

Rota, belirli bir yöntemle eşlenen bir URL'dir. WordPress çekirdeği, izlenmesi gereken belirli bir yolu veya parametreyi temsil eden her eğik çizgi '/' ile bu rotayı okur.

Yol, WordPress çekirdeğinin derinliklerindeki işlevlerin hangi verilerin sağlanacağı ve sağlanan verilerle ne yapılacağı konusunda kararlar alabildiği bir uç noktada sona erer.

Örnek bir uç nokta, '/posts' ve '/1' yollarını eklediğimiz '/wp-json/wp/v2/posts/1' olabilir. Bu belirli uç nokta, sitemize verilerimizi gözden geçirmesini, gönderilerimizi çekmesini ve 1 kimliğine sahip gönderiyi çekmesini söyler.

REST API'yi bu kadar kullanışlı yapan şey, genişletilebilir olmasıdır, yani web sitenizdeki herhangi bir veriyi alıp bir uç nokta olarak ekleyebilirsiniz. Temel WordPress işlevlerinin çoğu şu anda desteklenmektedir (veya yakında desteklenecektir).

Bununla birlikte, tema ve eklenti geliştiricileri, özel içeriklerini ve ayarlarını uç noktalar olarak eklemeye başlayabilir ve bu da kullanıcıların web siteleriyle yeni yollarla etkileşime girmesine olanak tanır.

WordPress sitenizde şu anda mevcut olan uç noktaları merak ediyorsanız, Postman gibi bir tarayıcı uygulaması, API'leri keşfetmek için özel olarak bir GUI sağlar.

Başlıklar ve Kimlik Doğrulama

URL uç noktalarını tarayıcıya yazmak basit görünüyor, ancak aslında istekle birlikte bir dizi varsayılan başlık içeriyor. Buna karşılık, yanıtla birlikte bir dizi başlık da geri gönderilir. Bu başlıklar birçok yararlı bilgi içerir, ancak amaçlarımız için en önemlileri, yaptığımız istek türü ve kimliğimizin doğrulanıp doğrulanmadığı ile ilgilidir.

Tarayıcınızın "geliştirici araçlarına" atlarsanız, HTML dosyaları, CSS stil sayfaları, resimler ve daha fazlası dahil olmak üzere tarayıcı penceresine yüklenen herhangi bir varlığın HTTP başlıklarını inceleyebilirsiniz.

Dikkate alınacak ilk başlık, daha önce öğrendiğimiz HTTP isteklerine doğrudan karşılık gelen İstek Yöntemidir. Burada, yalnızca bir sayfayı görüntülüyorsak, istek yöntemi olarak büyük olasılıkla GET göreceksiniz.

REST API'nizi çağıran bir uygulama, başlığın İstek Yöntemini POST olarak değiştirmeyi seçebilir.

Bir POST yöntemi, web sitenize yeni veriler girmesini veya WordPress veritabanınızdaki mevcut verileri değiştirmesini söyler. POST yöntemiyle bilgi göndererek, diğer uygulamalar, wp-admin'de oturum açmadan verilerinizi değiştirme yeteneğine sahiptir.

Ancak endişelenmenize gerek yok, çünkü kimlik doğrulama için uygun kimlik bilgilerini sağlayan başlıklar da içermedikçe web siteniz bunları reddedecektir.

NOT: REST API'nize yapılan çağrıların kimliğini doğrulama yöntemleri hala kesinlik kazanmamıştır, bu da kimlik doğrulamasını REST API ile veri eklemek veya değiştirmek için çalışmak isteyen geliştiriciler için girişin önündeki en büyük engel haline getirir.

Şimdilik, REST API'nin arkasındaki geliştiricilerden bir eklenti de dahil olmak üzere seçenekler mevcut. Kimlik doğrulamayı çevreleyen standart prosedürler çekirdek haline geldikçe, WP REST API'sinin yaygın kullanımı için son engeller netleşecektir.

WP REST API Örnek Uygulaması

WP REST API'yi bu kadar güçlü yapan şey, tutarlı olmasıdır, bu nedenle WordPress 4.7 veya daha üstünü çalıştıran herhangi bir siteden aynı temel sonuçları bekleyebiliriz. Ancak, WordPress dağıtılmış bir API'dir, yani tüm verileri almak için tek bir yer yoktur.

WordPress çalıştıran her web sitesi, benzersiz kullanıcıları ve kimlik doğrulaması ile benzersiz bir uygulamadır. İçeriği REST API aracılığıyla düzenlemek için farklı yetkilendirme teknikleri gerektirse de, WordPress tarafından çalıştırılan çoğu blogun gönderilerine oldukça kolay bir şekilde erişebiliriz.

Göstermek için, elbette tümü WordPress üzerinde çalışan bazı popüler WordPress ile ilgili bloglardan en son gönderilerden alıntıları yükleyen hızlı bir kod yazma demosu yapacağız. Bu sırada, bir arama formu ekleyeceğiz, böylece tüm bu siteleri bir kerede arayabilir ve her birinden ilgili makaleleri bulabiliriz.

Son olarak, orijinal web sitesinde tam makale metnini okumak için bağlantıyı eklediğimizden emin olacağız.

Aşama 1: Son Gönderileri Alma

Hızlı bir Vue örneği ayarlayarak ve onu bir öğeye monte ederek başlayacağız. Ayrıca, daha sonra ekleyeceğimiz form öğelerinde bir ızgara ve temel stile sahip olabilmemiz için Bootstrap'ı da dahil edeceğiz.

Verileri tanımladığımızda, sitenin adını (varsayılan yanıta dahil değildir), URL'yi ve bunları aldığımızda gönderileri depolayacak bir yer isteyeceğiz. İşte bir örnek:

 { “name”: “wordpress.org”, “url”: “https://wordpress.org/news/wp-json/wp/v2/posts?per_page=3”, “posts”: [] }

URL'nin sonuna ilk parametremizi de eklediğimizi fark edeceksiniz, per_page . Tipik olarak, WP REST API, normal bir WP_Query döngüsünü sayfalandırırken aynı kuralları izleyerek sonuçları sayfalandırır. Sorgularımızı ilk üç gönderiyle sınırlayacağız.

Ardından, kaynak listemizde dolaşacak, sonuçları vue-resource ile alacak ve her kaynağın boş posts dizisini sonuçlarla dolduracak olan loadPosts() yöntemini tanımlayacağız.

 loadPosts : function(){ var self = this; self.sources.forEach(function(source, index){ self.$delete(source, 'posts'); // Get API with vue-resource self.$http.get(source.url).then(function(response) { self.$set(source, 'posts', response.data); }, function(response) { console.log('Error'); }); }); }

Vue örneğimiz başarıyla monte edildiğinde loadPosts() için bir ilk çağrıyı da dahil edeceğiz.

 mounted : function(){ this.$nextTick(function(){ // Load posts on initial page load this.loadPosts(); }); }

API'ye birden çok çağrı yapmaya başladığımızda, loadPosts() 'u ayrı bir yöntem olarak tutmak gelecekte kullanışlı olacaktır. HTML'mizde, tüm gönderilerimizin çıktısını almak için Vue'nun basit liste oluşturma yönergelerini ve şablon sözdizimini kullanacağız.

Çalışan bir demo için yerleşik Kaleme bakın:

CodePen'de Brian Coords (@bacoords) tarafından kaleme alınan Pen WP REST API Arama Örneğine (Birinci Aşama) bakın.

2. Aşama: Sonuçları Filtreleme

Bir kenar çubuğu ekleyelim ve çeşitli kaynakları göstermek/gizlemek için bazı filtreler oluşturalım. Bunu yapmak için, sources nesnesine adını vereceğimiz bir boolean olan yeni bir özellik ekleriz.

Filtreleri eklerken, tarihi de düzgün bir şekilde görüntülememize yardımcı olacak bir Vue filtresi oluşturalım. WordPress, gönderinin tarihini ve saatini bir Unix zaman damgası olarak saklar.

Tarihi daha okunabilir bir biçime dönüştürmek için üçüncü taraf Moment.js kitaplığını kullanacağız.

 filters: { // Using Moment.js to convert post date to a readable format prettyDate: function(value){ // Return if date is empty if(!value) return ''; // Convert date to Moment.js var date = moment.utc(value); // Return formatted date return date.format("MMM DD, YYYY,"); } },

Çalışan bir demo için gömülü kaleme bakın:

CodePen'de Brian Coords (@bacoords) tarafından kaleme alınan Pen WP REST API Arama Örneğine (Birinci Aşama) bakın.

Son Aşama: Arama Sorguları

Burada API isteğimize yeni bir parametre ekleyeceğiz. Her siteden alacağımız sonuçların sayısını sınırlamak için per_page=3 parametresini zaten ekledik. Arama çubuğuna yazılmış bir şey varsa, onu ek bir parametre olarak ekleyeceğiz.

Bu, sanki o web sitesindeki arama çubuğunu sorguluyormuşuz gibi, her sitenin yerleşik arama işlevini kullanmamıza izin verecektir.

Bir arama çubuğu ekleyeceğiz ve onu Vue'nun v-model yönergesini kullanarak bir değişkene bağlayacağız.

Tüm API'leri hemen çağırmak yerine, kullanıcı yazmaya başladığında bir düğme ekleyeceğiz ve form gönderimine bir olay bağlayacağız. Ardından, arama parametrelerini (elbette URL kodlu) URL'ye ekleyen Vue örneğimize bir yöntem ekleyeceğiz.

 generateUrl : function(source){ var self = this; // Add search parameters. if(self.searchQuery){ return source.url + '&search=' + encodeURI(self.searchQuery); }else{ return source.url; } }

Çalışan bir demo için gömülü kaleme bakın:

CodePen'de Brian Coords (@bacoords) tarafından kaleme alınan Pen WP REST API Arama Örneğine (Birinci Aşama) bakın.

Bu, WP REST API'sinin basit bir örneği olsa da, WordPress'in kendisinde bunun gibi bir şey için potansiyel bir uygulama hayal edebiliriz. Örneğin, zaten 'WordPress News' meta kutusu var.

Bu demoyu WordPress panosunda görüntüleyerek kolayca bir WordPress eklentisine dönüştürebiliriz. Şimdi, kendi web sitemizden en iyi WordPress ve web tasarımı eğitim sitelerinden bazılarında yardım arama özelliğini entegre ettik.

REST API'nin Gelecekteki Potansiyeli

Yukarıdaki örnek yalnızca WP REST API'nin yeteneklerinin yüzeyini çizse de, verilerle oynamaya başladığınızda ortaya çıkmaya başlayan bazı olasılıkları aktarmalıdır. İster web sitesindeki kullanıcı deneyimini geliştirmek için, isterse harici bir kaynaktan veri toplamak ve işlemek için kullanılsın, güçlü bir araçtır.

Bazı endüstri uzmanları, içeriğinizin "kazıma" yapılması ve başka bir yerde görüntülenmesi olasılığı hakkında endişelerini dile getirirken, bu işlevin RSS beslemelerine benzer olduğunu ve site yöneticilerinin hangi verilerin ne olduğu ve ne olduğu konusunda net bir kontrole sahip olmasının hayati önem taşıdığını unutmamak önemlidir. halka açık değil.

WP REST API, WordPress dokusuna daha fazla yerleştikçe, etkilerini, belki de farkına bile varmadan görmeye başlayacağız. Örnekler basitten (Chris Coyier'in Tasarım Üzerine Alıntılar) karmaşık, tek sayfalı uygulamalara (Guggenheim sitesi) kadar uzanmaktadır.

WP REST API için bir başka popüler kullanım örneği, mobil uygulama geliştirmedir.

İçeriğe REST API aracılığıyla erişilebilir olduğundan, geliştiriciler iOS ve Android için yerel uygulamalar oluşturabilir ve yinelenen veri kaynakları oluşturmak zorunda kalmayabilir.

Kullanıcılar bu mobil uygulamalarla etkileşime girdikçe, geliştiricinin bunu desteklemek için herhangi bir karmaşık altyapı oluşturmasına gerek kalmadan orijinal web sitesinin verilerini alıp doğrudan dönüştürebilecekler.

REST API'nin ziyaretçiye yönelik bu uygulamaları, gerçek sonuçlar çok daha derin olduğu için yalnızca başlangıçtır. Çekirdek geliştirme ekibinin hedeflerinden biri, onu wp-admin arayüzünde kullanmaya başlamaktır.

Gelecekteki WordPress güncellemeleriyle, admin-ajax'ın API lehine değiştirildiğini ve menüleri düzenleme veya gönderileri yayınlama gibi temel işlevlerin hızını artırmayı umuyoruz.

Bu, WordPress'in yeni başlayanlar için kullanıcı dostu başlangıç ​​noktaları olarak Özelleştirici ve Düzenleyiciye artan odaklanmasıyla potansiyel olarak el ele gidebilir.

WP REST API olduğu gibi son derece yararlı olsa da, yapılacak daha çok şey var. API tamamlanmadı. Eklenecek daha fazla özellik ve uç nokta var.

Sonunda, WordPress sitenizi ziyaret etmeden bile etkileşime girebileceksiniz. Ve birçok hizmet artık WordPress ile etkileşim kurmak için özel API'ler kullanıyor olsa da, tek bir standart WordPress REST API'sine geçiş, daha fazla site ve hizmetin aynı dili konuşarak birbirine bağlanabileceği anlamına geliyor.

WordPress, blog yazarlarının bağlantı kurması ve düşüncelerini ve fikirlerini paylaşması için bir blog platformu olarak başladı. WordPress REST API'nin geliştirilmesiyle, sahne arkasında yeni bir bağlantı ve paylaşım düzeyi görmeye başlayacağız. Bu, kullanıcıların WordPress ve kullanıcılarını tamamen yeni sınırlara götürerek, daha önce hiç düşünülmemiş şekillerde düşünce ve fikirlerini geliştirmelerini sağlayacaktır.