新しいGatsbyソースWordPressプラグインを使用します

以前の記事で、GatsbyのソースWPGRAPHQLプラグインを使用して、Decouppress Powered Gatsbyサイトを作成する方法を学んだ方法について説明しました。このプロジェクトは、WPGRAPHQLの進行中の発達版とHenrik Wirthによる優れたチュートリアルに続いて行われました。当時の一部の生産サイトではWPGRAPHQLが使用されていましたが、壊れた変化をもたらす多くの反復がありました。昨年11月にWPGRAPHQL v1.0がリリースされて以来、プラグインはWordPressプラグインディレクトリを介して安定しています。

WPGRAPHQLプラグインを使用して、コンテンツ管理にWordPressを使用するサイトを作成できますが、Gatsbyが駆動するフロントエンドを使用します。サイトのバックエンドとフロントエンドは、フロントエンドのコンポーネントがCMSからデータを消費するAPIを介して互いに通信する別々のエンティティであるため、これを「分離」または「ヘッドレス」CMSと呼びます。

WPGRAPHQLプラグインサイトには、開始するための段階的な段階的なドキュメントがあり、リリースの発表には、プラグインを使用した生産レベルのサイトの9つの例がリストされています。

「分離された」または「ヘッドレス」サイトの本当の意味では、WPGRAPHQLを使用して、WordPressデータをNext.js、vue.jsなどの他のフレームワークに移植することができます。 Gatsbyフレームワークの場合、GatsbyソースのWordPressプラグインが推奨され、WPGRAPHQLを使用してWordPressのデータを調達します。

すべてを一緒にセットアップして、プラグインをツアーしましょう。

前提条件

私の前の記事では、WordPressとGatsbyのサイトを設定し、バックエンドのWordPressデータをGatsbyを搭載したフロントエンドサイトにサイトの展開で移植するために必要な前提条件について説明しました。この記事では基本的な概念が同じであるため、これらの詳細の多くをスキップしています。

あなたがギャツビーに初めてで、今ギャツビーの生成された静的サイトジェネレーターバンドワゴンに飛び込んでいる場合は、Reactの専門家であるDavid CramerとJared Palmerの「Gatsby vs Next.js」による「Gatsbyの正直なレビュー」を読むことをお勧めします。私たちがカバーしようとしていることは誰にとってもそうではありません。これらの記事は、それがあなたとあなたのプロジェクトに適した技術であるかどうかを自分で評価するのに役立つかもしれません。

WPGRAPHQLまたはGRAPHQLは、Gatsbyのフレームワークで使用される主要なクエリ言語APIです。 GraphQLには頻繁に更新があり、多くの場合、専門家の知識を必要とし、変化を破ることに目を光らせています。結局のところ、GraphQLは、他のReactの専門家向けにReactの専門家によって設計されています。とはいえ、いくつかのトラブルシューティングの指示と、WPGRAPHQLとGatsbyの両方のソースWordPressプラグインの両方の著者が積極的に参加し、質問に答えるのを助けるWPGRAPHQLスラックがあります。

この記事は、GatsbyソースのWordPressプラグインの使用方法に関する段階的なガイドではありません。繰り返しますが、それはすでにギャツビーの文書で入手できます。逆に、React、JavaScript、Node.js、またはGraphQLの専門家である場合、ここでカバーするのは、おそらくあなたがすでに知っているものです。この記事は、私の個人的な経験に基づいた意見の記事です。これは、このテーマに関する基本的な実用的な知識を持つ平均的なWordPressユーザーに役立つことを願っています。

また、開始する前に、GatsbyソースのWordPressプラグインがバージョン4で完全に書き換えられ、WPGRAPHQLをデータソースとして使用していることに言及する価値があります。以前のリリースであるバージョン3は、データソースとしてREST APIを使用して構築されました。プラグインの安定したバージョンが最近リリースされたため、それをサポートするスターターのテーマとデモの数は限られています。

まず、WordPressが必要です

このプロジェクトでは、デフォルトの20のテーマを使用するフライホイールのローカルで新鮮なWordPressサイトを設定しました。 WordPress Codexに記載されているように、ページと投稿のテーマ単位テストデータをインポートしました。これは私が働いていたベースラインでしたが、これはリモートサーバーまたはローカルインストールのいずれかにある既存のWordPressサイトである可能性があります。

確立されたベースラインができたので、WordPress管理者にログインして、必要なWPGRAPHQLおよびWPGATSBYプラグインをインストールしてアクティブ化できます。

前の記事で説明したように、これがWordPress管理者にGraphQLとWPGraphiQL APIを公開することで、WordPressデータに基づいてGraphQLクエリをテストするための「遊び場」を作成できるようになります。

これで、ギャツビーのフロントエンドが必要です

ギャツビーは、優れたドキュメントと堅実なスターターテンプレートで有名です。新しいWordPressを搭載したサイトを作成するために、Gatsbyのチュートリアルは、スターターを使用するか、ゼロから始めることは私たちがしていることにぴったりであることを示唆しています。

Gatsbyは、特定のテクノロジーを中心に構築された基本的なユースケースのためのWebサイトの例のライブラリも提供しています。現在、WordPressを使用するものと、Advanced Custom FieldsプラグインでWordPressを使用するものがあります。ライブラリのサイトの例は、まだGatsby-Source-Source-Wordpressプラグイン3を使用しており、この執筆時点でまだバージョン4に更新されていないことに注意してください。

Gatsbyのチュートリアルによると、WordPressを搭載したGatsbyサイトを作成するには3つのオプションがあります。それぞれを見てみましょう。

オプション1：ギャツビーのスターターの使用

ドキュメントには、WordPress-Gatsbyサイトのセットアップ方法に関する段階的なガイドがありますが、ここに要点があります。

コマンドラインで以下を実行して、GitHubリポジトリからスターターを取得し、My-WPStarterプロジェクトフォルダーにクローン化します。

 ＃！クローンスターターリポジトリ
Gatsby New My-wpstarter https://github.com/gatsbyjs/gatsby-starter-wordpress-blog

次に、NPMパッケージをインストールします

＃！ npm
NPMインストール

＃！または糸
糸インストール

スターターがクローン化されたので、コードエディターでGatsby-config.jsファイルを開き、WordPressエンドポイントからデータを取得するURLオプションを更新しましょう（上記参照）。

 // gatsby-config.js
{
  解決：gatsby-source-wordpress、
    オプション：{
     // wordpressはgraphql urlです。
     url：process.env.wpgraphql_url || https://wpgatsbydemo.wpengine.com/graphql、
  }、
}、

次に、スターターのデータソースエンドポイントURLを独自のWordPressサイトURLに置き換えます。

 // gatsby-config.jsファイル
{
  解決： `gatsby-source-wordpress`、
  オプション：{
    URL： `http：// gatsbywpv4.local/graphql`、
  }、
}、

My-WPStarterプロジェクトディレクトリにいることを確認しましょう。プロジェクトフォルダーから、Gatsby Developコマンドを実行して、WordPressデータソースエンドポイントから新しいGatsbyサイトを構築します。ターミナルでは、途中でエラーや成功したサイトプロセスを含むデータを取得するGatsby-Source-Wordpressプラグインを見ることができるはずです。

最後に成功ビルディング開発バンドルメッセージが表示された場合、Gatsbyサイトビルドプロセスが完了し、サイトをhttp：// localhost：8000で表示できます。

これは、基本的なファイルといくつかのコンポーネントを備えたベアボーンスターターブログです。ファイル構造は、Gatsby-Starter-Blogに非常に似ていますが、Blog-post.jsやblog-post-achive.jsテンプレートファイルを含むテンプレートフォルダーがあります。

http：// localhost：8000/___ graphqlでGraphiQL APIエクスプローラーを表示すると、WPGRAPHQLによって公開されたWordPressのすべてのデータが表示され、UIから特定のデータをクエリして取得できます。

あなたはそれを手に入れました！ギャツビーは、プレゼンテーションのためにWordPressデータを引き込むギャツビーコンポーネントを使用して、残りが私たち次第であると考えています。

オプション2：ゼロから構築

Gatsbyのドキュメントでは、Gatsbyのデフォルトスターターテーマを使用して、新しいWordPress-Gatsbyサイトをゼロから作成する方法に関する詳細なステップバイステップガイドを提供します。

コマンドラインから新しいプロジェクトをスピンアップします。

 ＃！新しいギャツビーサイトを作成します
Gatsby New WPGatsby-From-Scratch-Demo

これにより、スターターテーマを含むwpgatsby-from-scratch-demoフォルダーが得られます。ここから、そのフォルダーにCDを入れて開発を開始します。

 CD WPGATSBY-FROM-SCRATCH-DEMO
ギャツビーが発展します

これで、ブラウザでhttp：// localhost：8000を開き、ウェルカムページを取得できます。

今、私たちはWordPressサイトからデータを取得し始めることをお勧めします。 Gatsbyソースプラグインをインストールしましょう。

 ＃！ RPMにインストールします
npm gatsby-source-wordpressをインストールします

＃！糸でインストールします
糸はギャツビーソースワードプレスを追加します

ブラウザをチェックすると、何も起こらないことに気付くでしょう。同じギャツビーの歓迎を受けています。 WordPressサイトデータを取得するには、Gatsby-Config.jsファイルにプラグインを追加する必要があります。ファイルを開き、次を挿入します。

 // gatsby-config.js
module.exports = {
  sitemetadata：{
    // ...
  }、
  プラグイン：[
  // gatsby-source-wordpressプラグインを追加します
  {
      解決： `gatsby-source-wordpress`、
      オプション：{
        /*
         * WordPressサイトのGraphQL APIの完全なURL。
         *例： 'https：//www.example-site.com/graphql'
         */
        URL： `http：// gatsbywpv4.local/graphql`、
       }、
     }、
    // Gatsby-Source-Wordpressには、次のプラグインは必要ありません。
  ]、、
}

前回と同じように、WordPressデータエンドポイントソースをWordPressサイトのURLに変更する必要があります。ターミナルでギャツビー開発を開始して、物事を開始しましょう。

ただし、ブラウザでhttp：// localhost：8000を開くと、何も起こらないようです。まだ同じウェルカム画面が表示されます。しかし、ブラウザで（http：// localhost：8000/___ graphqlでGraphIQLを調べると、すべてのWordPressデータがGatsbyサイトに公開されていることがわかります。

GatsbyQL Explorerで、Gatsbyのチュートリアルから直接引っ張った次のクエリをテストしましょう。

クエリ{
  allwppost {
    ノード{
      id
      タイトル
      抜粋
      ナメクジ
      日付（フォーマットストリング： "mmmm dd、yyyy"）
    }
  }
}

上記のクエリを実行すると、ID、タイトル、抜粋などのサブプロパティを備えたAllWppost.nodesプロパティ値が表示されます。

次に、SRC/コンポーネント/ページ/index.jsコンポーネントファイルを開き、コードをこれに置き換えましょう。

 // src/コンポーネント/ページ/index.js
「反応」からの輸入反応
「gatsby」から{graphql}をインポート
「../components/layout」からレイアウトをインポートする
"../components/seo"からseoをインポートします

デフォルト機能ホームをエクスポートする（{データ}）{
  戻る （
    
      <seo title="home"></seo>
      <h1 id="私のWordPressブログ">私のWordPressブログ</h1>
      <h4 id="投稿">投稿</h4>
      {data.allwppost.nodes.map（node =>（
        <div>
          <p> {node.title} </p>
          <div dangersetiennerhtml="{{__html：node.excerpt}}"></div>
        </div>
      ））}
    
  ））
}

const pagequery = graphql`をエクスポートします
  クエリ{
    allwppost（sort：{fields：[date]}）{
      ノード{
        タイトル
        抜粋
        ナメクジ
      }
    }
  }
`

保存し、Gatsbyの開発でサーバーを再起動し、ページを更新します。ビルドが成功した場合、サイトのホームページはWordPressからソートされたブログ投稿のリストを表示する必要があります。

チュートリアルに従って、各ブログ投稿のページを作成し、リストから投稿ページに投稿タイトルをリンクしましょう。 Markdownデータを使用してページを作成するプロセスについては、Gatsbyの基礎チュートリアルのパート7で詳しく説明しています。これについても説明します。

チュートリアルで説明されているように、GatsbyはCreatePages API、または「workhorse」APIと呼ばれるものを使用して、データから（MarkdownまたはWordPressから）プログラムでページを作成します。 Markdownデータとは異なり、各WordPress投稿にはWordPressデータエンドポイントから取得できる独自のスラグがあるため、ここでスラッグを作成する必要はありません。

各投稿のページを作成します

Gatsbyは、プロジェクトのルートにあるGatsby-Node.jsファイルを使用して、プログラムでブログ投稿を作成します。 Text EditorでGatsby-Node.jsファイルを開いてみましょう。チュートリアルから次のコードを追加します。

 // gatsby-node.js 
const path = require（ `path`）

exports.createpages =（{graphql、action}）=> {
  const {createpage} =アクション
  graphqlを返します（ `
    {
      allwppost（sort：{fields：[date]}）{
        ノード{
          タイトル
          抜粋
          コンテンツ
          ナメクジ
        }
      }
    }
  `）.then（result => {
    console.log（json.stringify（result、null、4））
    process.exit（）
  }）
}

Gatsbyパート7チュートリアルで述べたように、上記のコードは、WordPressデータソースから投稿ページを作成する最初の部分です。ガイドに従って、サーバーを再起動し、Gatsbyの開発でサイトを開発しましょう。

ページがビルドされているときに、端末にconsole.log出力が表示されます）。しかし、私たちのホームページはまだ同じように見えます。単一の投稿を作成するには、ギャツビーはページを構築するためのテンプレートを必要とします。これを次のステップで作成します。それが次に行うことです。

ブログ投稿テンプレートの作成

SRC/ディレクトリにSRC/コンポーネント/テンプレートフォルダーを作成し、チュートリアルから次のコードスニペットを貼り付けてBlog-post.jsファイルを作成しましょう。

 // src/templates/blog-post.js
「反応」からの輸入反応
「../components/layout」からレイアウトをインポートする
「gatsby」から{graphql}をインポート

デフォルト機能BlogPost（{data}）{{
  const post = data.allwppost.nodes [0]
  console.log（post）
  戻る （
    
      <div>
        <h1 id="post-title"> {post.title} </h1>
        <div dangersectinnerhtml="{{__html：post.content}}"></div>
      </div>
    
  ））
}
const query = graphql`をエクスポートします
  クエリ（$ slug：string！）{
    allwppost（filter：{slug：{eq：$ slug}}）{
      ノード{
        タイトル
        コンテンツ
      }
    }
  }
`

チュートリアルで説明されているように、上記のコードスニペットは、SRC/Components/layout.jsコンポーネントの周りにReact JSXとPost.TitleおよびPost.Content（行12-13）をラップして単一の投稿を作成します。ファイルの下部セクションでは、GraphQLクエリが追加され、Post Slug Variable $ Slugに基づいて特定の投稿を呼び出します。この変数は、ページがgatsby-node.jsで作成されたときにブログpost.jsテンプレートに渡されます。

次に、チュートリアルから次のコードを使用して、Gatsby-Node.jsファイルの行12-13を更新する必要があります。

 // gatsby-node.js
const path = require（ `path`）

 exports.createpages =（{graphql、action}）=> {
   const {createpage} =アクション
   graphqlを返します（ `
     {
       allwppost（sort：{fields：[date]、order：dec}）{
         ノード{
           タイトル
           抜粋
           コンテンツ
           ナメクジ
         }
       }
     }
   `）.then（result => {
    result.data.allwppost.nodes.foreach（node => {
        createpage（{
          パス：node.slug、
          コンポーネント：path.resolve（ `。/src/templates/blog-post.js`）、
          コンテクスト： {
            //これは、blog-post.jsに渡された$ slug変数です
            ナメクジ：node.slug、
          }、
        }）
      }）
   }）
 }

Gatsbyで停止してローカルサーバーを再起動し、サイトを開発して表示しましょう。ブログ投稿リンクのリストが記載されたホームページは表示されません。ただし、http：// localhost：8000/abcdfに確認すると、個々のページと投稿リンクのリストが付いた次の404ページが表示されます。

http：// localhost：8000/hello-gatsby-worldを確認する場合、「ハローギャツビーワードプレスワールド」の投稿をすべて栄光にします。

次のステップは、ホームページからの投稿タイトルを実際の投稿にリンクすることです。

ホームページからの投稿にリンクします

ホームページからの作業をリンクすることは、index.jsファイルの投稿タイトルをギャツビーのリンクコンポーネントで締めくくることで行われます。以前に作成したindex.jsファイルを開き、リンクコンポーネントを追加しましょう。

 // src/コンポーネント/ページ/index.js
「反応」からの輸入反応
「gatsby」から{link、graphql}をインポート
「../components/layout」からレイアウトをインポートする
"../components/seo"からseoをインポートします

デフォルト機能ホームをエクスポートする（{データ}）{
  戻る （
    
      <seo title="home"></seo>
     {/* <h1 id="私のWordPressブログ">私のWordPressブログ</h1>
      <h4 id="投稿">投稿</h4> */}
      {data.allwppost.nodes.map（node =>（
        <div key="{node.slug}">
          <link to="{node.slug}">
            <h2 id="node-title"> {node.title} </h2>
          
          <div dangersetiennerhtml="{{__html：node.excerpt}}"></div>
        </div>
      ））}
    
  ））
}

const pagequery = graphql`をエクスポートします
  クエリ{
    allwppost（sort：{fields：[date]、order：dec}）{
      ノード{
        タイトル
        抜粋
        ナメクジ
      }
    }
  }
`

Gatsbyからリンクコンポーネントをインポートし、リンクコンポーネントで投稿タイトルをラップし、ポストのナメクジを参照しました。ページタイトルにコメントし、タイトル要素を

に変更し、Gatsby-node.jsファイルと同様にgraphql queryにsorted投稿の注文をDECに追加して、コードをクリーンアップしましょう。

先ほど行ったように、Gatsbyの開発で開発サーバーを停止して再起動し、http：// localhost：8000でホームページを表示しましょう。投稿タイトルは、単一の投稿ページにリンクする必要があります。

これは、この2番目の方法をとる限りです。私たちがカバーする残りの部分では、メニュー項目を取得し、カスタム投稿タイプなどの他のデータ型をクエリする方法を説明し、増分ビルドやプレビューなどを構成します。

同じ手順を、ページの呼び出しと作成、カスタム投稿タイプ、カスタムフィールド、分類、およびWordPressが知られているすべての楽しく柔軟なコンテンツに適用できます。これは、あなたが望んでいるのと同じくらいシンプルまたは複雑なことができるので、それを探索して楽しんでください！

- Gatsbyチュートリアルドキュメント

オプション3：GatsbyのWordPress Twenty20スターターの使用

デフォルトのWordPress Twenty 20テーマのギャツビーのスターターテンプレートは、ヘンリックワースによって作成および維持されています。このスターターは、他のスターターとは異なり、実際にGatsbyソースプラグインのバージョン4に更新され、ドキュメントで説明されている最初のWordPressセットアップの後、箱から出して作業します。ギャツビーのフロントエンドサイトで同じ20のスタイリングを維持していますが、サポートされていないコメント、毎月のアーカイブページ、タグなど、制限はほとんどありません。

まず、222星のフォルダーのスターターをクローンしましょう。

 ＃！ Clone Gatsby-Starter-Wordpress-20 
Gatsby New 212 starter https://github.com/henrikwirth/gatsby-starter-wordpress-2020

そのフォルダーにCDを使用してから、Gatsby開発を実行してサイトをスピンアップします。 env.exampleファイルでWPGRAPHQL_URL値をまだ変更していないため、初めて正しく機能しません。ドキュメントで提案されているように、.env.exampleからファイルの名前を.env.exampleからsiste.envに変更する必要があります。

その後、Gatsbyの開発で開発サーバーを再起動します。サイトを正常に構築する必要があります。

メニューは、WordPressメニューの名前に応じて表示される場合と表示されない場合があります。メニュー項目をクエリするためのスターターのメニュースラッグは、Menu.js（8行目）のプライマリです。代わりにメインメニューを使用してWordPressサイトを設定していたため、それに応じてmenu.jsファイルを更新する必要がありました。

スターターは私たちのツールの古いバージョンでテストされたため、プラグインを最新のバージョン（WPGRAPHQL 1.2.6、WPGATSBY 1.0.6、およびGatsby Source WordPress 4.0.1）に押し上げることにしました。

20のスターターは、21のギャツビーのテーマのファイル構造と、ギャツビーのスターターWordPress Advancedに続きます。 Henrik Wirthは、TutorialでMuhammad Muhsinと同様に、WordPressデータが彼の段階的なガイドでギャツビーにどのように移植されるかを説明しています。それ以外の場合、ページ、ページテンプレート、ポーティングメニュー項目の作成はまったく同じです。

このスターターは、デフォルトのWordPress Twenty Themesが行うのと同じCSSと、フォント、画像、SVGファイル、およびデフォルトのテーマに含まれるその他のファイルを含む同じアセットフォルダーを使用します。

WordPress Twenty 20スタイリングに満足しているなら、それだけです。新しい分離されたギャツビーサイトをお楽しみください！

しかし、カスタムスタイルで作業したいとしましょう。 CSSファイルは、gatsby-browser.jsファイルを介してAssetsフォルダーからインポートされます。

サイトのヘッダー、フッター、投稿、ページのスタイルを変更しましょう。 Gatsbyはさまざまなオプションを提供してコンポーネントをスタイリングします。このプロジェクトでは、CSSモジュールに従って、スタイリングおよびTwenty 20スターターコンポーネントのCSSマークアップを修正しました。

SRC/コンポーネント/スタイルでスタイルフォルダーを作成し、内部ではベースフォルダーを作成することから始めます。これが私たちが目指している一般的なファイル構造です：

 ＃！ /スタイルフォルダーの部分構造
SRC
 |  - /コンポーネント
   |  - /スタイル
     | -main.css          
     |  - /base
       | -reset.css
       | -variables.css
     |  - /scss
       | -header.module.css
       |  -  mainnav.module.css
       | --footer.module.css
       | -elements.module.css
       // 等々...

サイトのヘッダーとフッターをスタイリングしたいので、スターターのheader.jsとfooter.jsコンポーネントを開き、コードを次のように置き換えましょう。

 // src/components/header.js
「反応」からの輸入反応
「gatsby」から{graphql、link、usestaticquery}をインポート
「./menu」からメニューをインポートします
"../styles/scss/header.module.css"からのインポートスタイル
'../images/gatsby-icon.pngからロゴをインポートする

const header =（）=> {
  const {wp} = uesestaticquery（graphql`
    {
      wp {
        将軍{
          タイトル
          説明
        }
      }
    }
  `）
  戻る （
    <header classname="{style.masthead}">
      <div classname="{style.masthead_info}">

      <to>にリンクします
        <img src="%7Blogo%7D" alt="logo"    style="max-width:90%"  style="max-width:90%" display="inline-block" marginbottom="0" classname="{style.site_logo}">>
      
      <div classname="{style.site_header}">
        <div classname="{style.site_title}">
          
        </div>
        <div classname="{style.site_description}" dangersedsetinnerhtml="{{__html：wp.generalsettings.description}}"></div> 

      </div>
      
    
  ））
}

デフォルトヘッダーをエクスポートします<p>同様に、footer.jsコンポーネントは次のように変更されました。</p>
<pre rel="JavaScript" data-line=""> // src/components/footer.js
「反応」からの輸入反応

"../styles/scss/footer.module.css"からのインポートスタイル

export default（）=>（
  <footer classname="{style.colophon}">
    <p>©{new date（）。getFullyear（）} |このサイトは{''} <a href="https://www.gatsbyjs.org"> gatsbyjs </a> {'および'} <https:> wordpress 
  </https:></p></footer>
））

次に、開発サーバーを再起動しましょう。新しいカスタマイズされたヘッダーとフッターを含む以下を見る必要があります。MortenRand-HendriksenのオンラインコースであるLearning Gatsbyから同じスタイルを使用しました（私はファンです！）。

GitHubで使用したすべてのコードをつかむことができます。

WordPress愛好家にとってこれが何を意味するのか

私たちが取り上げたギャツビーの例のように、分離されたWordPressとJamstackサイトの利点と短所を比較する多くの投稿があります。私の研究では、クリスが「WordPress and Jamstack」ですでに書いたものほど網羅的ではないことに気付きました。そこでは、パフォーマンスや機能から開発者のエクスペリエンス、プロセスの構築など、すべてを比較しています。

以下の記事は、次のようなさまざまなトピックについて有益な結論をいくつか描いていることがわかりました。

費用はいくらですか？

一般的な仮定は、Jamstackホスティングは安価で、従来のランプスタックホスティングよりも安いということです。しかし、実際には考慮すべきかなりありますが、実際のコストは異なる場合があります。

• 「ローカル、ギャツビーでWordPressサイトを実行し、Netlifyを無料で実行する方法！」 （ネイトフィッチ）：ネイトのテイクは、プロジェクトが静的なブログまたはインタラクションを必要としないサイトである場合、このようなヘッドレスのワードプレスセットアップが良いオプションかもしれないということです。たとえば、Cloudinaryや別のCDNで画像をホストするのにあまり作業が必要ではありませんが、大規模でインタラクティブなサイトではそうなります。
• 「WordPress and Jamstack」 （Chris Coyier）：ここには、ChrisがJamstackサイトのさまざまな種類のホスティングの価格設定を分解し、実際のコストがサイトとその使用に依存するため、「Jamstack is soper」などのブランケットステートメントが飛んでいない理由があります。
• （Zell Liew）による「Netlify、Vercel、Digital Oceanの選択」 ：Zellは、ホスティング計画を選択した経験について話し合います。彼の見解：小さなプロジェクトがある場合は、netlifyを使用してください。より大きなプロジェクトがある場合は、Digital Oceanを使用してください。

なぜ静的になるのですか？

WordPressの「無料」のために得られるすべてのものを考慮してください - コメント、プラグイン、統合などを考えてください。彼の「静的かどうか？」投稿、クリスは、他の人よりも選択したい理由を分解します。

コメント機能をどのように取得できますか？

WordPressでネイティブのコメントを箱から出してコメントします。しかし、静的サイトでのコメントのサポートは少しジャガーノートです。 CSS-Tricksの「Jamstack Contume」では、著者は、Gatsbyのような静的サイトでNetlify Servicesを使用して動的なコメントをどのように実装できるかを説明しています。前の記事で簡単にこれについて触れました。

SEOはどうですか？

• 「WPGRAPHQLとYoastのGatsby SEO」 （Gatsby Community Plugin）：WordPress用に広く使用されているYoast SEOプラグインは、このプラグインを使用してGatsbyフロントエンドに統合できます。
• 「WordPressのJavaScript SEOの入門書」 （Jono Alderson）：この徹底的なガイドには、Yoast SEOをヘッドレスアーキテクチャに統合する方法と、SEOのJavaScriptに依存することの意味についてのセクションが含まれています。一番下の行は、テーマとプラグインの開発者が、ベストプラクティスを続けている限り、JavaScriptとSEOの景観の変化についてあまり心配する必要はないということです。同時に、彼らは何が変化しているかを認識し、それに応じて適応する必要があります。

物事はどのように一緒に働きますか？

• 「GutenbergとDeaupledアプリケーション」 （Jason Bahl）：JasonはWPGRAPHQLの作成者およびメンテナーであり、デカップルされたアプリケーションで新しいWordPressブロックエディターを使用することを深く掘り下げます。
• 「WebのオペレーティングシステムにおけるWPGRAPHQLの役割のJason Bahl」 （YouTube）：Jasonが再びテンプレートについて議論しています。彼は、WPGRAPHQLのWPGRAPHQLの役割をカバーし、WPGRAPHQLはWordPress REST APIのようにデータ露出に関するものであることを強調しています。 WPGRAPHQLがGatsbyのWordPressデータを公開し、フロントエンドのReactコンポーネントに表示する方法は、開発者次第です。

現在、非開発者向けのGatsby Reactテンプレートはありませんが、Gatsby WPテーマやThemeforest Marketplaceなどの一部の機関はギャップを埋め始めています。たとえば、Gatsby WPテーマは、MailChimp統合などの動的なコンテンツのプラグインをカバーしています。 TheMeforestには、ギャツビー - WordPress Ecommerceテーマを含む30のGatsbyテンプレートがリストされています。覚えておいてください：これらは商業サイトであり、あなたが見つけるものの多くにはそれにコストが付いています。

私の進化する個人的なテイク

あなたが覚えているなら、私は最後の記事を終了し、私の旅についての個人的な反省で、ギャツビーをフロントエンドとして使用するヘッドレスのWordPressサイトを作成しました。私の最初のテイクは、輝くレビューよりも少なかった：

私の非常に限られた経験に基づいて、現在利用可能なGatsby WordPressのテーマは、私のようなユーザーにとってプライムタイムの使用ができていないと思います。ええ、多くのWordPressユーザーや開発者の心の中にある出血エッジで何かを試すことはエキサイティングです。同時に、WordPressブロックエディターで行われている常に進化する作業であるWPGRAPHQLおよびGATSBYソースWordPressプラグインは、物事がどこに向かっているのか、いつ他のコンテキストで安全に使用できる状態に落ち着くかを予測することを困難にします。

それで、この結局のところ、ヘッドレスのWordPressサイトへの私の長い旅の後、私の今の私の見解は何ですか？心のこもった学習者として、私の考えはまだ進化しています。しかし、私はクリスが彼の「静的かどうか」で言っていることにこれ以上同意することができませんでした。役職：

WordPressサイトを実行するのは、完全に受け入れられ、しばしば賢い選択です。堅牢性と特徴の読み物の観点から考えています。 eコマースが必要ですか？そこにあります。フォームが必要ですか？素晴らしいプラグインがあります。 CMSの仕組みを強化する必要がありますか？コンテンツの種類とその中にあるコンテンツを制御できます。認証が必要ですか？それがコア機能です。素晴らしい編集体験があればいいですか？グーテンバーグは輝かしい。

私はWordPress愛好家であり、CMSとしてWordPressが大好きです。しかし、技術学習の課題として、私はまだ個人プロジェクトとしてワードプレスサイトを分離したことをあきらめていません。

WordPressを使用してDecoupled Gatsbyサイトを作成することを学ぶことは、引き続きイライラし続けていることを認めなければなりません。私は、多くのWordPressユーザーにとって、最新のテクノロジースタックは「お茶」ではないことを認めています。これらのスタックは経験豊富なReactとJavaScript開発者を対象としているため、Gatsbyは急な学習曲線を持っています。

自己学習新しいテクノロジーは、イライラする経験になる可能性があります。ギャツビーの学習は、（本当にあなたのものを含む）ノード、React、JavaScript、そして最も重要なことにGraphQLの経験がなかった場合、特にイライラします。私の学習プロジェクトサイトは、何らかの依存関係と修正のために壊れます。トラブルが結果に値するかどうか疑問に思うことがあります。誤解しないでください。私の欲求不満は、フレームワーク自体ではなく、私自身の経験の欠如にあります（驚くべきものだから）。

David CramerやJared Palmerなどの経験豊富な開発者でさえ、GatsbyとGraphQLを使用してイライラし、GraphQLを使用するときに初心者が直面するのと同じ感情のいくつかをエコーし​​ます。私は次のように書いているデビッドにこれ以上同意することができませんでした：

静的なWebサイトジェネレーターです。文字通り、あちこちでgraphqlは必要ありません。現実の世界には価値があるインスタンスはほとんどありませんが、すでにメモリにあるオブジェクトを読み取るためにGraphQL APIを必要としないはずです。

GraphQLは意見のクエリ言語APIであり、その仕様は頻繁に変更されます。実際、WPGRAPHQLスラックでの議論のほとんどは、クエリに関連しています。

このプロジェクトに取り組んでいる間、CSS-Tricksに関する記事を読んでいる間、Frontity Reactフレームワークを越えました。単一のクエリを書くことなく、すべてのWordPressデータをREST APIで取得します。少なくとも私のユースケースにとっては、それはより良い選択肢のようです。さらに、はるかに単純な代替品のようです。私の簡単な経験では、依存関係や図書館の問題にまったく対処する必要はありませんでした。 Frontityのテーマの概念はWordPress-Yであり、優れたチュートリアルを提供します。

私は現在、Frontity Frameworkが私の分離プロジェクトサイトにとってより良い選択肢であり、今後の記事で私の経験を共有するかどうかを調査しています。

リソース

ギャツビーは、私のような初心者向けではなく、経験豊富なReactとJavaScriptの開発者を対象としていると感じています！ Gatsby-Source-WordpressとGatsby-Source-WPGraphQLプラグインは、WordPressデータをGatsbyサイトに公開するという優れた仕事をしていますが、残りは選択のフレームワークを使用してフロントエンドのデータを提示するためにユーザー次第です。

ReactとJavaScriptの健全な知識の欠如は、初心者の主なハードルです。ギャツビーコミュニティはこれらのギャップの多くを埋めており、学習と探索を続けるために利用可能な多くのリソースがあります。

ギャツビーカンファレンス2021トーク

最近の2021年のギャツビー会議からの2つのワークショップの講演は、ギャツビーワードプレスサイトに関連していました。 1つは、Jason Bahlがワークショップを開催し、Yoast SEOプラグインのサポートを含むWordPressデータを搭載したGatsbyブログを作成する方法を開催し、サイトをGatsby Cloudに展開する方法を含みます。

WP EngineのMatt Landersが主催する別のワークショップがあり、Advanced Custom Fieldsプラグインを使用してチームメンバーページを作成して物事を設定する方法を示しています。

特に、実践的な経験でより良く学ぶ場合は、両方の講演が良いです。また、ジェイソンが初心者向けの基本的な質問に答えるジェイソンバールとのこのマットレポートポッドキャストのエピソードを見つけました。

チュートリアルコース

Morten Rand-Hendriksenには、GatsbyソースのWordPressプラグインを使用するLinkedIn Learningの優れたコースがあります。私たちがカバーした2つのギャツビーのスターターを拡張するカスタマイズされたサイトを作成するより多くの実践的なエクスペリエンスに興味がある場合、このコースは素晴らしい作業サイトを作成する方法を教えて、ドロップダウンヘッダーナビゲーション、フッターメニュー、投稿、ページ、カテゴリ、タグ、ページナビゲーションを備えています。

コースのエクササイズファイルは、GitHub LinkedIn Learning Repositoryで利用できます。

ギャツビーのスターター

私がこれを書いているとき、WordPressには10人のギャツビースターターがいます。前述したように、ギャツビーのスターターWordPress Twenty20のみが、ギャツビーソースのWordPressプラグインの最新バージョンに基づいています。残りはバージョン3です。

読んでくれてありがとう。私のような技術的な重い経験に欠けている仲間のWordPressユーザーがこのプラグインを使用している方法を常に知りたいと思っています。フィードバックがある場合は、コメントに投稿してください。