WordPress APIを使用したブログの電源

Sep 11, 2025

操作方法

過去数年間で、WordPressのREST APIの開発は開発者向けの新しいドアを開設しました。 PHPでWordPress-Powered Projectを書くことに以前に限られていた開発者は現在、彼らが彼らのウェブサイトの技術スタックにどのように近づくことができるかについてより柔軟性と制御を行っています。

これは、鮮やかなWordPressコントロールパネルのすべての利点を保持することが可能です。 Wordpressプラグイン 高度なカスタムフィールドなど、必要なときにWordPressと対話する完全にカスタム構築されたフロントエンドを持ちます。

チュートリアルファイルをダウンロードしてください

なお WordPressチュートリアル 現在ローカルのJSONファイルをデータソースとして使用している単純なブログアプリにWordPress REST APIを実装する方法を調べて、一般的なJavaScriptフレームワークを使用した単一ページアプリケーション（SPA）として構築されています。 vue.js. 。これは、vuexの実装を含みます。これは、そのアクションと突然変異メソッドの組み合わせを使用してWordPressから要求するデータを保存するために使用します。

完了したら、WordPressから検索され管理されている投稿を表示しながら、vue.jsのすべての反応性を持つリーンの単純なSPAを作成したはずです。

探検するためのより素晴らしいAPIのために、私たちのガイドを最高のものに見てください。 JavaScript API 、 HTML API そして Google Apis 。

01.ワークスペースと依存関係を設定します

最初に最初に、あなたはすべきですプロジェクトのファイルをダウンロードしてくださいそしてあなたの好みの編集者でそれらを開く。

コンソールで、CDに ウェブサイト - テンプレート 以下のコマンドを実行してプロジェクトのノード依存関係をインストールします（ノードがインストールされていない場合は、その第一にします）。私たちは純粋に働いています SRC ここからのディレクトリ

npm install

02. vuexをインストールします

次に、以下のコマンドを使用して、インストールします v これは、vue.jsアプリケーション用の状態管理パターンとライブラリです。これは、WordPress APIから受信するデータに依存するすべてのVUEコンポーネントの中央情報ストアとして機能します。反応に精通している開発者のために、Vuexはフラックスに大きく触発されています。

npm install vuex --save

03.開発サーバーを起動します

コンソールで、以下のコマンドを実行して開発サーバを起動します。これにより、現在表示されているようにvue.jsプロジェクトがコンパイルされ、アクセスできるようにURLに割り当てられます。これは通常です LOCALHOST：8080 。

1つの大きな利点これがライブリロードされます。そのため、アプリを変更して保存すると、手動でリロードする必要なしにブラウザのページが更新されます。

npm run dev

04. Vuex Storeを作成します

に SRC 、呼び出したディレクトリを作成しますお店そしてその中に新しいファイルが呼び出されます index.js. 。これは私たちのVUEXストアが定義される場所になります。それに到達する前に、最初に私たちのvue.jsアプリがその存在を認識していることを確認する必要があります。これを行うには、開く main.js. 下のスニペットのように、ストアをインポートして依存関係として含めます。

「vue」からのVUEをインポートする
'./app'からアプリをインポートする
'./router'からルーターをインポートする
'./store'からの輸入店
vue.config.productiontip = false
/ * ESLINT-DISABLE NEW * /
新しいVUE（{
  El： '#app'、
  ルーター、
  お店、
  テンプレート： '＆lt; app / gt;'、
  コンポーネント：{app}
}）

05.ストアの足場を作成し、Axiosをインストールします

Ajax要求を簡単にするために、私たちのストアはWordPress APIを作成します.Axiosをインストールします。これは、約束ベースのHTTPクライアントです。これを行うには、別のコンソールウィンドウを開き、に移動します。 ウェブサイト - テンプレート ディレクトリと実行 NPM Install Axios - 保存する 。

次に、新しい空のVuex Storeオブジェクトをインスタンス化してストアを足場し始めましょう。現時点では、それは何もしていませんが、少なくともVUEはそれを認識すべきです。

「Axios」からAxiosをインポートする
'vue'からvueをインポートする
'vuex'からvuexをインポートする
vue.use（vuex）
const store = new vuex.store（{
  状態：{}、
  行動： {}、
  突然変異：{}
）
デフォルトストアをエクスポートする

06.投稿を作成します

vuexでは、Stateオブジェクトはアプリケーション情報を保持します。この場合、POSTデータはWordPress POSTデータになります.APIを使用して接続します。このオブジェクト内で、POSTと呼ばれる新しいプロパティを作成し、それにNULLの値を割り当てます。

状態：{
  投稿：NULL

07. GetPostsアクションを作成します

vuexでは、アクションは非同期要求が処理される主な方法です。これらは通常、ストア内で定義されたメソッドであり、これはアプリによって必要に応じてディスパッチされます。

空で行動オブジェクト、POSTSの状態がまだNULLの場合、AXIOSはWordPress APIにAJAX要求を実行して投稿のリストを返します。肯定的な対応を受けたら、その後約束を解決し、その投稿をコミットします。倉庫突然変異。

 getPosts：関数（コンテキスト）{
  新しい約束を返す（（解決、拒否）= gt; {
  if（context.state.posts）{
  解決（）
  }
  そうしないと {
  axios.get（ 'http://lukeharrison.net/
  WebDesigner / WP-JSON / WP / V2 / POSTS '）
  ···（（応答）=＆gt; {
  context.commit（ 'storeposts'、
  response.data）
  解決（）
  }）。キャッチ（（エラー）=＆gt; {
  拒否（エラー）;
  }）;）
  }
  ）

08. StorePostsの突然変異を作成します

VUEXによって導入された別の概念は、典型的には店舗内で定義された方法である突然変異である。突然変異は、VUEXストア内の状態を変更する唯一の方法であり、デバッグ時に状態が簡単に追跡されることができます。

空で mut mut オブジェクト、定義しましょう倉庫前の手順で参照し、そのデータを指定した状態オブジェクトのPOSTプロパティを上書きする方法で、変異はペイロードとして受信されます。

 StorePosts（状態、応答）{
   state.posts =応答}

09. Loadに対するGetPostsアクションをトリガーします

WordPress APIから投稿をつかみ、それらをVuexの状態にするアクションと突然変異メソッドを作成しましたが、今度は実際にこのプロセスをどこかにトリガする必要があります。最上位vue.jsコンポーネントで app.vue. 下のスニペットを追加してください。

作成した（） Globalの使用中にVUEコンポーネントが負荷に作成されるとすぐにコードをトリガーするライフサイクルのフックです。 $店変数を使用すると、Vuex Storeの内容にアクセスして派遣することができます。 GetPosts. 手順7からの処置。

 created（）{
   これ。$ store.dispatch（ 'getposts'）}

10.属性パスを更新します

The Vue DevTools extension gives you the power to debug your Vue.js app — VUE DevToolsエクステンションは、vue.jsアプリをデバッグする権限を与えます。

ChromeやFirefoxで働いていて、 vue.js devtools拡張子（そうでない場合は、それが非常に便利なものとしてすることをお勧めします）、あなたは今ロードされたWordPress投稿を見ることができるようになるべきです。 ベース状態 下 v タブ。

アプリに戻る、In /components/posts/posts.vue. 、テンプレートHTMLはこのデータを指す必要があるため、属性パスをいくつか調整しましょう。

 'post.title.rendered'にスイッチ 'post.title'をスイッチ
 'post.preview'を 'post.acf.preview'にスイッチ
 'post.previewImage'を 'post.acf.header_image_small'にスイッチ

11. V-for Loopを更新します

POSTSコンポーネントでは、呼び出された使用にvue.jsディレクティブがあります v-for. 。これはすべての投稿を介して、そしてそれぞれがPostコンポーネントのインスタンスを印刷し、リストに表示されます。

ローカルダミーテストデータを使用しているように、このディレクティブに渡されたパスを更新する必要があります。 Vuex Storeのストアドポストを指すために、下のスニペットのV-forディレクティブを更新します。

V-for = "POST" $ store.state.posts "

12.家族数をかけてください

WordPress投稿のリストが表示されているはずです。ローカル投稿データを使用していないので、削除しましょう SRC / Data. 。その後、ポストコンポーネントで、削除します 投稿：Postdata.Data. コンポーネントのローカルデータストアとPostDataのインポートのプロパティ。

13.ポスト著者を修正しました

あなたは著者が数として表示されているそれぞれの投稿に気付くかもしれません。これは、WordPress APIが名前ではなく作成者IDを返すためです。このIDを使用して、著者情報のWordPressを照会する必要があります。私たちのPOST情報とともに、私たちのヴュエックスストアに保存する場所を作成することから始めましょう。 store / index.js. 。

状態：{
  著者：NULL、
  投稿：NULL}

14. getAuthorsアクションを作成します

投稿と同様に、私たちはそのinの行動を創造します /store/index.js. WordPress APIをクエリするためのAJAX要求をトリガーする。応答が成功したら、約束は解決してトリガーするでしょう。 StoreAuthors. 変異。次に作成します。

 getAuthors：関数（コンテキスト）{111
  axios.get（ 'http://lukeharrison.net/
  WebDesigner / WP-JSON / WP / V2 / USERS '）
  ···（関数（応答）{
  context.commit（ 'storeauthors'、
  response.data）
  ）

15. StoreAuthorsの突然変異を作成します

VUEXストアの突然変異オブジェクト内で、 StoreAuthors. 下のスニペットを使用した突然変異。と同じように倉庫ステップ8から、これは渡されたペイロードに渡され、それを私たちの店の状態の著者のプロパティの値として設定します。

 StoreAuthors（状態、応答）{
  State.Authors = Response}

16. LoadのgetAuthorsをトリガーします

アプリがロードされたらすぐにWordPressから作者情報を入手する必要があります。最上位のコンポーネントを修正しましょう app.vue. 再び派遣する getAuthors. action action 作成した（） のライフサイクルフック GetPosts. アクション。

 created（）{
  これ。$ store.dispatch（ 'getAuthors'）
   これ。$ store.dispatch（ 'getposts'）}

17. getUserNameメソッドを作成します

現在、著者情報のためのWordPressにロードに関するWordPressに照会することは、著者IDを渡して見返りに名前を取得できるようにする私たちの投稿コンポーネントのメソッドを定義することです。下のスニペットをPostsコンポーネントのメソッドオブジェクトにコピーしてください。 GetSinglePost. 方法。

 getUserName：関数（UserID）{
  var username = 'unknown';
  これ。$ store.state。
  authors.filter（関数（ユーザー）{
  if（user.id === userID）{
  username = user.name.
  }
  }）;）
  usernameを返します。

18. getUserNameメソッドを呼び出します

今私達はちょうど呼ばれる必要があります getUsername. 。それでもPOSTSコンポーネントのテンプレートで、著者属性の参照を参照してください。 author. それで、それは下のスニペットを反映しています。著者の名前は各投稿に正しく表示されるべきです。

：author = "getUsername（Post.author）"

ブログの積み込み

POSTデータを非同期的にロードすると、アプリケーションが空の場所が完了するまでの瞬間があります。これに対処するために、ブログが完全に取り込まれるまでアクティブなロード状態を実装します。 POSTSコンポーネントで、開口部の直後にスニペットを下に貼り付ける ＆lt;スクリプト＆gt; 使用するアイコンをインポートするタグ。

 '@ / components /アイコン/アイコンからアイコンをインポートする
'./../../からの読み込みの読み込み
資産/ img / loading.svg '

20.コンポーネントリストにアイコンを追加します

次に、POST以内に、コンポーネントオブジェクトのアイコンへの参照を追加します。これにより、ポストコンポーネントは最近インポートされたアイコンコンポーネントを認識します。

コンポーネント：{
   アイコン、
   ポスト}

21.ロードエレメントを作成します

これで、ページに表示されるように、ポストテンプレートにロード要素を追加する必要があります。まず、2つのDIVの周囲に2回目のDIVを巻きます。 V-IF ロードが完了するまで投稿が表示されていないことを確認するための指令。

その後、スニペットから最初のDIVを追加します。これにはロードアイコンとAが含まれています V-IF 指令。これは、アプリが完全にロードされているポイントまでにのみ表示されます。完了したら、ロードを実行する必要があります。

22.単一のPOST属性パスを更新します

唯一のことは、単一の投稿が正しく設定されていることを確認することです。最初のステップは、Postsコンポーネントテンプレート内の属性パスを更新することです。 v-if = "this.type === 'single'" 単一の投稿の表示を処理するDIV。

 'signpost.title'を 'signpost.title.rendered'にスイッチ
 スイッチ 'signpost.author'を 'getusername（signpost.author）'にスイッチ
 'signpost.fullimage'を 'signpost.acf.header_image'にスイッチ
 'ShignPost.Content'を 'SWINGPOSTに切り替えます。 content.rendered '

23.リファクタリングgetSinglePostメソッド

私達はまた投稿の部品をリファクタリングする必要があります GetSinglePost. 方法。それは派遣する約束を返す必要があります GetPosts. アクション。フォローアップで それから 関数、URLに渡されたものを渡すスラグを持つエントリのためにVuex Storeの投稿を検索します。見つかった場合は、データをコンポーネントのローカル状態にコピーして、約束を解決します。見つからない場合は、約束が拒否されます。

 getSinglePost：function（）{
   新しい約束を返す
   （（解決、拒否）= gt; {
  これ。$ store.dispatch（ 'getposts'）
  .then（（）=＆gt; {
  var foundpost = false;
  これ。$ store.state.posts。
  フィルタ（（POST）=＆gt; {
  if（post.slug ===
  これは。$ route.params.slug）{
  this.singlepost = POST;
  foundpost = true; }
  }）;）
  ファーストポスト？解決（）：拒否（）;
  ）
  ）

24. Refactor Post Created（）フック

次に、リファクタリングが必要です 作成した（） POSTSコンポーネントのライフサイクルフック。単一の投稿を表示する必要がある場合は、フックを呼び出す必要があります。 GetSinglePost. 前のステップから、そしてその約束が拒否された場合、ユーザーを404ページのページが見つかりません」ページに送信します。これは、ユーザーがURLに存在しないポストスラグを入力するシナリオを説明することです。

 created（）{
  if（this.type === 'single'）{
  this.getSinglePost（）。それから（null、（）=＆gt; {
  これ。$ router.push（{name： 'pagenotfound'}）
  }）;）
  }

25. V-IFディレクティブを追加します

最後のステップは、下のスニペットをPostコンポーネントに追加することです。 v-if = "this.type === 'single'" テンプレートのDIV。このディレクティブは、ローカルPOSTデータが利用可能にされたときにのみ表示されます。 GetSinglePost. メソッドが取り込まれます。これは、コンポーネントを時期尚早にレンダリングしてエラーを引き起こすことを停止することです。

 v if = "STIGHPOST"

26.アプリを構築します

コンソールで、すべてが作業しているように、キャンセルをキャンセルします。 NPM Run Dev. 新しいコンソールをコマンドまたは開き、以下のコマンドを実行して、独自のサーバーにアップロードするための本番用のバージョンを生成します。これはに表示されます dist ディレクトリ。

 NPMランビルド

この記事では、Creative Web Design Magazine - エキスパートチュートリアル、最先端のトレンド、無料リソースを提供しています。 Web Designerを購読してください。

続きを読む：

32最高の無料のWordPressテーマ
10トップワードプレスリソース
the 最高の無料のブログプラットフォーム