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

投稿日: 2022-04-20 2022-10-24
タグ: Development, GatsbyJS, javascript, wordpress

序章

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インスタンスがこれらの変更をサポートしていることを確認し、後で必要になる特定のセットアップに関する詳細を記録します。

まず、WordPressインスタンスの管理ダッシュボードにログインして、次の場所に移動します。 https://your_domain_name/wp-admin ブラウザでクレデンシャルを入力します。次に、左側のサイドバーのプラグインをクリックして、プラグインページに移動します。次に、ページ上部または同じサイドバーにある 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-config.js メタデータとして知られているあなたのサイトに関する詳細を含むファイル。ただし、このスターターは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プロジェクトのメイン構成ファイルです。

構成ファイル内に、次の既存の設定エントリがあります。 gatsby-source-wordpress 以内 plugins 配列。これで、前の手順でコピーした特定の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 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 ファイル、またはstyled-components[などの一般的なcss-in-jsソリューションが含まれます。 X169X]。このチュートリアルでは、特定のスターターテンプレートを使用して、このフォルダーが新しいサイトのスタイルの大部分を提供します。 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> エレメント。 The parse() 関数はから来ます html-react-parser、およびここで使用されていることを確認するために <p> 抜粋を保持するタグはプレーンテキストではなくHTMLに解析されるため、コンテンツを直接エコーアウトできます。別のアプローチは、を使用することです dangerouslySetInnerHTML、と <div className="post-excerpt" dangerouslySetInnerHTML={{__html: post.excerpt}} ></div>.

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

抜粋は投稿の要約であるため、投稿の本文から視覚的に分離し、ページの上部で強調表示して見つけやすくすると、サイトへの訪問者に役立つ場合があります。これを行うには、メインの共有CSSファイルを次の場所で編集します。 ./src/css/style.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クエリを記述してそのデータを取得できます。ギャツビーでは、これはページクエリと呼ばれ、 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 最初の一致に設定されます。

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

/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 テキストエディタで。

まず、 getPosts() スターターが投稿用のWordPressバックエンドへのメインのGraphQLクエリとして使用する関数。クエリを変更して、 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,
        },
      })}
    )
  )

次に、 component のプロパティ createPage 対応するテンプレートファイルを使用するには：

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サイトを作成する方法の他のチュートリアルを試してください。

getdocs

13036