WordPressデータを使用してGatsbyサイトを作成します

このチュートリアルは、以前の記事に基づいており、ギャツビーとWordPressの統合の詳細なウォークスルーを提供します。 Gatsbyのスピードとセキュリティ給付は、WordPressユーザーにアピールし、おなじみのWordPressコンテンツ管理エクスペリエンスを保持しながら、これらの利点を活用する方法を提供します。

このガイドは、実用的な実装に焦点を当て、さまざまなリソースから引き出し、潜在的な課題に対処します。 WPGRAPHQLとGatsby CLIが積極的に開発されていることに注意してください。つまり、バージョンの互換性が重要であることを意味します。このプロジェクトは、WPGRAPHQL 0.8.3、 gatsby-source-wpgraphql 2.5.1、およびGatsby CLI 2.12.21を利用しています。最新の更新については、常に公式ドキュメントを参照してください。

アレクサンドラ・スパラトのgatsby-wordpress-theme-blogやザック・ゴードンとムハンマド・ムシンのtwenty-nineteen-gatsby-themeなど、いくつかの優れたギャツビーのスターターが存在します。

前提条件

従うには、次のことが必要です。

• 基本的な反応とJavaScriptの知識。多数のオンラインリソースが紹介ガイドを提供しています。
• ギャツビーのダイナミックなページ作成メカニズムの把握。包括的なチュートリアルはすぐに利用できます。
• 動作するWordPressのインストール。セットアップを支援するために、たくさんのガイドが存在します。

既存のリソースを活用します

このプロジェクトは、以前のギャツビーの経験と再利用可能なコンポーネント（タイポグラフィ、レイアウトなど）の恩恵を受けました。主要なリソースが含まれます：

• Henrik Wirthの包括的なギャツビーワードプレススターターガイド。
• ジェイソン・レンストーフのジャムスタック移行チュートリアル。
• ムハンマド・ムーシンの21のテーマの移植に関するガイド。

このチュートリアルは、Henrik Wirthの構造を反映しており、画像処理やACF柔軟なコンテンツなどの高度な機能を省略しています。

プロジェクトフェーズ：

1. WordPressとGatsbyのセットアップ
2. コンテンツの移行
3. ナビゲーションの実装
4. ブログ投稿表示
5. スタイリングと展開

フェーズ1：WordPressとGatsbyのセットアップ

WordPressサイトを確立することから始めます（既存または新しい、さらにはローカルインストールが機能します）。このプロジェクトでは、20のテーマを使用しています。

必須プラグインをインストールします

WPGRAPHQL（GRAPHQL API用）およびWPGraphiQl（オプションですが、クエリのテストに役立ちます）をインストールします。これらのプラグインは、WordPressプラグインディレクトリで使用できない場合があります。 Githubから直接ダウンロードし、手動でインストールします。 WPGRAPHIQLは、WordPressダッシュボード内の便利なテストインターフェイスを提供します。

ギャツビーサイトの初期化

デフォルトのスターターを使用して、地元のギャツビーサイトを作成します。

 Gatsby New WordPress-Gatsby https://github.com/gatsbyjs/gatsby-starter-default

開発サーバー（ gatsby develop ）を開始し、 localhost:8000スターターページにアクセスします。

gatsby-source-graphqlプラグインをインストールして構成します。

 YARNはGatsby-Source-Graphql＃またはNPMインストールを追加します -  Gatsby-Source-graphqlを使用します

gatsby-config.jsを構成：

 module.exports = {
  プラグイン：[
    {
      解決：「Gatsby-Source-Graphql」、
      オプション：{
        TypeName： "wpgraphql"、
        フィールド名：「wpcontent」、
        url： "https://tinjurewp.com/wp-gatsby/graphql"、//または環境変数を使用します
      }、
    }、
  ]、、
};

環境変数にdotenvモジュールを使用して、機密データを管理することを検討してください。

サーバーを再起動した後、WPGRAPHQL APIはhttps://localhost:8000/__graphql/でGatsbyからアクセスできます。

フェーズ2：ワードプレスコンテンツの移行

Gatsbyは、GraphQLを使用してデータを照会することにより、ビルドプロセス中にページを作成します。これには、GatsbyのonCreateNodeおよびcreatePages APIの使用が含まれます。

コンテンツの準備

WordPressサイトに投稿とページを追加します。競合を避けるために、Gatsby pagesフォルダーからindex.jsとpage-2.jsを削除します。

テンプレート作成

投稿（ /src/templates/post/index.js ）およびページ（ /src/templates/page/index.js ）のテンプレートを作成します。

 // src/templates/post/index.js（例）
「React」からのImport React;
"../../components/layout"からレイアウトをインポートします。
"../../components/seo"からSEOをインポートします。

const post =（{pagecontext}）=> {
  const post = pagecontext.post;
  戻る （
    <layout>
      <seo title="{post.title}"></seo>
      <h1 id="post-title">{post.title}</h1>
      <div dangerouslysetinnerhtml="{{" __html: post.content></div>
    </layout>
  ）;
};

デフォルトの投稿をエクスポートします。

createPages API実装

GatsbyのcreatePages APIを使用して、WordPressデータからページを生成します。これには、GraphQLクエリとデータマッピングが含まれます。 （リンクされたGithubリポジトリの完全なコードを参照）。

フェーズ3：ナビゲーションの実装

WordPressのナビゲーション管理により、メニューを作成できます。このセクションでは、プライマリメニューをギャツビーに移植することに焦点を当てています。

WordPressのメニュー作成

WordPressで「プライマリ」という名前のメニューを作成し、ホームページ、サンプルページ、その他の関連コンテンツへのリンクを追加します。

GraphQLクエリ

graphiqlを使用したクエリメニュー項目：

 QueryMyquery {
  menuitems（where：{location：primary}）{
    ノード{
      ラベル
      URL
      タイトル
      ターゲット
    }
  }
}

コンポーネントの作成

メニュー項目（ MenuItem.js ）とメニュー自体（ Menu.js ）のコンポーネントを作成し、URL変換を絶対から相対パスに処理します。 （リンクされたGithubリポジトリの完全なコードを参照）。

メニューの統合

MenuコンポーネントをLayoutコンポーネントに追加します。 UniversalLinkコンポーネントを実装して、内部リンクと外部リンクの両方を処理します。

フェーズ4：ブログ投稿の表示

このフェーズは、ページネーションのためのブログ投稿テンプレートとコンポーネントの作成に焦点を当てています。

グローバル変数

globals.jsファイルを作成して、 blogURIなどの設定を管理します。

ブログテンプレート

ブログテンプレート（ /src/templates/post/blog.js ）を作成して、 PostEntryとPaginationコンポーネントを利用して投稿を表示します。

ポストエントリコンポーネント

特集画像や抜粋を含む個々の投稿を表示するために、 PostEntryコンポーネントを作成します。

画像コンポーネント

フォールバック画像を含む注目の画像を処理するImageコンポーネントを作成します。

ページネーションコンポーネント

ペジネートされたポストをナビゲートするためのPaginationコンポーネントを作成します。

createPagesとcreatePostsをリファクタリングします

Refactor createPages.jsおよびcreatePosts.js GraphQLフラグメントを使用して、コードの組織と保守性を向上させます。 （リンクされたGithubリポジトリの完全なコードを参照）。

フェーズ5：スタイリングと展開

このセクションでは、スタイリング戦略と展開戦略について説明します。

スタイリング

スタイリングにはSASSまたはその他の好みの方法を使用します。 @wordpress/block-libraryを使用して、WordPressブロックスタイルを組み込むことを検討してください。

展開

継続的な展開のためにNetlifyまたはその他のプラットフォームを利用します。 WordPressの変更によってトリガーされる自動展開には、Jamstack Deploymentsプラグインを使用することを検討してください。

この包括的なガイドは、GatsbyとWordPressを統合するための強固な基盤を提供します。完全なコードの例と詳細については、リンクされたGithubリポジトリをご覧ください。このプロセスにはいくつかのステップが含まれており、ギャツビーとワードプレスの両方を十分に理解する必要があります。ただし、結果は高速で安全で保守可能なWebサイトです。

以上がWordPressデータを使用してGatsbyサイトを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。