WordPressをヘッドレスCMSとして使用する

Sep 15, 2025

操作方法

私は双子の都市から見た話で頭のないCMSアプローチについて最初に聞いた。私は、オーサリングコンテンツとそれを見ることの間の懸念を分離するという考えが好きでした。

2019年の最高のWebホスティングサービス

私はすでに1台のサーバーがどれほど簡単に行くことができ、その上のすべてのサイトを取り出し、ハートストップパニックの数分または時間につながります（私の上に24がありました）。私はまた、モノリシックCMSベースのサイトがセキュリティ妥協を被って修理するために多くの努力を払うことができるかを見ました（それは私に2日以上無給の仕事を連れて行った）。の範囲で ウェブホスティング プロバイダのオプション、私たちのガイドをチェックしてください。

WordPress Webサイトの素晴らしい例

私はあなたのイメージ、オーディオ、ビデオファイルを速い配達用に最適化されたサーバー、オーディオ、ビデオファイルを保存できるCDNS（コンテンツ配信ネットワーク）の利点を見ました、そして、必要に応じてそれらの地域への迅速な配信のために世界中のそれらのファイルを複製することができます。あなたのウェブサイト全体がこのアプローチから利益を得ることができればどうなりますか？

必要になるだろう…

●インターネット接続を備えたコンピュータ（OBV）
●コードエディタ（ATOMまたはVSコード）
●コマンドラインシェル/端末
●Node.jsがインストールされている最近のバージョン（ダウンロード＆amp;インストールここに）
●コンテンツを取得するためのWordPressサイト。 1つ持っていない場合は、WordPress.comプラットフォームまたはこれを使用できます。 Heroku Build Pack. 。
●ソースファイル Githubから。

入門

WordPressはREST APIで箱から出てきて、それが私たちがあなたのデータを照会するために使用することです。だから私たちは本当に他に何かを必要としません！私たちのディスプレイサイトは私たちのコンテンツサイトとは完全に分離されているので、私たちは必要ない WordPressテーマ またはいくつかの（オプション）プラグインの外部の他のカスタマイズ。もちろん、あなたがしたい場合はこれらを追加することができます。

追加のコンテンツ領域のカスタムメタフィールドが必要な場合は例外です。あなたはおそらく高度なカスタムフィールドを使ってそうするように使っています。そのデータをWordPress APIに追加できます。このプラグインのインストール。

静的サイトジェネレータを使用してください

Use WordPress as a headless CMS: Gatsby starter screen — GATSBYのデフォルトスタータースクリーン

私たちのコンテンツソースがあるので、データを取得して静的サイトジェネレータを使用して表示しましょう。このレルムの選択の武器はガツビー JavaScriptで構築された優れた静的サイトジェネレータ。（これらを参照してください ウェブサイトビルダー サイトを構築するための簡単な方法のために選びます。）

あなたがあなたのJavaScriptのスキルを築く良い方法を探していて、いくつかのコードに立ち往生して反応することを学ぶためには、GATSBYがそうすることを試すことを強くお勧めします。私はそれと一緒に遊んで自分自身を学びました。

まず、GATSBYサイトを作成できるコマンドラインツールをインストールしましょう。

npm install -global gatsby-cli

これで、サイトを保持したいフォルダに移動してこのコマンドを実行します。

gatsby new blog

これにより、 'Blog'という新しいフォルダが作成され、Gatsbyとその依存関係をこのフォルダにインストールします。お気に入りのテキストエディタでこのフォルダを開きます。そこにたくさんのファイルがあるように思われるかもしれません。心配しないで、直接編集するだけです gatsby-config.js. 、 Gatsby-node.js. ファイル、および SRC 私たちのテンプレートが生きる場所です。

保存するファイルがたくさんある場合は、それはあなたのアップグレードの価値があります クラウドストレージ 。

私たちのコンテンツを得る

私たちが望む最初のステップは、WordPressサイトのAPIからコンテンツを取得することです。

それをするために、インストールするつもりです Gatsby-source-wordpress WordPress用のプリテッテンプラグイン。これは私がGatsbyが大好きな主な理由の1つを示しています - あなたはさまざまなさまざまなソースからあなたのデータを得ることができます。多くの静的サイトジェネレータはマークダウンファイルの使用に制限されていますが、GATSBYは非常に柔軟です。

Gatsbyのプラグインの生態系は非常に成熟しています。あなたのデータや多くの賢い機能が役に立つような巧妙な機能を得るための荷物もあります。

プラグインをインストールするには、このコマンドを使用して新しいGATSBYサイトに最初にディレクトリを変更します。 CDブログ 。

このコマンドを実行するようになりました。 NPMインストール - gatsbySource-wordpres. 秒

それが完了したら、gatsby-config.jsファイルを開く時が来ました。 Gatsbyがデフォルトで私たちに与えるようにすでに基本的な設定があることがわかります。ここでプラグインを設定するためにそれを構築するつもりです。

 module.exports = {
 サイトメタデータ：{
  タイトル： 'GATSBYのデフォルトスターター'、
 }、
 プラグイン：[
  「Gatsby-Plugin-React-Helmet」、
  {
   解決： "Gatsby-source-wordpress"、
   オプション：{
    BaseRurl： "My-Wordpress-Site.com"、
    プロトコル：「HTTPS」、
    HostingWpcom：false、
    USEACF：TRUE、
    searchandreplaceContenturs：{
     SourceUrl： "https://my-wordpress-site.com"、
     replactmacturell： "https://my-static-site.com"、
    }
   }、
  }、
 ]、

それはうまくいきましたか？

あなたはあなたの端末を開くことによって確認することができます Gatsbyの発展 そして何が起こるのかを見ます。警告する！あなたがあなたの設定を正しく持っていたとしても、とにかくいくつかの警告を受けるでしょう - これはまだ書かれていないコンテンツを探しているGATSBYになるかもしれません。

ブラウザにGATSBY-STARTER-DEFAULTを表示できるようになりました。

 <コード> http：// localhost：8000 /

サイトのデータとスキーマを調べるために、Graphiql、In-Browser IDEを表示します。

  http：// localhost：8000 / ___ GraphQL

開発ビルドは最適化されていません。生産ビルドを作成するには、Gatsbyビルドを使用してください。

GATSBYのデフォルトのスターラー（右）が得られているものではない場合は、WordPressサイトをサブドメインに入れていないことを確認してください。

今私達はhttp：// localhost：8000 /に行くことができます/私達のGATSBYサイトを見る！

データを照会できますか？

あなたはここにWordPressコンテンツがないことに気付いたかもしれません。これは、まだ何をすべきかどうするかをGatsbyに言わなかったからです。私たちがする前に、私たちが実際に私たちのコンテンツがGatsbyで利用できるようになったことを確認しましょう。そのために、このURLを参照してください。

  http：// localhost：8000 / ___ GraphQL

この組み込みツールはGraphiqlと呼ばれ、GATSBYのもう1つの秘密電力です。

GraphQLはRESTと似ています。それはデータを照会する方法です。しかし、GraphQLでは、あなたはあなたのデータとはるかに簡単に対話することができます。 Graphiql（GraphQLのためのビジュアルIDE）は、私たちにこれらのトリックのいくつかを示すことができます。左側のパネルで、次のように入力してみてください。

 {175
 allwordpresspost {
  エッジ{
   ノード{
    ID.
    スラッグ
    状態
    テンプレート
    フォーマット
   }
  }
 }

これはJSONのような少し見えるかもしれませんが、そうではありません。 1日がAPIと通信する方法として、一日が大幅に置き換えると思う新しいクエリ言語です。

GraphiqlでCtrl + Enterキーを押したときに何を得ましたか？あなたはうまくいけばあなたのWordPress投稿と画面の右側のページを見たことがあります。

私たちは実際に私たちの次のステップでこのクエリを使うつもりですので、それを便利にしてください！あなたがここにいる間、あなたがGraphiqlで取得できる他のデータを見たいかもしれません。それをしたい場合は、カーソルを移動してCtrl + SpaceやCtrl + Enterを入力してください。それは他のコンテンツグループを明らかにするでしょう。

だから、私たちは今Gatsbyの内容を持っています。次にそれを表示する必要があります。

投稿を表示します

Use WordPress as a headless CMS: Gatsby development 404 screen — Gatsby Development 404ページのすべてのWordPress投稿を表示

次の次のステップのために私たちはの利用をしています Gatsby-node.js. ファイル。

Gatsby-node.js. Gatsbyの "ノードAPI"と対話するために使用できるファイルです。ここでは、あなたのサイトの生成方法とページ、投稿などを作成する方法を制御できます。

私たちはここにいくつかの指示を書くつもりです。

このコードは、GraphQLクエリからページを作成し、それぞれのページに対して、定義したテンプレートを使用します（ /src/templates/post.js. ）。次に、そのファイルを作成する必要があります。

投稿テンプレートを作成してください

/ src /フォルダの内側に、テンプレートと呼ばれるフォルダとその中のファイルを作成します。 Post.js. 。このコードを追加します。

インポートが 'reat'から反応する
'React-Helmet'の輸入ヘルメット

Class PostTemplateはReactOk.Componentを拡張します。
 render（）{
  const post = this.props.data.wordpresspost。
  const slug = this.props.data.wordpresspost.slug;

  帰り（
   ＆lt; div＆gt;
   ＆lt;ヘルメットタイトル= {`$ {titlestring} | $ {siteTitle} `} / gt;
   ＆lt; h1 and {{__html：post.title}} / gt;
   ＆lt; div DangernySetInnerHtml = {{__html：post.content}} / gt;
   ＆lt; / div＆gt;
  ）
 }
}

デフォルトのPageTemplateをエクスポートします

エクスポートconst query = graphql`
 クエリCurrentPost（$ ID：String！）{
  WordPresspost（ID：{EQ：$ ID}）{
   題名
   コンテンツ
   スラッグ
  }
  地点 {
   sitemetadata {
    題名
   }
  }

これは、異なるGraphQLクエリを使用して、それがフィードされている特定の記事に関するデータを取得します。 gatsbynode.js. ファイルを使用してから、Rectを使用してブラウザに表示されます。

あなたがすぐにあなたの投稿のリストをすばやく見ることができれば、あなたはタイプすることができます http：// localhost：8000 / A. ブラウザのアドレスバーに。これにより、POSTのすべてがリストされている開発404ページに移動します。それを訪問するにはクリックしてください！

次のステップ

私たちはWordPressをヘッドレスのCMSとして使用する方法の表面を傷つけました。

この物語と私の同僚にもっとたくさんあります、そして私はそれについて広くブログを付けましたインディゴツリー。私は私の個人的なブログにももっと書かれました、おいしいリバイ。

ヘッドレスCMSの世界でもっとエキサイティングな動きを聞くために、それらのチャンネルやTwitterで私と連絡を取り合ってください！

この記事はもともと第308号に発行されました ネット Webデザイナーや開発者向けの世界で最も売れている雑誌。 ここに発行308を購入してください または ここで購読する 。

関連記事：

40ブリリアントのWordPressチュートリアル
WordpressでCRO成功のための6つの上のヒント
デザイナーのための10の素晴らしいWordPressプラグイン

WordPressをヘッドレスCMSとして使用する

入門

静的サイトジェネレータを使用してください

私たちのコンテンツを得る

それはうまくいきましたか？

データを照会できますか？

投稿を表示します

投稿テンプレートを作成してください

次のステップ

操作方法 - 最も人気のある記事

首と肩を描く方法

Photoshopで昼夜を変える方法

シンプルカラーチャートを作成する

JavaScriptで誤ったテキスト効果を作成する

Slick UIアニメーションを作成する

濡れた図を描く方法

印象派のような塗料

ハーレー・クインを描く方法

カテゴリ