Gatsby.jsアプリケーションでWordPressコンテンツを使用する方法

著者は、 Write for DOnations プログラムの一環として、 InternetArchiveを選択して寄付を受け取りました。

序章

WordPress は人気のあるCMSです（CオンテントM管理Sシステム）。 Webサイトのページを生のHTMLで手動でコーディングするのではなく、ビジュアルエディター内で投稿を編集でき、協調編集や改訂履歴などの追加機能を提供します。

従来、WordPressはウェブサイトのバックエンドとフロントエンドの両方として機能していました。投稿は管理エディター内で編集され、バックエンドは、訪問者が PHP テーマを通過してサイトにアクセスすると、サイトの各公開ページを動的に生成します。

WordPressの新しいパラダイムは、サイトのコンテンツ部分にのみ使用し（ヘッドレスの実行とも呼ばれます）、Gatsbyを使用してフロントエンドを静的に生成します。両方を活用し、コンテンツをユーザーインターフェイス（UI）から切り離すことで、コンテンツエディターとWordPressのコラボレーション機能を維持しながら、Gatsbyのより高速な読み込み時間とReactベースのUIエコシステムを楽しむことができます。

このチュートリアルでは、WordPressをプロビジョニングしてGatsbyと通信し、スターターテンプレートに基づいて新しいGatsbyプロジェクトを設定し、Gatsby構成でWordPressへの接続を定義し、それらをすべてまとめて、ライブの投稿に基づいて静的にいくつかのページを生成しますWordPressインストール内。

前提条件

このガイドを始める前に、次のことが必要になります。

サイトの構築と提供をサポートするのに十分なリソースを備えた環境。 WordPressのホストとGatsbyサイトの構築の両方に同じサーバーを使用している場合、推奨されるRAMの最小量は2GBです。 DigitalOceanドロップレットを使用する場合は、DigitalOceanコントロールパネルの記事からドロップレットを作成する方法を確認してください。
Gatsbyが実行されている場所から到達可能な動作中のWordPressインストール。 WordPressを初めて使用する場合は、最初に WordPress とは何かに関するガイドから始めることをお勧めしますが、一般的なセットアップについては、Dockerなどの複数の環境向けのガイドもあります。。このチュートリアルは、LAMPスタックを使用してUbuntu20.04にWordPressをインストールする方法に従ってセットアップされたLAMPスタックでテストされました。
Node.js 、ローカルにインストールされ、Gatsbyを実行してサイトを構築します。インストール手順はオペレーティングシステムによって異なりますが、UbuntuにNode.jsをインストールするためのガイドとMacにNode.jsをインストールするためのガイドがあり、で常に最新リリースを見つけることができますNodeJSの公式ダウンロードページ]。
ローカルにインストールされたGatsbyCLIツール。これをインストールする方法とギャツビーの基本のいくつかを学ぶために、最初のギャツビーウェブサイトをセットアップする方法チュートリアルのステップ1に従うことができます。
Gatsbyで作業するためのJavaScriptにある程度精通している。 JavaScriptには多くの深みがありますが、出発点としては、JavaScriptでコーディングする方法シリーズが適しています。さらに、 HTML要素の理解などのHTMLの知識があると役立ちます。また、このチュートリアルで説明されている以上に投稿のUIをカスタマイズしたい場合は、いくつかの知識も役立ちます。 ReactおよびJSX。

このチュートリアルは、WordPress v5.7.1、Gatsby v3.3.0、およびNode.jsv14.17.0でテストされました。さらに、WordPressのセットアップは、Apachev2.4.41とPHPv7.4.3を使用してWindows10とUbuntu20.04の両方でテストされました。

ステップ1—必要なWordPressプラグインのインストールと構成

この最初のステップでは、いくつかのプラグインをインストールして設定を調整することにより、WordPressがGatsbyと通信できるようにします。また、ローカルまたはホストされているWordPressインスタンスがこれらの変更をサポートしていることを確認し、後で必要になる特定のセットアップに関する詳細を記録します。

ブラウザでhttps://your_domain_name/wp-adminに移動し、クレデンシャルを入力して、WordPressインスタンスの管理ダッシュボードにログインすることから始めます。次に、左側のサイドバーのプラグインをクリックして、プラグインページに移動します。次に、ページ上部または同じサイドバーにある Add New をクリックして、プラグインのインストールページに移動します。 WordPressのインストールで標準パスを使用している場合は、https://your_domain/wp-admin/plugin-install.phpでもこのページを見つけることができます。これにより、次の画像に示すように、プラグインページが表示されます。

必要な2つのプラグインは次のとおりで、次の順序でインストールされます。

WPGraphQL：これにより、WordPressの標準 REST エンドポイントの代わりに、GraphQL標準によってWordPressデータをクエリできます。 GatsbyはデフォルトでGraphQLを使用するため、これは重要です。このチュートリアルでは、このプラグインのv1.3.5を使用します。このプラグインの詳細については、WPGraphQLGitHubリポジトリまたはWordPressWPGraphQLプラグインディレクトリを確認してください。

WPGatsby：このプラグインは、WordPressをGatsbyと同期させ、豊富なプレビューを有効にし、同期システムにフックを公開します。このチュートリアルでは、このプラグインのv1.0.8を使用します。このプラグインの詳細については、WPGatsbyGitHubリポジトリまたはWordPressWPGatsbyプラグインディレクトリを確認してください。

これらのプラグインを検索し、関連する今すぐインストールボタンを押して、両方のプラグインをインストールしてアクティブ化します。インストールしたら、アクティブ化ボタンを選択します。両方のプラグインをインストールしてアクティブ化すると、WordPress管理ダッシュボード内にいくつかの新しい設定パネルが表示されます。次の画像は、これらの新しい設定パネルを示しています。

GraphQL接続がGatsbyに接続できることを確認するには、管理サイドバーのGraphQLサブセクションの下にある設定パネルを開きます。

GraphQLエンドポイントに特に注意してください。これは、テキスト入力ボックスの下の GraphQLEndpointというラベルの付いたセクションにあります。スクリーンショットでも黄色で強調表示されています。これは後で必要になるため、時間を節約するために、クリップボードにコピーしたり、一時的なテキストドキュメントに貼り付けたりすることができます。

WPGraphQLで最良の結果を得るには、plain以外のWordPressパーマリンク設定を使用することをお勧めします。特にこれがURL構造の変更がライブに影響を与えない新しいWordPressインストールである場合はそうです。 Webサイト。パーマリンク設定に移動するには、WordPress管理ダッシュボードの左側のサイドバーにある設定をクリックしてから、その展開されたセクションのパーマリンクをクリックします。パーマリンク設定ページから、設定をプレーン以外のオプションに変更し、変更の保存を押してサイトを更新します。

パーマリンクをプレーン以外のものに設定するには、いくつかの特定の技術要件があります。 Apache Webサーバーでは、mod_rewriteモジュールを有効にし、AllowOverrideディレクティブをallに設定する必要があります。これらにより、WordPressは新しいパスを動的にルーティングできるようになります。 Ubuntu 20.04チュートリアルのWordPressのステップ3は、ステップバイステップの説明でこれをカバーしています。 Ubuntu20.04チュートリアルでLet'sEncryptを使用してApacheを保護する方法の説明に従って、 Let's Encrypt を実行してサイトにSSL証明書を提供した場合は、これらの手順を完了する必要があります。 /etc/apache2/sites-available/your_domain-le-ssl.confの新しい仮想ホスト用。

GraphQLエンドポイントが構成されたので、この接続をテストします。あなたはすぐにそうすることができます。 Gatsbyのインストールはまだ必要ありません。 GraphiQL IDE を使用してビジュアルクエリビルダーツール（サイドバーからアクセス可能）を使用することも、選択したお気に入りのネットワークリクエストツールを使用してエンドポイントに直接クエリを実行することもできます。

コマンドラインを使用し、 cURL をインストールしている場合は、次のコマンドを使用してすべての投稿タイトルを取得できます。

curl --location --request POST 'https://your_domain/graphql' \
--header 'Content-Type: application/json' \
--data-raw '{
    "query": "query { posts { nodes { title } } }"
}'

このコマンドは、WordPressの投稿を含む JSON 応答をGraphQLエンドポイントに要求しますが、その応答はタイトルのみです。 GraphQLでは、これはqueryとも呼ばれます。チュートリアル「GraphQLのクエリを理解する」では、それらについてさらに詳しく説明しています。

クエリへの応答JSONは次のようになります。

Output{"data":{"posts":{"nodes":[{"title":"Hello world!"}]}},"extensions":{"debug":[{"type":"DEBUG_LOGS_INACTIVE","message":"GraphQL Debug logging is not active. To see debug logs, GRAPHQL_DEBUG must be enabled."}]}}

Gatsbyと通信するために必要なWordPressプラグインを正常にインストールして構成したので、新しいGatsbyプロジェクトのセットアップに進むことができます。

ステップ2—新しいギャツビープロジェクトを設定する

このステップでは、WordPressからデータを調達するために特別に設計されたスターターテンプレートに基づいて、新しいGatsbyプロジェクトを設定します。スターターとその依存関係をダウンロードしてインストールするには、GatsbyCLIを使用する必要があります。

開発プロセスをスピードアップし、必要なセットアップの量を減らすために、 GatsbyCLIとGatsbyWordPress BlogStarterテンプレートを使用することから始めます。

Gatsbyプロジェクトを保持するローカルの親ディレクトリに移動し、次のコマンドを実行してGatsby CLIをダウンロードし、サイトの構築を開始するために必要なもののほとんどをプレインストールします。

gatsby new  my-wordpress-gatsby-site https://github.com/gatsbyjs/gatsby-starter-wordpress-blog

my-wordpress-gatsby-siteは、ローカルGatsbyファイルのディレクトリ名に変更できます。

Gatsbyが必要なすべての依存関係とアセットをダウンロードしてインストールするまでにはしばらく時間がかかります。完了すると、次のようなメッセージが表示されます。

Output...
Your new Gatsby site has been successfully bootstrapped. Start developing it by running:

  cd my-wordpress-gatsby-site
  gatsby develop

通常、Gatsbyサイトでは、これはgatsby-config.jsファイルをmetadataとして知られるサイトの詳細で手動編集するポイントです。ただし、このスターターはWordPressから投稿をプルするだけでなく、メタデータも自動的にプルします。サイトのタイトルや説明を手作業でコーディングする必要はありません。

新しいGatsbyプロジェクトの足場を固めたので、WordPressからデータをプルするように構成を変更する準備が整いました。

ステップ3—WordPressデータを使用するようにGatsbyを構成する

Gatsbyプロジェクトが機能するようになったので、次のステップは、WordPressからデータを取り込むようにプロジェクトを構成することです。これを行うには、メインのGatsby構成ファイルを編集し、gatsby-source-wordpressプラグインを使用します。

使用したスターターテンプレートのおかげで、gatsby-source-wordpressプラグインはすでに依存関係としてインストールされており、Gatsby構成ファイルに設定エントリがあります。少し調整する必要があります。

前の手順で作成したローカルのGatsbyディレクトリに移動します。

cd my-wordpress-gatsby-site

次に、選択したテキストエディタで./gatsby-config.jsという名前のファイルを開きます。これは、すべてのGatsbyプロジェクトのメイン構成ファイルです。

構成ファイル内には、pluginsアレイ内のgatsby-source-wordpressの既存の設定エントリがあります。これで、前の手順でコピーした特定のGraphQLエンドポイントを取得し、次のコードで強調表示されているように、デフォルトのデモエンドポイントhttps://wpgatsbydemo.wpengine.com/graphqlを値に置き換えることができます。

gatsby-config.js

module.exports = {
    plugins: [
        {
            resolve: `gatsby-source-wordpress`,
            options: {
                url:
                    process.env.WPGRAPHQL_URL ||
                    `https://your_domain/graphql`,
            },
        },
        ...
    ],
    ...
}

このファイルを保存して閉じ、サイトの今後のビルドで更新された値が使用されるようにします。

注：urlが唯一の必須設定オプションですが、利用できる設定オプションはたくさんあります。詳細については、GatsbyGitHubの再投稿をご覧ください。たとえば、デバッグ出力を有効にするためのオプション、HTACCESSへの接続、パスワードで保護されたサイト、およびschema.requestConcurrencyなどのパフォーマンス関連オプションがあります。これは、WordPressサイトが限られたリソースのサーバーで実行されている場合に特に重要です。

GatsbyがWordPressデータを使用してページを作成する方法のカスタマイズに進む前に、サイトをそのまま作成してプレビューし、すべてが正しく機能していることを確認してください。これを行うには、次のコマンドを実行します。

npm run develop

または、ヤーンパッケージマネージャーを使用している場合：

yarn develop

警告：このステップでエラーが発生した場合、特に依存関係の欠落またはcan't resolve '...' in '...\.cacheに関するエラーの場合は、依存関係のインストールプロセスの一部が失敗した可能性があります。これはGatsbyプロジェクトの既知の問題です。 npm iをもう一度実行してみてください（yarnを使用している場合はyarn install）。不足している依存関係を確認してインストールしてください。それでも問題が解決しない場合は、node_modulesフォルダーを削除し、package-lock.jsonまたはyarn.lockを削除してから、npm iまたはyarn install。

このコマンドは、gatsby developプロセスを実行します。このプロセスは、WordPressからデータを取得し、スターターテンプレートのビルド済みUIファイルと組み合わせて、ローカル開発サーバーを起動し、実際に生成されたWebサイトのプレビューを表示できるようにします。ブラウザで。このコマンドは、 hot-reloading をサポートするモードでGatsbyも実行するため、ローカルファイルを編集すると、それらの変更がWebブラウザーに即座に反映されます。

ブラウザでlocalhost:8000に移動すると、WordPressコンテンツを含むGatsbyサイトが見つかります。

GatsbyプロジェクトがWordPressからデータを取得しているので、次のステップは、実際のテンプレートファイルをカスタマイズして、Gatsbyサイトの外観と動作を希望どおりにすることです。

ステップ4—スターターテンプレートファイルのカスタマイズ

Gatsby WordPressスターターテンプレートは多くのデフォルト機能を提供しますが、このステップでは、テンプレートファイルをカスタマイズして、フォームと機能の両方でプロジェクトを独自のものにする方法を探ります。いくつかのGatsbyソースファイルを編集することで、新しいWordPressコンテンツ（投稿の抜粋）をGatsbyサイトに取り込み、CSSでスタイルを設定します。

スターターテンプレートが含まれているほとんどのGatsbyサイトでは、カスタマイズに関して知っておくべきいくつかの重要なファイルとフォルダーがあります。

./gatsby-node.js：これは静的サイト生成プロセスの中心と見なすことができます。すべてのコンテンツについてWordPressにクエリを実行し、それをテンプレートファイルに渡して静的出力を生成するためのコードが含まれています。最終的にサイトに表示されるコンテンツを変更する場合は、これが主要なエントリポイントです。 WordPressの開発に関しては、これは TheLoopや同様の概念での作業に似ています。
./src/templates：これには個々のテンプレートファイルが含まれ、各テンプレートファイルには、渡されたコンテンツのレンダリングを担当するReactコンポーネントが含まれてエクスポートされます。コンテンツの外観を変更したり、サードパーティのUIライブラリを統合したり、コンテンツの周りにスケルトンを構築したりする場合は、これが通常の場所です。 WordPressの開発に関しては、これらはテンプレートファイルに似ています。
./src/components：通常、このフォルダー内の各ファイルは、特定のUIタスク専用の単一のReactコンポーネントであり、テンプレートファイルにプルされることを目的としています。これらをUIビルディングブロックと考えてください。ただし、テンプレートとは考えないでください。複数のテンプレートファイル間で共有するUI要素がある場合、これはそれを配置し、同じコードを何度もコピーして貼り付けることを避けるのに適した場所です。この例としては、メニュー、著者の略歴、ヘッダーとフッターの要素などがあります。 WordPressの開発に関しては、これらは TemplatePartialsに似ています。
./src/css：これには、インラインスタイルとは対照的に、サイト全体で共有される CSS ファイル、またはcss-in-jsソリューションなどの一般的なcss-in-jsソリューションが含まれます。 X157X]スタイル付きコンポーネント。このチュートリアルでは、特定のスターターテンプレートを使用して、このフォルダーが新しいサイトのスタイルの大部分を提供します。 WordPressの開発に関しては、これはstyle.css、またはテーマがWordPressのエンキューシステムを介してページに挿入できる任意の数のスタイルシートに相当します。

既存のテンプレートファイルを編集する方法の例については、テキストエディタで./src/templates/blog-post.jsを開いてください。

WordPressには、抜粋と呼ばれる投稿ごとに特別なテキスト値があります。これは、投稿の短い説明的な要約です。デフォルトでは、このGatsbyテンプレートファイルはWordPressの抜粋を取り込みますが、SEOの目的でのみ使用し、<meta name="description" />タグに入れます。ブログ投稿テンプレートファイルを変更して、投稿の抜粋を視覚的に含めることができます。たとえば、強調表示されたコードをファイルに追加します。

/src/templates/blog-post.js

const BlogPostTemplate = ({ data: { previous, next, post } }) => {
    ...
    return (
        <Layout>
            ...
            <h1 itemProp="headline">{parse(post.title)}</h1>
      
            <p>{post.date}</p>

            {/* Checking for and adding the post excerpt if the current post has one*/}
            {post.excerpt && (
                <div className="post-excerpt">{parse(post.excerpt)}</div>
            )}

      {/* if we have a featured image for this post let's display it */}
        {featuredImage?.fluid && (
          <Image
            fluid={featuredImage.fluid}
              alt={featuredImage.alt}
              style={{ marginBottom: 50 }}
          />
        )}
      ...
        </Layout>
    )
}

このコードでは、投稿に抜粋があるかどうかを確認し（WordPressでは必須ではないため重要です）、ある場合は、<div>要素内に抜粋のテキストコンテンツを表示します。 parse()関数はhtml-react-parserに由来し、抜粋を保持する<p>タグがプレーンテキストではなくHTMLに解析されるようにするために、ここで使用されています。コンテンツを直接エコーアウトできます。別のアプローチは、<div className="post-excerpt" dangerouslySetInnerHTML=テンプレート:Html: post.excerpt ></div>とともにdangerouslySetInnerHTMLを使用することです。

blog-post.jsファイルを保存して閉じます。

抜粋は投稿の要約であるため、投稿の本文から視覚的に分離し、ページの上部で強調表示して見つけやすくすると、サイトへの訪問者に役立つ場合があります。これを行うには、./src/css/style.cssでメインの共有CSSファイルを編集します。

/src/css/style.css

.post-list-item header {
  margin-bottom: var(--spacing-4);
}

/* CSS targeting your new post excerpt element */
.post-excerpt {
  box-shadow: 0px 1px 9px 1px rgb(0 0 0 / 50%);
  padding: 6px;
  border-radius: 8px;
  margin-bottom: 14px;
}

.post-excerpt p {
  margin-bottom: 0px;
}

CSSで、box-shadowを使用して、抜粋コンテナの周囲に影の効果を追加し、投稿の実際の本文と対比させ、パディング、丸みを帯びたエッジ、およびそれ自体と隣接する要素間の間隔を追加しました。。さらに、間隔がコンテナ.post-excerpt要素によって提供されるようになったため、抜粋のテキストからデフォルトの下マージンを削除しました。

style.cssファイルを保存します。これをテストするには、WordPressに抜粋を追加して、この新しいビジュアル機能を利用します。 WordPress管理ビューのサイドバーで、投稿タブに移動し、サンプルの Hello world！投稿を選択します。これにより、WordPressの投稿エディタービューに移動します。新しいブロックベースのエディターでは、抜粋フィールドが右側のサイドバーの下部にあるPostタブの下に表示されます。従来のエディターでは、抜粋フィールドの場所はカスタマイズ可能であるため、テーマやカスタム設定に応じて異なる場所に表示される場合があります。

抜粋を追加し、画面上部の更新ボタンを選択します。次に、Gatsbyサイトのlocalhost:8000にアクセスし、Hello world!ブログ投稿を選択します。あなたが書いた抜粋がページに表示されます：

注： WordPressテーマの動作と同様に、追加のコーディングや構成を必要としないビルド済みのテーマを探している場合は、公式テーマとコミュニティテーマの両方が増えています。 GatsbyでWordPressを使用する。

WordPressからの投稿の抜粋をカスタムGatsby静的サイトに埋め込み、スタイルを設定しました。これは、スターターテンプレートで使用するためにすでに構成されているデータを使用しました。次のステップでは、GraphQLを介して新しいデータを取得し、それらをGatsbyサイトに統合する方法を検討します。

ステップ5—カスタムテンプレートを使用したGatsbyでのWordPressデータの使用

前の手順では、既存のテンプレートを編集し、いくつかの標準のWordPressデータ（投稿のタイトルと投稿のコンテンツ）を使用して、Gatsbyの静的出力でブログ投稿をレンダリングしました。多くのサイトでは、これだけで十分な場合があります。ただし、UIをWordPressから切り離すことで柔軟性が向上することを示すために、このステップでは、既存のブログ投稿テンプレートを超えて、Gatsbyで特別なビデオ投稿タイプのサポートを追加する方法を探ります。

このシナリオでは、YouTubeから提供された単一の動画をそれぞれ紹介する投稿のサポートを追加しています。あなたまたはあなたのコンテンツの共同編集者がYouTubeのURLをコピーしてWordPressの投稿エディターに貼り付けることができるようにします。Gatsbyサイト自体がカスタマイズされたYouTube埋め込みウィジェット内にビデオを表示します。

投稿テンプレートの場合は、/src/templatesの下に新しいファイルを作成し、video-post.jsという名前を付けます。生成されるページのUIを構築する前に、GraphQLクエリを記述してそのデータを取得できます。 Gatsbyでは、これはページクエリと呼ばれ、graphqlタグを使用します。

video-post.jsファイルに次のコードを追加します。

/src/templates/video-post.js

import React from "react"
import { graphql } from "gatsby"

export const pageQuery = graphql`
  query VideoPostById(
    # these variables are passed in via createPage.pageContext in gatsby-node.js
    $id: String!
  ) {
    # selecting the current post by id
    post: wpPost(id: { eq: $id }) {
      id
      content
      title
      date(formatString: "MMMM DD, YYYY")
    }
  }
`

このスニペットでは、投稿IDを使用して、実際の投稿の内容、タイトル、日付など、その正確な投稿に属する特定の値を照会しています。

次に、 JSX を返す実際のReactコンポーネントを追加できます。これは、Webページとしてレンダリングされます。まず、既存のblog-post.jsテンプレートファイルからほとんどの構造をコピーし、次の強調表示された行を追加することから始めます。

/src/templates/video-post.js

import React from "react"
import { graphql } from "gatsby"
import parse from "html-react-parser"

import Bio from "../components/bio"
import Layout from "../components/layout"
import Seo from "../components/seo"

const VideoPostTemplate = ({ data: { post } }) => {
  return (
    <Layout>
      <Seo title={post.title} description={post.excerpt} />

      <article
        className="blog-post"
        itemScope
        itemType="http://schema.org/Article"
      >
        <header>
          <h1 itemProp="headline">{parse(post.title)}</h1>
          <p>{post.date}</p>
        </header>

        <footer>
          <Bio />
        </footer>
      </article>
    </Layout>
  )
}

export default VideoPostTemplate;

export const pageQuery = graphql`
  query VideoPostById(
    # these variables are passed in via createPage.pageContext in gatsby-node.js
    $id: String!
  ) {
    # selecting the current post by id
    post: wpPost(id: { eq: $id }) {
      id
      content
      title
      date(formatString: "MMMM DD, YYYY")
    }
  }
`

Reactコンポーネントの作成に加えて、export defaultを使用して、コンポーネントがファイルからエクスポートされたデフォルトのアイテムであることを確認しました。後でGatsbyがWordPressからのデータに対してテンプレートをコンパイルするときに、ファイルがどのようにインポートされるかを考えると、これは重要です。

これで、Reactコンポーネントにロジックを追加して、投稿の本文に生のYouTubeURLが埋め込まれているかどうかを確認できます。

/src/templates/video-post.js

...

const VideoPostTemplate = ({ data: { post } }) => {
  // RegEx to find YouTube IDs
  const youtubeIdPattern = /watch\?v=([a-z_0-9-]+)|youtu\.be\/([a-z_0-9-]+)|youtube\.com\/embed\/([a-z_0-9-]+)/i;

  const matches = youtubeIdPattern.exec(post.content);
  let videoId;

  if (matches) {
    // Use first available match
    videoId = matches[1] || matches[2] || matches[3];
  }

  return (
    <Layout>
      <Seo title={post.title} description={post.excerpt} />

      <article
        className="blog-post"
        itemScope
        itemType="http://schema.org/Article"
      >
        <header>
          <h1 itemProp="headline">{parse(post.title)}</h1>
          <p>{post.date}</p>
        </header>

        <footer>
          <Bio />
        </footer>
      </article>
    </Layout>
  )
}
...

このコードでは、youtubeIdPatternは正規表現（またはRegEx）であり、youtubeIdPattern.exec(post.content)を使用して投稿の本文に対して実行している検索パターンです。含まれているすべてのYouTubeID。一致するものが見つかった場合、変数videoIdが最初の一致に設定されます。

最後に、抽出したvideoIdに基づいてビデオをレンダリングするJSXを追加できます。

/src/templates/video-post.js

...

  return (
    <Layout>
      <Seo title={post.title} description={post.excerpt} />

      <article
        className="blog-post"
        itemScope
        itemType="http://schema.org/Article"
      >
        <header>
          <h1 itemProp="headline">{parse(post.title)}</h1>
          <p>{post.date}</p>
        </header>

        {videoId ? (
          <div className="video-embed">
            <iframe width="512" height="288" src={`https://www.youtube-nocookie.com/embed/${videoId}?controls=0&autoplay=1`} title={post.title} frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
          </div>
        ) : (
          <div className="no-video-found">
            <p>Sorry, could not find a video in this post!</p>
          </div>
        )}

        <hr />

        <footer>
          <Bio />
        </footer>
      </article>
    </Layout>
  )
}
...

videoIdが見つかった場合、コードは、自動再生に設定された iframe を介して提供される、カスタマイズされたプライバシー強化されたYouTube埋め込みを返します。それ以外の場合は、ビデオが見つからなかったというメッセージを返します。また、ビデオの埋め込みと投稿のフッターの間に水平方向の区切りを追加します。

コンポーネントテンプレートファイルが作成されたので、WordPress内でビデオタイプに設定されている投稿に新しいテンプレートを使用し、通常のブログ投稿テンプレートを使用しないようにGatsbyに指示します。

必ずvideo-post.jsに変更を保存してから、テキストエディタでgatsby-node.jsを開いてください。

まず、スターターが投稿用のWordPressバックエンドへのメインのGraphQLクエリとして使用するgetPosts()関数を変更します。指定された投稿が属するpostFormatsを取得するようにクエリを変更します。

gatsby-node.js

...
async function getPosts({ graphql, reporter }) {
  const graphqlResult = await graphql(/* GraphQL */ `
    query WpPosts {
      # Query all WordPress blog posts sorted by date
      allWpPost(sort: { fields: [date], order: DESC }) {
        edges {
          previous {
            id
          }

          ...

          post: node {
            id
            uri
            postFormats {
              formats: nodes {
                name
              }
            }
          }

          next {
            id
          }
        }
      }
    }
  `)

  ...

  return graphqlResult.data.allWpPost.edges
}

次に、ビデオ投稿を分離し、レンダリングのために固有のテンプレートファイルに送信するロジックを実装する必要があります。このために、スターターの既存のcreateIndividualBlogPostPages（）関数にフックすることができます。

変更したGraphQLクエリからデータを取得し、それを使用して、現在の投稿がビデオ投稿であるかどうかを判断できます。

gatsby-node.js

const createIndividualBlogPostPages = async ({ posts, gatsbyUtilities }) =>
  Promise.all(
    posts.map(({ previous, post, next }) => {
      const postFormats = post.postFormats.formats;
      const isVideo = postFormats.length && postFormats[0].name === 'Video';
...
          // We also use the next and previous id's to query them and add links!
          previousPostId: previous ? previous.id : null,
          nextPostId: next ? next.id : null,
        },
      })}
    )
  )

次に、createPageのcomponentプロパティを変更して、対応するテンプレートファイルを使用します。

gatsby-node.js

const createIndividualBlogPostPages = async ({ posts, gatsbyUtilities }) =>
  Promise.all(
    posts.map(({ previous, post, next }) => {
      const postFormats = post.postFormats.formats;
      const isVideo = postFormats.length && postFormats[0].name === 'Video';

      return gatsbyUtilities.actions.createPage({
        // Use the WordPress uri as the Gatsby page path
        // This is a good idea so that internal links and menus work 👍
        path: post.uri,

        // Use special video template if post format === Video, else use blog post template
        component: isVideo ? path.resolve(`./src/templates/video-post.js`) : path.resolve(`./src/templates/blog-post.js`),

        ...
      });
    })
  )

簡潔にするために、このコードステートメントは三項演算子を使用します。これは、ある値が truthy （truth-like）の場合に、別の値が[ X187X] false 、すべて if/elseステートメントなし。コードは、以前の投稿フォーマットチェックのisVideoを使用し、trueの場合、新しいビデオテンプレートのパスを返します。 falseの場合、通常のブログ投稿テンプレートを使用するようにGatsbyに指示します。 Node.js path.resolve()関数は、相対パス（./src/...）を絶対パス（フルファイルパス）に変換するために使用されます。これは、Gatsbyがコンポーネントファイルをロードするために必要です。

ファイルを保存して終了します。

次に、./src/css/style.cssをもう一度編集して、埋め込みビデオのスタイルを設定します。

/src/css/style.css

.video-embed {
  /* Shadow effect around box to give it contrast */
  box-shadow: 0px 2px 12px 4px rgb(0 0 0 / 50%);
  /* All four declarations below help center our video and give it space */
  display: block;
  line-height: 0px;
  margin: 20px auto;
  max-width: 512px;
}

このCSSを追加することで、ビデオに影の効果を埋め込み、ページとのコントラストを付けたり、中央に配置したり、他の要素から離れた場所に配置したりします。

この新しいコードの機能をテストするために、テンプレートに必要な基準に一致する新しい投稿をWordPressで作成できます。 WordPress管理ダッシュボードから、左側のサイドバーの投稿をクリックし、新規追加をクリックして新しい投稿の作成を開始します。投稿にタイトルを付けてから、次の2つの基準を満たしていることを確認してください。

投稿フォーマットはビデオに設定されます。フォーマットのドロップダウンは右側のサイドバーにあります
投稿の本文にはYouTubeのURLが含まれます（埋め込みではありません）。これをテストするには、DigitalOceanプロモーションビデオへの短いリンクyoutu.be/iom_nhYQIYkを使用できます。

投稿に入力したら、公開（または既存の投稿の場合は更新）を選択し、表示されるプロンプトを確認してクリックします。これにより、投稿が公開され、Gatsbyが取得できるようになります。 GraphQL接続を介して。

ブラウザでlocalhost:8000に移動し、テストビデオ投稿を選択します。次の画像に示すように、YouTubeビデオはブラウザでレンダリングされます。

結論

このチュートリアルの手順を実行することで、WordPressバックエンドからコンテンツを調達する静的に生成されたGatsbyサイトができました。コンテンツをUIから切り離すことで、サイトを高速化するための新しい可能性を開き、分野を超えたコンテンツコラボレーションへの障壁を減らし、GatsbyとReactがUI開発に提供する豊富なエコシステムを利用しました。

Gatsbyのチュートリアルをもっと読みたい場合は、Gatsby.jsシリーズを使用して静的Webサイトを作成する方法の他のチュートリアルを試してください。