WP REST API Bölüm 2: Varsayılan Uç Noktaları Özelleştirme ve Yenilerini Ekleme

Bu dizinin ilk bölümünde, WordPress ve WP JSON API'sini kullanan çok temel bir React Native uygulaması oluşturdum. Bu makalede, uygulamanın kaldığı yerden devam edeceğim ve API'ye, uygulamada daha fazla özelliği etkinleştirecek birkaç özelleştirme ekleyeceğim.

Bu makaleyi takip edecekseniz, ilk bölüme yetiştiğinizden emin olun, çünkü koşmaya başlayacağız!

Temizlemek

Başlangıçta, content alanına bir plaintext düğümü eklemek için aktif temanın functions.php dosyasına bir filtre ekledim:

 add_filter( 'rest_prepare_post', 'dt_use_raw_post_content', 10, 3 ); function dt_use_raw_post_content( $data, $post, $request ) { $data->data['content']['plaintext'] = $post->post_content; return $data; }

Bu makale yayınlandığından beri, bunun bir şeyler yapmanın harika bir yolu olmadığı konusunda bilgilendirildim ve v2 dokümantasyonu bu duyguyu paylaşıyor:

[…] API'nin, yalnızca üzerinde çalıştığınız özelliği değil, tüm istemcilere bir arabirim sunmakla ilgili olduğunu akılda tutmak önemlidir. Yanıtları değiştirmek tehlikelidir.
Alan eklemek tehlikeli değildir, bu nedenle verileri değiştirmeniz gerekiyorsa, değiştirilen veriler yerine alanı çoğaltmak çok daha iyidir.

Bu yüzden yapacağım ilk şey, bu satırları function.php'den silmek. React Native, kutudan çıktığı haliyle html ve html varlıkları ile başa çıkmak için iyi bir yola sahip olmadığı için, yazı içeriğimizin düz metin versiyonunu yine de ortaya çıkarmamız gerekecek, ancak bazılarını da ekleyeceğiz. Derin Düşünceler uygulamamıza özel daha fazla kod biraz sonra, bu yüzden tüm kodlarımızı bir eklentiye koyabiliriz.

Sitenizin plugins dizininde deep-thoughts-plugin adlı bir klasör oluşturun ve ardından deep-thoughts-plugin.php adlı bu klasörün içinde aşağıdaki ortak bilgi parçasıyla birlikte bir php dosyası oluşturun:

 <?php /* Plugin Name: Deep Thoughts Functionality Description: API Modifications for my Deep Thoughts React Native app. Author: Jeffrey Gould Version: 1.0 Author URI: http://jrgould.com */ if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

Mevcut Uç Noktalara Alan Ekleme

Şimdi düz metin alanımızı bu sefer WP-API tarafından sağlanan register_api_field işlevini kullanarak post bitiş noktasına ekleyebiliriz. WP-API belgeleri, rest_api_init eyleminde yeni alanların kaydedilmesini önerir, bu nedenle alan kaydımızı içeren bir işlev oluşturacağız ve onu bu eyleme ve düz metin içeriğini gerçekten döndürecek başka bir işleve ileteceğiz.

 add_action( 'rest_api_init', 'dt_register_api_hooks' ); function dt_register_api_hooks() { // Add the plaintext content to GET requests for individual posts register_api_field( 'post', 'plaintext', array( 'get_callback' => 'dt_return_plaintext_content', ) ); } // Return plaintext content for posts function dt_return_plaintext_content( $object, $field_name, $request ) { return strip_tags( html_entity_decode( $object['content']['rendered'] ) ); }

Burada, içeriğini yalnızca get istekleri için sağladığımız geri çağırma işlevinden, dt_return_plaintext_content alacak olan post endpointine plaintext adlı bir alan eklemek için register_api_field kullanıyoruz. register_api_field işlevi hakkında daha fazla bilgi için WP-API Belgelerine bakın.

Artık eklentinizi etkinleştirebilir ve wp-json/wp/v2/post/[...] isteklerinin artık plaintext alanını içerdiğini görebilirsiniz:

Ayrıca setState çağrımızda setState responseData[0].plaintext responseData[0].content.plaintext oluşturduğumuz fetchData yönteminde bu alana başvurmak için React Native uygulamamızı güncellememiz gerekecek:

 this.setState( { thought: { title: responseData[0].title, content: responseData[0]..plaintext } } );`

Özel Uç Noktalar Ekleme

WP-API ile özel uç noktalar eklemek, mevcut uç noktalara özel alanlar eklemek kadar kolaydır. WP-API bunun için harika belgelere sahip, bu yüzden girişler ve çıkışlar hakkında çok fazla ayrıntıya girmeyeceğim, hadi özel bir uç nokta ekleyelim.

Şu anda, React Native uygulamamız http://deep-thoughts.dev/wp-json/wp/v2/posts/?filter[orderby]=rand&filter[per_page]=1 için bir istekte bulunuyor ve bu, bir dizi içeren bir dizi döndürecek. tek rastgele gönderi. Bu iyi çalışıyor, ancak önceki makalede bahsettiğim gibi çok performanslı değil. Genel olarak orderby=rand kullanan WordPress sorguları oldukça yavaştır ve her seferinde farklı bir şey döndürmesi gerektiğinden bu url'ye istekleri önbelleğe alamıyoruz. İdeal çözüm, React Native uygulamamıza tüm gönderi kimliklerinin bir listesini döndürecek özel bir API uç noktası eklemektir, ardından rastgele bir gönderi kimliği seçebilir ve her görüntülemek istediğimizde bu gönderi için doğrudan bir istek gönderebiliriz. uygulamada yeni rastgele gönderi.

İlk önce wp-json/deep-thoughts/v1/get-all-post-ids adresinde yeni bir rota kaydetmek için register_rest_route işlevini kullanacağız. Bunu daha önce oluşturduğumuz dt_register_api_hooks işlevine ekleyeceğiz:

 // Add deep-thoughts/v1/get-all-post-ids route register_rest_route( 'deep-thoughts/v1', '/get-all-post-ids/', array( 'methods' => 'GET', 'callback' => 'dt_get_all_post_ids', ) );

Şimdi, tüm gönderi kimliklerinin bir dizisini döndürecek olan ana eklenti kapsamına dt_get_all_post_ids geri çağırma işlevini ekleyebiliriz. Bu sorgunun sonuçlarını, her 2 saatte bir süresi dolan bir geçici durumda saklayacağız, böylece birileri bu verileri her istediğinde WordPress'in tüm wp_posts tablosunu sorgulaması gerekmez:

 // Return all post IDs function dt_get_all_post_ids() { if ( false === ( $all_post_ids = get_transient( 'dt_all_post_ids' ) ) ) { $all_post_ids = get_posts( array( 'numberposts' => -1, 'post_type' => 'post', 'fields' => 'ids', ) ); // cache for 2 hours set_transient( 'dt_all_post_ids', $all_post_ids, 60*60*2 ); } return $all_post_ids; }

Bunun işe yarayıp yaramadığını tarayıcınızda http://deep-thinkts.dev/wp-json/deep-thinkts/v1/get-all-post-ids adlı yeni uç noktayı ziyaret ederek test edebilirsiniz. Şuna benzeyen bir yanıt almalısınız:

 [ 150, 148, 147, 146, 145, 144, 143, 142, 141, 140, 139, 138, 137, 136, 135, 134, 133, 132, 131, 130, 129, 128, 127, 126, 125, 124, 123, 122, 121, 120, 119, 118, 117, 116, 115, 114, 113, 112, 111, 110, 109, 108, 107, 106, 105, 104, 103, 102, 101, 100, 99, 98 ]

Şimdi bu yeni uç noktayı kullanmak ve önbelleğe alınabilir isteklerde bulunmak için yerel tepki uygulamamızı güncellememiz gerekiyor. İlk önce REQUEST_URL değişkenini REQUEST_URL_BASE ile değiştireceğiz ve erişeceğimiz farklı uç noktalar için iki değişken daha ekleyeceğiz:

 var REQUEST_URL_BASE = 'http://deep-thoughts.dev/wp-json/'; var POSTS_URL_PATH = 'wp/v2/posts/'; var GET_POST_IDS_PATH = 'deep-thoughts/v1/get-all-post-ids';

Ardından, uygulamanın ilk state iki yeni özellik eklememiz gerekecek: thoughtIDs ve currentID :

 getInitialState: function() { return { //thought is initially set to null so that the loading message shows thought: null, thoughtIDs: null, currentID: null }; }

Ardından, bu özellikleri doldurmak için yöntemler ekleyeceğiz:

 getAllIDs: function() { fetch(REQUEST_URL_BASE + GET_POST_IDS_PATH) .then((response) => response.json()) .then((responseData) => { // this.setState() will cause the new data to be applied to the UI that is created by the `render` function below this.setState( { thoughtIDs: responseData } ); } ) .then(this.fetchData) .done(); }, getRandID: function() { var currentID = this.state.thoughtIDs[Math.floor(Math.random()*this.state.thoughtIDs.length)]; if ( this.state.currentID == currentID ) { currentID = this.getRandID(); } else { this.setState( { currentID: currentID } ); } return currentID; }

Kimlikler listesini aldıktan ve onları state ekledikten sonra getAllIDs()'in yaptığı son şeyin getAllIDs() 'yı çağırdığını fark this.fetchData() – bunun nedeni fetchData() 'nın önceden kullanılabilir olması için düşünce kimliklerine ihtiyaç thoughtIDs . çalıştırmadan önce state . getAllIDs() getAllIDs() önce çalıştığından emin olmak için componentDidMount() yönteminde getAllIDs() ) öğesini fetchData() ile değiştirmemiz gerekecek:

 // Automatically called by react when this component has finished mounting. componentDidMount: function() { this.getAllIDs(); }

Ardından fetchData() 'yi çalıştırmak için getRandID() )'yı güncellememiz ve ardından bu gönderiyi almak için rastgele kimliği kullanmamız gerekecek:

 fetchData: function() { var currentID = this.getRandID(); this.setState({ // we'll also set thought to null when loading new thoughts so that the loading message shows thought: null, }); fetch(REQUEST_URL_BASE + POSTS_URL_PATH + currentID) .then((response) => response.json()) .then((responseData) => { // this.setState() will cause the new data to be applied to the UI that is created by the `render` function below this.setState({ thought: { title: responseData.title.rendered, content: responseData.plaintext } }); }) .done(); }

fetchData() getRandID() ekledik ve ardından bunun çıktısını REQUEST_URL_BASE ve POSTS_URL_PATH ile birlikte API aracılığıyla belirli bir gönderiye erişmek için kullanıyoruz. WP Super Cache veya Varnish gibi bir sunucu tarafı önbelleğe alma sistemi tarafından kolayca önbelleğe alınabilir.

Şimdiye kadarki tüm index.ios.js dosyasının bir özeti:

Ve hazır buradayken, şu ana kadar Deep Thoughts WordPress eklentimiz:

Uç Noktalar Sadece Başlangıçtır

Gördüğünüz gibi, WP-API özel alanlar ve uç noktalar eklemeyi nispeten önemsiz bir görev haline getiriyor. Özel API uç noktaları genellikle admin-ajax kullanmaktan çok daha anlamlıdır ve bence başa çıkmak biraz daha kolaydır.

Şu anda uygulamamız, bu makaleyi okumaya başladığınız zamankinden çok daha fazla değil, ancak artık özel rotaların gücünü açığa çıkardığımız için çok fazla potansiyel var. WP-API, yeni verileri ortaya çıkarmayı bu kadar kolaylaştırıyorsa, verilerimizle etkileşime geçmenin yeni yollarını ortaya çıkarmak da muhtemelen aynı derecede kolaydır. Bu heyecan verici bir olasılık ve bir dahaki sefere tam olarak bunu keşfedeceğiz!