著者は、 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 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インスタンスの管理ダッシュボードにログインすることから始めます。 次に、左側のサイドバーのプラグインをクリックして、プラグインページに移動します。 次に、ページ上部または同じサイドバーにある [新規追加]をクリックして、プラグインのインストールページに移動します。 WordPressのインストールで標準パスを使用している場合は、https://your_domain/wp-admin/plugin-install.phpでもこのページを見つけることができます。 これにより、次の画像に示すように、プラグインページが表示されます。

Screenshot showing the Add New link selected in the Plugins sidebar in WordPress Admin

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

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

Screenshot of the WordPress plugin listing for WPGraphQL

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

Screenshot of the WordPress plugin listing for WPGatsby

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

Screenshot showing that both required plugins, WPGraphQL and WPGatsby, are installed, activated, and have added settings panels around the admin dashboard

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

Screenshot of the WPGraphQL settings page, with the GraphQL endpoint URL highlighted. In this example, it is "http://wp-do.test/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 をインストールしている場合は、次のコマンドを使用してすべての投稿タイトルを取得できます。

  1. curl --location --request POST 'https://your_domain/graphql' \
  2. --header 'Content-Type: application/json' \
  3. --data-raw
  4. '{
  5. "query": "query { posts { nodes { title } } }"
  6. }'

このコマンドは、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を使用する必要があります。

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

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

  1. 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ディレクトリに移動します。

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

  1. npm run develop

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

  1. 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 site entitled "Gatsby Test" with one "Hello World" blog post

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