WordPress REST API：次世代のCMS機能

公開: 2022-03-11

Webの4分の1以上がWordPressで実行されています。それが10年以上前から存在していることを考えると、これはかなり注目に値する偉業であり、技術の年ではかなり古いものになっています。

WordPressの秘密のソースは何ですか？簡単–コンテンツを管理するための最もシンプルでありながら最も拡張可能な方法です。しかし、しばらくの間、WordPressは遅れをとっているようでした。

Webが没入型のインタラクティブなエクスペリエンスを作成するためにJavaScriptに依存するようになるにつれて、WordPressがユーザーと開発者がコンテンツを操作するための新しい方法を提供する必要があることがますます明らかになりました。

WordPressはPHP上に構築されており、今後も構築され続けますが、WP REST APIは、PHP WordPressコアのレガシーと、JavaScript Webアプリケーション、およびネイティブモバイルの可能性とパワーとの間に架け橋を築こうとする試みです。およびデスクトップアプリケーション。

WordPress REST APIは、WordPress Webサイトのコンテンツを簡単に使用できるAPIに取り込み、WordPressがWeb上でコンテンツを公開するためのストレージおよび取得システムとして機能できるようにします。

RESTAPIをWordPressに導入する

WP REST APIがどこからともなくポップアップしたと思うなら、あなたは間違っています。

完全に新しい機能をWordPressに追加するのは簡単な作業ではありません。オープンソースソフトウェアであるという性質上、WordPressの開発はコミュニティ全体に依存して進歩を遂げています。

APIの開発は、数年前に別個の機能プラグインとして開始されました。これにより、開発者は、制御された環境でプロジェクトを実験し、プロジェクトに貢献することができました。

多くの反復と拡張、および2つの完全に別個のバージョンを通じて、REST APIの背後にある貢献者は、数千万のWebサイト上のデータへのオープンAPIアクセスを提供することの利点と計り知れない結果をテストおよび評価する必要がありました。

WordPress 4.4、コードネーム「Clifford」は、プロジェクトの初期インフラストラクチャをWordPressコアにもたらしましたが、エンドポイントはWordPress4.7「Vaughan」まで表示されませんでした。

基本的に、これにより、開発者は、データ自体を実際に公開することなく、APIを強化する機能をテストする時間を確保できました。

初期のコンテンツエンドポイントがWordPressの現在のすべてのバージョンにマージされたので、プラグイン開発者とテーマ作成者は、従来のwp-adminエクスペリエンスの外でデータを取得、表示、および変更するためのエキサイティングな新しい方法を試すことができます。

略語の分解：HTTPからJSONRESTAPIへ

WP REST APIの重要性を理解するには、データをオンラインで共有する方法の基礎と、インターネットの方向性を理解することが役立つ場合があります。

HTTPは、私たちが毎日処理するほとんどのWebトラフィックの基盤です。ブラウザにURLを入力すると、リクエストを行うことになります。対応するサーバーがリクエストを受信し、応答を提供します。この取引は、私たちがオンラインで行うほぼすべての基本です。ブラウザが要求を行い、サーバーが応答を提供します。

私たちが行うリクエストの種類は、私たちが受け取る応答の種類に影響を与える可能性があります。ほとんどの場合、「ねぇGoogle、ランディングページをGETして」という簡単なGETリクエストを行っています。 Googleが応答を提供します。

Webがよりインタラクティブになるにつれて、 PUT 、 POST 、 DELETEなどの他のHTTPリクエストを利用し始めました。

たとえば、ウェブサイトの検索バーに「ねぇGoogle、メールアドレスとパスワードをログインページに投稿して」と入力します。 Googleは私たちのために新しいセッションを開始し、異なる応答を提供します。

このプロトコルは、WordPressサイトを構築するための基本的な基盤です。

フォームとPHPを使用して、データベースにデータをGETおよびPOSTします。世論に反して、WordPressのこの根底にある基盤はすぐに変わることはありません。 WordPressが現在行っているのは、RESTfulAPIを介してWordPressデータを操作する新しい方法を開発者に提供することだけです。

Representational State Transfer（REST）

WordPress開発者は、ShortcodeAPIやOptionsAPIなどのAPI全般に精通している必要があります。これらのAPIは、WordPressを構成するコンポーネントの機能を定義するため、テーマとプラグインの作成者はWordPressのコア機能を拡張できます。ただし、WPRESTAPIは少し異なります。

RESTまたはRESTfulAPIは、外部ソースからのHTTPリクエストにデータを安全に公開することを目的としています。また、これらの要求に応答するための共通のアーキテクチャと一連のプロトコルを設定することも重要です。このタイプのサービスの背後には、より高度なアイデアと原則がありますが、それらはこの記事の範囲を超えています。

特にWordPress4.7以降のWPRESTAPIの存在は、投稿、ページ、コメント、公開投稿メタなど、サイトのすべてのコンテンツに生データとして直接アクセスできるようになったことを意味します。また、必要に応じて、モバイルアプリやデスクトップアプリを使用して、従来のwp-adminの外部からこのデータに変更を加えることができることも意味します。

データをデータベース内の単なる行と考える代わりに、JSON形式でデータにシリアル化してアクセスできるようになりました。

JSON-XMLはどうなりましたか？

WordPressの獣医は、サイト間でコンテンツを共有するための一般的な形式であるXMLについて多くの経験を持っています。

XMLと同様に、JSONは、データを特定の構文にバンドルすることでデータを簡単に転送できるようにするメカニズムにすぎません。 JSONは実際には文字列であり、JavaScriptオブジェクトのテキスト表現であり、データをキーと値のペアのセットに格納します。 WordPress投稿の一般的なJSON表現は次のようになります。

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

（必要に応じて、JSONフォーマッターツールを使用してJSON応答をプリティファイすることができます。）

WP REST APIを介した完全なJSON応答には、メタデータなど、投稿に関する追加情報が含まれます。このデータをJSON形式に便利にバンドルすることで、WordPressコンテンツを新しくエキサイティングな方法で操作できます。

JSONがJavaScriptと最適にペアになっているのは偶然ではありません。より多くのWordPress開発者が「JavaScriptを深く学ぶ」ようになるにつれて、バックエンドとしてのWordPressの使用がますます高度になるでしょう。

データの検索方法：エンドポイントへのルートをたどる

REST APIを介してすべてのサイトデータにアクセスするのは、URLを作成するのと同じくらい簡単です。

バージョン4.7以降を実行しているWordPressサイトの場合は、サイトのURLの末尾に次の文字列を追加します： /wp-json/wp/v2 （例： http://example.com/wp-json/wp/v2 ）。そのURLをブラウザに入力して、何が表示されるかを確認します。

JSONをクリーンアップするブラウザー拡張機能をインストールしていない限り、結果はおそらくデータの大きな混乱のように見えます。その大きなデータの混乱は、JSON形式の特定のWordPressサイトのコンテンツとメタ情報です。

そのコンテンツをロードすることで、ルートを定義し、ブラウザにルートを取得するように要求しました。

ルートは、特定のメソッドにマップされるURLです。 WordPressコアはそのルートを読み取り、すべてのスラッシュ「/」は従う必要のある特定のパスまたはパラメーターを表します。

パスはエンドポイントで終了します。ここで、WordPressコアの奥深くにある機能が、提供するデータと提供されたデータの処理方法を決定できます。

エンドポイントの例は「/wp-json/ wp / v2 / posts / 1」で、パス「/posts」と「/1」を追加しました。この特定のエンドポイントは、データを調べ、投稿をプルアップし、IDが1の投稿をプルアップするようにサイトに指示します。

REST APIを非常に便利なものにしているのは、REST APIが拡張可能であるという事実です。つまり、Webサイト内の任意のデータを取得し、それをエンドポイントとして追加できます。現在、WordPressのコア機能のほとんどがサポートされています（または間もなくサポートされる予定です）。

ただし、テーマとプラグインの開発者は、カスタムコンテンツと設定をエンドポイントとして追加し始め、ユーザーが新しい方法でWebサイトを操作できるようにすることができます。

WordPressサイトで現在利用可能なエンドポイントについて知りたい場合は、Postmanなどのブラウザーアプリケーションが、APIを探索するためのGUIを提供します。

ヘッダーと認証

URLエンドポイントをブラウザに入力するのは簡単に見えますが、実際にはリクエストとともに一連のデフォルトヘッダーが含まれています。次に、ヘッダーのセットも応答とともに返送されます。これらのヘッダーには多くの有用な情報が含まれていますが、私たちの目的にとって最も重要なヘッダーは、私たちが行っている要求のタイプと、私たちが認証されているかどうかに関係しています。

ブラウザの「開発者ツール」にジャンプすると、HTMLファイル、CSSスタイルシート、画像など、ブラウザウィンドウに読み込まれるアセットのHTTPヘッダーを調べることができます。

考慮すべき最初のヘッダーはRequestメソッドです。これは、前に学習したHTTPリクエストに直接対応します。ここでは、単にページを表示している場合、リクエストメソッドとしてGETが表示される可能性があります。

REST APIを呼び出すアプリケーションは、ヘッダーのリクエストメソッドをPOSTに変更することを選択する場合があります。

POSTメソッドは、WordPressデータベースに新しいデータを入力するか既存のデータを変更するようにWebサイトに指示します。 POSTメソッドを介して情報を送信することにより、他のアプリケーションはwp-adminにログインせずにデータを変更することができます。

ただし、認証用の適切なクレデンシャルを提供するヘッダーも含まれていない限り、Webサイトはそれらを拒否するため、心配する必要はありません。

注： REST APIへの呼び出しを認証する方法はまだ確定していません。そのため、REST APIを使用してデータを追加または変更したい開発者にとって、認証は参入障壁の最大の障壁になります。

今のところ、RESTAPIの背後にある開発者からのプラグインを含む利用可能なオプションがあります。認証を取り巻く標準的な手順がコアに組み込まれるにつれて、WPRESTAPIを広く使用するための最後のハードルが明らかになります。

WPRESTAPIサンプルアプリケーション

WP REST APIを非常に強力なものにしているのは、一貫性があるという事実です。そのため、WordPress4.7以降を実行しているすべてのサイトで同じ基本的な結果を期待できます。ただし、WordPressは分散APIであるため、すべてのデータを取得できる場所は1つだけではありません。

WordPressを実行している各Webサイトは、固有のユーザーと認証を備えた固有のアプリケーションです。 REST APIを介してコンテンツを編集するには、個別の承認手法が必要になる場合がありますが、実際には、WordPressが実行するほとんどのブログの投稿に非常に簡単にアクセスできます。

実例を示すために、いくつかの人気のあるWordPress関連のブログからの最新の投稿の抜粋をロードする簡単なcodepenデモを作成します。もちろん、すべてWordPressで実行されます。その間、検索フォームを含めるので、実際にこれらすべてのサイトを一度に検索して、それぞれから関連する記事を引き出すことができます。

最後に、元のWebサイトの記事の全文を読むためのリンクを必ず含めます。

フェーズ1：最近の投稿を取得する

まず、クイックVueインスタンスを設定し、それを要素にマウントします。 Bootstrapも含まれるので、後で追加するフォーム要素にグリッドと基本的なスタイルを設定できます。

データを定義するときは、サイトの名前（デフォルトの応答には含まれていません）、URL、および投稿を取得したら保存する場所が必要になります。次に例を示します。

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

URLの最後に最初のパラメータper_pageも含まれていることに気付くでしょう。通常、WP REST APIは、通常のWP_Queryループをページ分割するのと同じルールに従って結果をページ分割します。クエリは最初の3つの投稿に限定します。

次に、メソッドloadPosts()を定義します。このメソッドは、ソースのリストをループし、vue-resourceを使用して結果を取得し、各ソースの空posts配列に結果を入力します。

 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インスタンスが正常にマウントされたときに、 loadPosts()への最初の呼び出しも含めます。

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

loadPosts()を別のメソッドとして保持することは、APIへの複数の呼び出しを開始するときに、将来的に役立ちます。 HTMLでは、Vueの単純なリストレンダリングディレクティブとテンプレート構文を使用して、すべての投稿を出力します。

動作するデモについては、埋め込まれたペンを参照してください。

CodePenのBrianCoords（@bacoords）によるPen WP REST API検索例（フェーズ1）を参照してください。

フェーズ2：結果のフィルタリング

サイドバーを追加し、さまざまなソースを表示/非表示にするためのフィルターをいくつか作成しましょう。これを行うには、 sourcesオブジェクトに新しいプロパティを追加します。これは、に名前を付けるブール値です。

フィルタを追加している間に、日付を正しく表示するのに役立つVueフィルタを生成しましょう。 WordPressは、投稿の日付と時刻をUnixタイムスタンプとして保存します。

サードパーティのライブラリMoment.jsを使用して、日付をより読みやすい形式に変換します。

 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,"); } },

動作するデモについては、埋め込みペンを参照してください。

CodePenのBrianCoords（@bacoords）によるPen WP REST API検索例（フェーズ1）を参照してください。

最終段階：検索クエリ

ここでは、APIリクエストに新しいパラメータを追加します。すでに、 per_page=3パラメーターを追加して、各サイトから取得する結果の数を制限しています。検索バーに何かが書かれている場合は、それを追加のパラメーターとして追加します。

これにより、各サイトの組み込みの検索機能を、そのWebサイトの検索バーにクエリを実行する場合と同じように使用できるようになります。

検索バーを追加し、Vueのv-modelディレクティブを使用して変数に関連付けます。

すべてのAPIをすぐに呼び出すのではなく、ユーザーが入力を開始すると、ボタンを追加してイベントをフォーム送信にバインドします。次に、検索パラメーター（もちろん、URLエンコードされたURL）をURLに追加するメソッドをVueインスタンスに追加します。

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

動作するデモについては、埋め込みペンを参照してください。

CodePenのBrianCoords（@bacoords）によるPen WP REST API検索例（フェーズ1）を参照してください。

これはWPRESTAPIの単純な例ですが、WordPress自体の中でこのようなものの潜在的なアプリケーションを想像することができます。たとえば、「WordPressNews」メタボックスはすでに存在します。

このデモをWordPressプラグインに簡単に変換して、WordPressダッシュボードに表示することができます。これで、WordPressとWebデザインのトップチュートリアルサイトのいくつかからヘルプを検索する機能が、自社のWebサイトから統合されました。

RESTAPIの将来の可能性

上記の例は、WP REST APIの機能のほんの一部にすぎませんが、データを操作し始めると明らかになり始める可能性のいくつかを伝える必要があります。 Webサイト自体のユーザーエクスペリエンスを向上させるために使用する場合でも、外部ソースからデータを収集して操作するために使用する場合でも、強力なツールです。

一部の業界専門家は、コンテンツが「スクレイピング」されて他の場所に表示される可能性について懸念を表明していますが、この機能はRSSフィードに類似していることを覚えておくことが重要です。また、サイトの管理者がデータとは何かを明確に制御することが重要です。公開されていません。

WP REST APIがWordPressの構造に深く浸透するにつれて、おそらく気付かないうちに、その効果がわかり始めます。例は、単純なもの（Chris Coyierのデザインに関する引用）から複雑な単一ページのアプリケーション（Guggenheimサイト）まで多岐にわたります。

WP REST APIのもう1つの一般的な使用例は、モバイルアプリケーションの開発です。

コンテンツはRESTAPIを介して非常にアクセスしやすいため、開発者はiOSおよびAndroid用のネイティブアプリを作成でき、重複するデータソースを作成する必要がなくなります。

ユーザーがこれらのモバイルアプリを操作すると、開発者がこれをサポートするための複雑なインフラストラクチャを作成しなくても、元のWebサイトのデータを取得して直接変換できるようになります。

ただし、REST APIのこれらの訪問者向けアプリケーションはまだ始まったばかりであり、実際の影響ははるかに深いものです。コア開発チームの目標の1つは、wp-adminインターフェース全体でそれを使い始めることです。

今後のWordPressの更新により、admin-ajaxがAPIに置き換えられ、メニューの編集や投稿の公開などの基本的な機能の速度が向上することが期待されます。

これは、WordPressの初心者にとって使いやすい出発点として、WordPressがカスタマイザーとエディターにますます焦点を当てていることと密接に関連している可能性があります。

WP REST APIはそのままでも非常に便利ですが、やるべきことはまだたくさんあります。 APIは完全ではありません。追加する機能とエンドポイントはまだまだあります。

最終的には、WordPressサイトにアクセスしなくても対話できるようになります。現在、多くのサービスがカスタムAPIを使用してWordPressとやり取りしていますが、1つの標準のWordPress REST APIに移行することで、同じ言語を話すより多くのサイトとサービスを相互接続できるようになります。

WordPressは、ブロガーがつながり、自分の考えやアイデアを共有するための方法であるブログプラットフォームとして始まりました。 WordPress REST APIの開発により、舞台裏で新しいレベルの接続と共有が見られるようになります。これにより、ユーザーはこれまで考えられなかった方法で自分の考えやアイデアを構築し、WordPressとそのユーザーをまったく新しいフロンティアに導くことができます。