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 beraberinde REST API entegrasyonunun ilk yarısını da getiriyor. Bu, WordPress tema ve eklenti geliştiricileri için oldukça heyecan verici bir haber, ancak “REST API'nin yarısının bana ne faydası var?” Diye merak ediyorsanız, muhtemelen yalnız değilsiniz.

Hey, Dawg.

Eylül ayında Birleştirme Önerisini okuduğumda ilk düşündüğüm şey "ah, harika, REST API'yi birleştiriyorlar" oldu. Esasen, 4.4'te elde ettiğimiz şey, Eklenti API'sinin eklentiler ve uygulamalar için özel uç noktalar oluşturmanın daha basit ve daha sağlam bir yolunu sağlayan admin_ajax_ kanca sisteminin harika, RESTful, yerine geçmesidir.

REST API ve oradaki birleştirme hakkında pek çok bilgi var, bu yüzden burada daha fazla ayrıntıya girmeyeceğim. Bunun yerine, bu dizinin ruhuna uygun olarak, bir uygulama çizerek WordPress 4.4 REST API'sini keşfetmek istiyorum.

Dinlenin

Yaratacağımız şey, hepsini yazmak için çok tembel olduğumda utanmadan “DİNLENİN” veya GIAR diyeceğim çok basit bir uygulama. GIAR'ı ProductHunt'a gönderiyor olsaydım, bunu “Tinder, tek bir blog gönderisi için Pocket ile buluşuyor” olarak tanımlardım. Uygulama iki bölümden oluşacaktır:

1. Uygulamamız için API oluşturacak bir WordPress eklentisi. API, gönderilerin bir listesini GET için bir bitiş noktasının yanı sıra POST olumlu ve olumsuz oylar için bir bitiş noktası sağlayacaktır.
2. Kullanıcılara rasgele blog yazısı başlıkları gösterecek ve "Bir REST ver" için aşağı oy vermelerine veya "Bir OKUMA Ver" için olumlu oy vermelerine ve okuma listelerine eklemelerine izin verecek bir javascript uygulaması.

İşleri basit tutmak için bunu bir MVP veya Minimum Uygulanabilir Ürün gibi oluşturacağız. Uygulamayı yazmak için çok temel HTML, CSS ve JavaScript/JQuery kullanacağız, okuma listenizi localStorage saklayacağız ve oyunuzu vermek için kimlik doğrulaması gerektirmeyeceğiz.

Bitiş Noktasından Başlamak

Bu oldukça basit olacağından, uygulamanın onu gerçekten nasıl kullanacağına bağlı olarak API uç noktaları oluşturabilmem için önce uygulamayı iskeleye alarak başlayacağım.

Uygulamanın ihtiyaç duyacağı ilk şey, şimdilik JSON'da alay edeceğim bir makale listesi:

 var posts_mockup = [ { ID: 1, title: "First Post Title", permalink: 'http://example.com/1/', upvotes: 12, downvotes: 2 }, { ID: 22, title: "Second Post Title", permalink: 'http://example.com/2/', upvotes: 1, downvotes: 22 }, { ID: 33, title: "Third Post Title", permalink: 'http://example.com/3/', upvotes: 5, downvotes: 4 }, { ID: 44, title: "Fourth Post Title", permalink: 'http://example.com/4/', upvotes: 2, downvotes: 2 }, { ID: 55, title: "Fifth Post Title", permalink: 'http://example.com/5/', upvotes: 8, downvotes: 13 }, ];

API'den bir gönderi listesi istediğimizde yanıtımız sonunda böyle görünmelidir. Ardından, uygulamamız olacak çok basit bir html sayfası oluşturacağım. Kirli işleri yapacak jQuery ve app.js yanı sıra bazı temel stilleri ve uygulamamızın temel düzeyde çalışması için ihtiyaç duyacağı tüm öğeleri ekleyeceğim.

Hangisi bir tarayıcıda şöyle görünür:

Ardından, çok temel bir javascript uygulamasını bir araya getirdim. Bu şimdiye kadar yazdığım en iyi kod değil, ama bu bir MVP, yani işi hallediyor:

Burada oynayabileceğiniz temelde çalışan her şeye sahip olan:

CodePen'de JRGould (@JRGould) tarafından kaleme bir REST verin.

Bu, REST API ile ilgili bir gönderi olduğu için, JS'de neler olup bittiğine çok derinlemesine girmeyeceğim (yorumlarda sormaktan veya CodePen'imi çatallamaktan çekinmeyin) ama işte kısa bir genel bakış:

Belge yüklendikten sonra her şeyi ayarlayan bir $( document ).ready( function() { ... düğmeleri için tıklama işleyicileri ve okuma listesi için “temizle” düğmesi kurmanın yanı sıra, ilk şey, getPostsFromServer() 'ı çağırır ve bu şimdilik sadece alaylı verileri alır, ancak sunucudan gerçek verileri almak için bir AJAX çağrısı ekleyeceğimiz için bir geri arama da alır.

Geçmekte olduğumuz geri arama, gönderileri sunucudan aldığımızı bildiğimizde ateşlenen initAfterAjax() . Geri arama, showPost() için argüman olarak getRandomPost() kullanarak rastgele bir gönderi göstererek ve ardından showPost() temizleyerek ve ul getLS() kullanarak localStorage mevcut okuma listemizi arayarak okuma listesini ayarlayarak verileri DOM'a bağlamayı işler. getLS() yardımcı işlevi ve eğer bulursa okuma listesini bağlantılarla doldurmak için bunu kullanmak.

Bu kodu baştan sona okursanız, iki TODO:... yorumu görürsünüz, API'yi bağlamamız gereken yer burasıdır. Bunu, önce bağlantı bilgileri ve uç noktalarla bir ayarlar nesnesi oluşturarak yapacağım, bu, gelecekte özelleştirmeyi veya değiştirmeyi kolaylaştırıyor:

 var giar_settings = { api_base: 'http://give-it-a-rest.dev/wp-json/give-it-a-rest/v1/', endpoints: { posts: { route: 'list-posts/', method: 'GET' }, vote: { route: 'vote/', method: 'POST' } } }

Oluşturacağımız API için harika bir taslak görevi gördüğü için bunu biraz sonra inceleyeceğiz. Ardından, bu nesneyi kullanmak için bir ajax yardımcı işlevi oluşturacağım:

 function doAjax( endpoint, data ) { return $.ajax( { url: giar_settings.api_base + endpoint.route, method: endpoint.method, data: data } ); }

Bu, göndermek istediğimiz verilerle birlikte kullanmak istediğimiz uç noktaya bir referans iletmemize izin verecek ve tam da buna dayalı olarak temel bir $.ajax çağrısı ayarlayacaktır. Bu işlev ayrıca jQuery nesnesini döndürür, böylece gerektiğinde geri aramalar ekleyebiliriz.

Şimdi tek gereken bu TODO ile ilgilenmek. İlk önce getPostsFromServer() 'ı güncelleyeceğiz:

 function getPostsFromServer( callback ) { doAjax( giar_settings.endpoints.posts, {} ) .done( function( data ) { posts = data; if ( 'function' === typeof callback ) { callback.call(); } } ); }

Ardından, oyumuzu gerçekten göndermek için TODO voteOnPost() içinde değiştireceğiz:

 doAjax( giar_settings.endpoints.vote, { vote: updown, id: post.ID } );

Emin olabilirsiniz

Artık uygulamamızı sunucudan gelen verileri kullanacak şekilde güncellediğimize göre, ona gerçekten yanıt verecek uç noktaları oluşturmamız gerekecek. WordPress 4.4'e dahil olan REST API'sinin kutudan çıktığı gibi herhangi bir uç nokta içermediğini unutmayın, bu nedenle sıfırdan kendimizinkini oluşturmamız gerekecek. Bunu, bu serinin önceki bölümünde oluşturduğumuza çok benzeyen basit bir eklenti oluşturarak yapacağız.

İlk önce rotalarımızı kaydetmek için rest_api_init :

 add_action( 'rest_api_init', 'dt_register_api_hooks' ); function dt_register_api_hooks() { $namespace = 'give-it-a-rest/v1'; register_rest_route( $namespace, '/list-posts/', array( 'methods' => 'GET', 'callback' => 'giar_get_posts', ) ); register_rest_route( $namespace, '/vote/', array( 'methods' => 'POST', 'callback' => 'giar_process_vote', ) ); }

Daha önce oluşturduğumuz giar_settings nesnesine bakarsanız, bu çok benzer görünmelidir. Bir give-it-a-rest/v1 ad alanı tanımlayarak başlıyoruz ve sonra iki yol kaydediyoruz: /list-posts/ 'da GET isteklerine yanıt veren bir yol ve /vote/ 'da POST isteklerine yanıt veren bir yol.

Şimdi bu geri aramaları ayarlayalım. İlk önce giar_get_posts :

 function giar_get_posts() { if ( 0 || false === ( $return = get_transient( 'dt_all_posts' ) ) ) { $query = apply_filters( 'giar_get_posts_query', array( 'numberposts' => -1, 'post_type' => 'post', 'post_status' => 'publish', ) ); $all_posts = get_posts( $query ); $return = array(); foreach ( $all_posts as $post ) { $return[] = array( 'ID' => $post->ID, 'title' => $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) ), ); } // cache for 10 minutes set_transient( 'giar_all_posts', $return, apply_filters( 'giar_posts_ttl', 60*10 ) ); } $response = new WP_REST_Response( $return ); $response->header( 'Access-Control-Allow-Origin', apply_filters( 'giar_access_control_allow_origin','*' ) ); return $response; }

Bu biraz uzun, çünkü verileri dönüştürmemiz gerekiyor, ancak temelde yaptığımız tek şey, veritabanındaki tüm gönderileri almak ve bu ilişkisel dizinin basitleştirilmiş bir sürümünü, verileri etrafında kurduğumuz yapı iskelesi verileriyle eşleşen basitleştirilmiş bir sürümünü oluşturmak. get_post_meta kullanarak elde ettiğimiz olumlu ve olumsuz oy sayıları dahil. Ayrıca verileri geçici olarak önbelleğe alırız, böylece veritabanını çok fazla zorlamayız ve wp_query parametreleri ve geçici durumun “yaşam süresi” veya ttl için filtreler sağlarız.

Burada son bir not, yalnızca ilişkisel diziyi döndürmek yerine (ki bu işe yarar), Access-Control-Allow-Origin üstbilgisini ayarlamamıza izin veren bir WP_REST_Response nesnesi döndürüyoruz (ki bu da için bir filtre sağlıyoruz). ) AJAX taleplerimizle ilgili CORS sorunlarından kaçınmak için.

Şimdi sadece giar_process_vote() 'u kurmamız gerekiyor ve gitmeye hazır olmalıyız

 function giar_process_vote() { $vote = $_POST['vote']; $post_id = $_POST['id']; // input validation if ( ! is_numeric( $post_id ) || ! in_array( strtolower( $vote ), array( 'up', 'down' ) ) ) { return false; } $meta_name = 'giar_' . $vote . 'votes'; $vote_count = intval( get_post_meta( $post_id, $meta_name, true ) ); $update_success = update_post_meta( $post_id, $meta_name, ++$vote_count ) ? true : false; // clear transient posts cache delete_transient( 'giar_all_posts' ); $response = new WP_REST_Response( $update_success ); $response->header( 'Access-Control-Allow-Origin', apply_filters( 'giar_access_control_allow_origin', '*' ) ); return $response; }

Bu gönderi isteklerini ele aldığından, beklenen verilere erişmek ve gönderinin giar_upvotes veya giar_downvotes meta verilerini artırmak için yalnızca $_POST kullanabiliriz. Ayrıca burada bir boole yanıtı sağlıyoruz, ancak aslında uygulamada kontrol etmiyoruz.

Şimdi gitmeye hazır olmalıyız! İşte tamamlanmış eklenti kodumuz:

Ve tamamladığımız app.js kodumuz:

Bu, bu serideki önceki makaleye benziyorsa, öyle! Burada harika olan şu ki, şu anda WordPress 4.4 ve sonraki sürümlerde yerleşik olarak bulunan bir şeyden bahsediyoruz; bu, yukarıdaki WordPress eklentisini 4.4 veya sonraki bir sürümünü çalıştıran mevcut herhangi bir siteye indirip kurabileceğiniz, html dosyasını ve app.js dosyasını indirebileceğiniz anlamına geliyor. giar_settings.api_base url'sini sitenizinkiyle eşleşecek şekilde güncelleyin ve hazırsınız! Bu aptalca ve basit bir çözüm, ancak çok daha büyük bir şeye işaret ediyor: API'nin yalnızca yarısı çekirdeğe birleştirilmiş olsa bile, WordPress geliştiricileri, WordPress'in üzerine inşa etmek için gerçekten sağlam araçlar aldı.