WP REST API Bölüm 2.5: WordPress 4.4’te kullanma
WP REST API Bölüm 1: WP-API ve React Native ile hücresel uygulamalar oluşturma
WP REST API Bölüm 2: Varsayılan bitiş noktasını ayarlayın ve yeni bir noktayı ekleyin
WP REST API Bölüm 2.5: WordPress 4.4’te kullanma
WordPress 4.4 önümüzdeki birkaç hafta içinde piyasaya sürülecek ve API dinlenme entegrasyonunun ilk yarısını getirecek. Bu, tema geliştiricisi ve WordPress eklentisi için oldukça ilginç bir haber, ancak “Benim için yangının geri kalanının yarısının ne faydası?” Selam dostum. Eylül ayında birleşme önerisi okuduğumda, ilk düşündüğüm şey “Oh havalı, dinlenme ateşini birleştirdiler” idi. Temel olarak, 4.4’te aldığımız şey, eklentiler ve uygulamalar için özel bir bitiş noktası oluşturmak için daha basit ve daha güçlü bir yol sağlayan admin_ajax_ kanca sistem eklentisi için iyi bir yedektir.
Yangın dinlenme ve birleşme hakkında çok fazla bilgi var, bu yüzden burada daha ayrıntılı olarak tartışmayacağım. Bunun yerine, bu serinin ruhuyla, bir uygulama taslağı oluşturarak WordPress 4.4 REST API’sını keşfetmek istiyorum. Yapacağımız dinlenme zamanını verin, her şeyi yazmak için çok tembel olduğumda, “dinlenin” ya da giar olarak adlandıracağım çok basit bir uygulama. Producthunt’a bir giar gönderirsem, “bir blog yazısı için cebiyle buluşmak için Tinder” olarak tanımlayacağım. Bu uygulama iki bölümden oluşacaktır:
Uygulamamız için ateş edecek WordPress eklentileri.API, yayınların bir listesini almak için bitiş noktasını ve postvotes ve downvotes için bitiş noktasını sağlayacaktır. Rastgele blog yayınlarının kullanıcılarını gösterecek ve “dinlenmeye” veya ” “Bir okuma verin” ve okuma listesine eklemek için upvote.
Bunu kolaylaştırmak için bunu MVP veya minimum bir ürün gibi yapacağız.Yazma uygulamaları için çok temel olan HTML, CSS ve JavaScript/JQuery kullanacağız, okuma listenizi LocalStorage’da kaydedeceğiz ve oylarınızı vermek için kimlik doğrulamaya ihtiyacımız yok.
Son noktadan başlayarak, bu çok basit olacağı için, uygulamanın gerçekten nasıl kullanacağına göre API’nın bitiş noktasını gösterebilmem için önce uygulama iskelesini yaparak başlayacağım. Uygulamanın ihtiyaç duyduğu ilk şey, şimdilik JSON’da kopyalayacağım makalelerin bir listesidir: var post_mockup = [{id: 1, başlık: “İlk Gönderi Başlığı”, Permalink: ‘http://example.com/1 /’, Upvotes: 12, Downvotes: 2}, {Id: 22, başlık: “İkinci gönderi başlığı”, permalink:’ http://example.com/2/ ‘, upvotes: 1, downvotes: 22}, { ID: 33, başlık: “Üçüncü Gönderi Başlığı”, Permalink: ‘http://examples.com/3/’, upvotes: 5, Downvotes: 4}, {id: 44, başlık: “Dördüncü yazı başlığı”, permalin : ‘http: //example.com/4/’, upvotes: 2, downvotes: 2}, {id: 55, başlık: “Beşinci Gönderi Başlığı”, Permalink: ‘http://example.com/5/’ , Upvotes: 8, Downvotes: 13},]; API’dan yayınların bir listesini istediğimizde daha sonra yanıtımıza benzeyecek olan budur. Sonra, uygulamamız olacak çok basit bir HTML sayfası oluşturacağım. Kirli iş yapacak JQuery ve App.js, bazı temel stilleri ve uygulamamızın temel düzeyde işlev görmesi için gereken tüm unsurları ekleyeceğim. Tarayıcıda böyle görünüyor:
Sonra, JavaScript’in çok temel bir uygulamasını derledim. Bu şimdiye kadar yazdığım en iyi kod değil, ama bu MVP, böylece işi bitiriyoruz:
Hangi temelde burada oynayabileceğiniz tüm işlevler: bkz. CODEPEN’de kalem JrGould (@ JRGould) tarafından dinlenin. Bu, API’nın geri kalanı hakkında bir yazı olduğu için, JS’de olanları çok derin tartışmayacağım (yorumlarımda veya çatal codepen’imde sormaktan çekinmeyin) ama bu kısa resim: $ (belge) var. Ready (function () {. .. belge yüklendikten sonra her şeyi ayarlayan. Yoklama düğmesinin tıklanmasını ve okuma listesi için “Sil” düğmesini ayarlamanın yanı sıra, yapılacak ilk şey çağırmaktır. Şimdilik yapay verileri yeni almış olan getPostsFromserver (), aynı zamanda bir geri çağrı gerektirir çünkü sunucudan gerçek verileri almak için Ajax çağrıları ekleyeceğiz. Sunucudan bir gönderi var. GeterPost () için bir argüman olarak GetRandompost () kullanarak rastgele yayınlar görüntüleyerek Veri kancalarını DOM’a kullanır ve daha sonra UL ve UL’yi kaldırarak bir okuma listesi hazırlar. Getls () yardımcı işlevlerini kullanarak localStorage’da okuma listesini bulmak ve bulunursa okuma listesini bir bağlantı ile doldurmak için kullanın. Bu kodu okursanız, iki todo göreceksiniz: … Yorumlar, yangını bağlamamız gereken yer burası. Bunu önce bağlantı bilgileri ve bitiş noktası içeren bir ayar nesnesi oluşturarak yapacağım, bu da gelecekte ayarlamayı veya değiştirmeyi kolaylaştırır: Var giar_settings = {api_base: ‘http: // ver-it-a-t-ast/v1/’, uç noktalar: {gönderiler: {rota: ‘liste-posts/’, yöntem : ‘Get’}, oy: {rota: ‘oy/’, yöntem: ‘post’}}} Bunu daha fazla keşfedeceğiz çünkü bu yapacağımız yangın için iyi bir taslak olarak işlev görüyor.Daha sonra, bu nesneyi kullanmak için Ajax yardımcı işlevleri yapacağım: işlev doajax (uç nokta, veri) {return $. Rajax ({url: giar_settings.api_base + endpoint.route, yöntem: endpoint.metod, veri: veri});} Bu, göndermek istediğimiz verilerle birlikte kullanmak istediğimiz son noktaya referansa devam etmemizi sağlayacak ve buna göre temel bir $ .ajax çağrısı hazırlayacaktır.Bu işlev ayrıca gerektiğinde geri arama ekleyebilmemiz için jQuery nesnelerini de geri yükler.
Şimdi ihtiyaç duyulan şey sadece Todo ile ilgilenmek.İlk olarak, getPostsFromServer (): function getPostsFromServer (geri çağrı) {doajax (giar_settings.endpoints.posts, {}). Bitti (data; if (‘function’ === geri arama geri çağrısı) { callback.call ();}});} Daha sonra sesimizi göndermek için DoectOnPost () ‘daki Todo’yu değiştireceğiz: doajax (giar_settings.endpoints.vote, {oy: updown, id: post.id});Sunucudan verileri kullanmak için uygulamamızı güncelledikten sonra, gerçekten yanıt verecek bir son nokta oluşturmamız gerektiğinden emin olun.WordPress 4.4’e dahil edilen yangın dinlenmesinin kutunun dışındaki bitiş noktasını içermediğini unutmayın, bu yüzden başından beri kendimiz yapmalıyız.Bunu, bu serinin önceki bölümünde yaptıklarımıza çok benzeyecek basit bir eklenti yaparak yapacağız.
İlk olarak rotamızı kaydetmek için REST_API_INIT’e bağlanacağız: add_ace (‘rest_api_init’, ‘dt_register_api_hooks’);İşlev dt_register_api_hooks () {$ namespace = ‘ver-a-rest/v1’;register_rest_route ($ ad alanı, ‘/liste-posts/’, dizi (‘yöntemler’ => ‘get’, ‘geri arama’ => ‘giar_get_posts’,);register_rest_route ($ ad alanı, ‘/oy/’, dizi (‘yöntemler’ => ‘post’, ‘callback’ => ‘giar_process_vote’,);} Daha önce yaptığımız giar_settings nesnesini görürseniz, bu çok benzer görünecektir.Ad alanı ver-a-rest/v1’i tanımlayarak başlarız ve daha sonra iki yol kaydeteriz:/liste posts/içindeki bir rota, talepleri almak için yanıt veren bir rota ve/oy/istikrara yanıt veren bir rota.
Şimdi geri aramayı ayarlayalım. İlk olarak giar_get_posts: işlev giar_get_posts () {if (0 || false ==== ($ return = get_transient (‘dt_all_posts’))))) {$ query_filters (‘giar_get_posts_query’ ‘, aralık (‘ numberposts ‘=> – 1, ‘Post_type’ => ‘Post’, ‘Post_status’ => ‘yayın’,)); $ all_posts = get_posts ($ query); $ return = array (); foreach ($ all_posts olarak $ post) {$ return [] = array (‘id’ => $ post-> id, ‘başlık’ => $ post-> post_title, ‘permalink’ => get_permalink ($ post-> id ), ‘upVotes’ => intVal (get_post_meta ($ post-> id, ‘giar_upvotes’, true)), ‘downvotes’ => intVal (get_post_meta ($ post-> id, ‘giar_downvotes’, true)),); } // 10 dakika önbellek set_trantient (‘giar_all_posts’, $ return, appling_filters (‘giar_posts_ttl’, 60*10)); } $ tepki = yeni wp_rest_response ($ return); $ Response-> Başlık (‘Access-Control-Saligin’, Applate_filters (‘GIAR_ACCESS_CONTROL_ALLEVER_ORIGIN’, ‘*’)); Dönüş $ yanıt; } Bu oldukça uzundur, çünkü verileri değiştirmemiz gerektiğinden, temelde yaptığımız her şey veritabanındaki tüm yayınları almak ve verileri de dahil ettiğimiz iskele verilerine uygun ilişkisel dizinin basit bir sürümünü yapmaktır. get_post_meta kullandığımız upvote ve downvote sayısı. Ayrıca verileri çok sert kullanmamamız ve WP_Query parametreleri ve “Yaşama Zamanı” veya TTL için filtreler sağlamamamız için verileri geçici olarak önbelleğe alıyoruz.
Burada son bir not, yalnızca ilişkilendirici diziyi (işlev görecek) geri döndürmek yerine, CORS sorunlarından kaçınmak için erişim kontrolü-ses-oerigin üstbilgisini (filtreler sağladığımız) ayarlamamıza izin veren WP_REST_RESPONSECT nesnesini iade ediyoruz. Ajax’ımızı isteyin. Şimdi yalnızca giar_prosess_vote () ayarlamamız gerekiyor ve bunu iyi yapmalıyız giar_prosess_vote () işlevi {$ oy = $ _post [‘oy’]; $ post_id = $ _Post [‘id’]; // (! Is_numeric ($ post_id) ||! in_array (strtolower ($ oy), dizi (‘yukarı’, ‘aşağı’))) {return false; } $ meta_name = ‘giar_’. $ oy. ‘oylar’; $ oy_count = intVal (get_post_meta ($ post_id, $ meta_name, true)); $ update_success = update_post_meta ($ post_id, $ meta_name, ++ $ oy)? Doğru yanlış; // geçici yazıları temizle cache delete_transient (‘giar_all_posts’); $ tepkisi = yeni wp_rest_response ($ update_success); $ Response-> Başlık (‘Access-Control-Saligin’, Applate_filters (‘GIAR_ACCESS_CONTROL_ALLEVER_ORIGIN’, ‘*’)); Dönüş $ yanıt; } Bu, gönderi talebini işlediğinden, sadece beklenen verilere erişmek ve Giar_upvotes veya giar_downvotes meta veri eklemek için $ _POST kullanmamız gerekir. Ayrıca Boolean’ın cevabına da cevap verdik, ancak aslında uygulamayı kontrol etmedik. Şimdi ayrılmaya hazır olmalıyız! Aşağıdakiler tam eklenti kodumuz: ve tam uygulamamız.js kodumuz:
Bu serideki önceki makaleye benziyorsa, evet!Burada havalı olan şey, şimdi WordPress 4.4’teki bir şeyden bahsediyoruz ve yukarıdaki WordPress eklentisini 4.4 veya daha yakın zamanda çalışan herhangi bir siteye indirip yükleyebileceğiniz, HTML ve App dosyalarını indirin. JS’yi güncelleyebiliriz. Giar_settings.api_base url sitenize uygun ve bunu yapmaya hazırsınız!Bu aptalca ve basit bir çözümdür, ancak çok daha büyük bir şeyi işaret eder: Ateşin sadece yarısı çekirdeğe birleştirilmiş olsa bile, WordPress geliştiricisi WordPress üzerine inşa etmek için çok güçlü birkaç araç aldı.Bu, “WP REST API” Serisi WP REST API Bölüm 1: WP-API ve React Native ile hücresel uygulamalar oluşturma
WP REST API Bölüm 2: Varsayılan bitiş noktasını ayarlayın ve yeni bir noktayı ekleyin
WP REST API Bölüm 2.5: WordPress 4.4’te kullanma
