チュートリアル: WordPress と Gatsby を使用してサイトを構築する

公開: 2023-02-12

WordPress で静的 Web サイトを作成することは、ヘッドレス WordPress で可能です。 これらのタイプの Web サイトは、静的ファイルがサーバーに保存されるため、読み込みが速くなります。 問題は、WordPress でヘッドレス Web サイトをどのように構築するかということです。

ここで、Gatsby のような静的サイト ジェネレーターの出番です。これらのジェネレーターは、WordPress で機能豊富な静的 Web サイトを構築するのに役立ちます。 ただし、それらを最大限に活用するには、WordPress インストールと正しく統合する必要があります。 この統合には、WordPress Gatsby のインストール、生成、構成が含まれます。

この記事では、Gatsby の概要と、WordPress で Gatsby を使用する理由について説明します。 次に、Gatsby の使用方法と使用すべきかどうかについて詳しく説明します。 始めましょう！

目次
1.ギャツビーとは？
2. WordPress で Gatsby を使用する理由
2.1. Gatsby を使用する利点
2.2. ギャツビーを使用することの短所
3. WordPress で Gatsby を使用するにはどうすればよいですか?
3.1. ステップ 1: 前提条件を確認する
3.2. ステップ 2: Gatsby をインストールする
3.3. ステップ 3: Gatsby サイトを作成する
3.4。 ステップ 4: Gatsby を WordPress に接続する
3.5。 ステップ 5: Gatsby を構成する
3.6. ステップ 6: ページ テンプレートを作成する
4. WordPress に Gatsby を使用する必要がありますか?
5. WP Engine でサイトを最大限に活用する

ギャツビーとは？

簡単に言えば、Gatsby は静的サイト ジェネレーターです。 これは、Gatsby が Web サイトのサーバーにアップロードされる静的 HTML ファイルを生成することを意味します。 訪問者がサイトにアクセスすると、WordPress が通常提供する動的コンテンツではなく、これらの静的ファイルがブラウザーに提供されます。

これらのファイルを生成するために、Gatsby はさまざまなソースから Web サイトのデータを取得します。 これには、GraphQL を介した既存の Web サイト、API 呼び出し、およびフラット ファイルが含まれます。 静的 Web サイトは、設定した構成に基づいて構築されます。

他の静的サイト ジェネレーターと比較すると、Gatsby は比較的新しいものです。 しかし、これは多くの企業がそれを試すことを止めませんでした. 最大の例の 1 つは、Gatsby を利用した Airbnb Engineering & Data Science ブログです。

WordPress で Gatsby を使用する理由

WordPress で静的な Web サイトを作成できるため、なぜ WordPress と Gatsby を併用する必要があるのか​​疑問に思うかもしれません。 WordPress はそれ自体が強力ですが、Gatsby は、高速化やサーバー コストの削減など、Web サイトに必要ないくつかの利点を提供します。 Gatsby の長所と短所を理解することは、十分な情報に基づいた決定を下すのに役立ちます。

Gatsby を使用する利点

ギャツビーは、どのウェブサイトでも利用できるさまざまなメリットを提供します。

  • より速い読み込み速度。 静的な Web サイトは動的な Web サイトよりも高速に読み込まれるため、検索エンジン最適化 (SEO) に影響を与える可能性があります。 ページの読み込み速度は、検索エンジンが使用する信号であり、Web サイトの直帰率に影響します。
  • サーバーコストの削減。 動的な Web サイトには、互換性のあるテクノロジ スタックとサーバーが必要です。 静的 Web サイトはそうではなく、任意のサーバーでホストできます。 これにより、サーバーのコストを削減できます。
  • セキュリティの向上。 静的 Web サイトは、セキュリティを向上させます。 提供される静的 HTML ファイルは、ハッカーが操作できるものはあまりありません。 これらのファイルが何らかの理由で失われた場合は、Gatsby で再生成することもできます。

あなたのウェブサイトは、これらすべての利点から恩恵を受けることができます。 ただし、Gatsby を使用することの欠点と比較検討する必要があります。

ギャツビーを使用することの短所

完璧なソフトウェア システムはありません。Gatsby には知っておくべきいくつかの欠点があります。

  • 技術的な知識が必要です。 Gatsby は ReactJS 上に構築され、GraphQL を使用します。 使用するには、JavaScript の理解が必要です。 Web サイトを構築するには、GraphQL の基本的な知識も必要です。
  • 動的コンテンツはありません。 Gatsby は静的な Web サイトのみを生成します。 連絡先フォームなどの動的コンテンツが必要な場合は、サードパーティ プロバイダーを介してリダイレクトする必要があります。

多くの開発者は、Gatsby の長所が短所を上回っていることに気付きますが、どちらも事前に理解しておくことが重要です。

WordPress で Gatsby を使用するにはどうすればよいですか?

Gatsby のセットアップには時間がかかる場合があり、いくつかの手順を実行する必要があります。 サイトの生成と構成を開始する前に、Gatsby をインストールする必要があります。 さらに、最初に考慮すべき点がいくつかあります。

ステップ 1: 前提条件を確認する

Gatsby をインストールする前に、Web サイト環境に NodeJS と npm をインストールする必要があります。 コード管理には Git も必要です。 前提条件をインストールする手順は、実行しているオペレーティング システムによって異なります。

Windows を使用している場合は、ダウンロード ページのインストーラーから NodeJS と Git をインストールできます。 同じことがMacでも可能です。 ただし、Linux を実行する場合は、apt などのパッケージ インストーラーが必要です。

ステップ 2: Gatsby をインストールする

NodeJS と Git をインストールしたら、Gatsby のインストールを開始できます。 これを行う最も簡単な方法は、ソフトウェア ターミナルで次のコマンドを使用することです。

 npm install -g gatsby-cli

このコマンドは、インストーラーを自動的に実行します。 Gatsby をインストールする前に、最初にすべての依存関係をダウンロードしてインストールします。 それが完了したら、最初の Gatsby Web サイトの作成を開始できます。

ステップ 3: Gatsby サイトを作成する

Gatsby Web サイトを作成するには、次のコマンドを実行する必要があります。

 gatsby new gatsby-site

このコマンドは、Gatsby スターター テンプレートのクローンを作成し、ディレクトリ/gatsby-wordpressに配置します。 複製とインストールが完了したら、サイトの開発バージョンを開くことができます。 これは、次のコマンドを使用して行います。

 gatsby develop

開発環境の実行中に、新しい Web サイトにローカルでアクセスできます。 Web ブラウザーでhttp://localhost:8000と入力すると、デフォルトのテンプレートが開きます。

このページが表示されたら、Web サイトの作成を開始できます。 これは、それらの Web サイトのパブリック ディレクトリに静的ファイルを作成することを意味します。 次のコマンドは、 tohse 静的ファイルの生成を自動的に開始します。

 gatsby build

このコマンドは、Web サイトのルーティング前の JavaScript コード バンドルも生成します。 次に serve コマンドを使用して、ローカルで新しい Web サイトを表示できます。

 gatsby serve

このコマンドは、ビルド コマンドを既に実行している場合にのみ機能します。

ステップ 4: Gatsby を WordPress に接続する

これで基本的な静的 Web サイトができましたが、WordPress と統合する必要があります。 これにより、Gatsby サイトが WordPress ブログのアドレスを指すようになり、開発サーバーの実行時に最新のデータをプルできるようになります。 接続すると、Gatsby は現在の WordPress テンプレートに基づいて静的 Web サイトを構築します。

2 つを接続するには、WordPress 用の Gatsby プラグインをインストールする必要があります。 次のコマンドがそれを処理します。

 npm install gatsby-source-wordpress

プラグインをインストールしたら、Gatsby の構成を開始できます。

ステップ 5: Gatsby を構成する

Gatsby を構成するには、 gatsby-config.jsファイルを操作する必要があります。 そのファイルに、次のコードを追加します。

 module.exports = { ... plugins: [ ..., { resolve: `gatsby-source-wordpress`, options: { // your WordPress source baseUrl: `wpexample.com`, protocol: `https`, // is it hosted on wordpress.com, or self-hosted? hostingWPCOM: false, // does your site use the Advanced Custom Fields Plugin? useACF: false } }, ] }

このコードを更新して、WordPress Web サイトを指すようにします。 Web サイトがローカルでホストされている場合、baseUrl の後に、Web サイトの URL の代わりにlocalhost:8888/wordpressを使用できます。 ファイルを保存したら、ページ テンプレートを作成する必要があります。

ステップ 6: ページ テンプレートを作成する

ページ テンプレートを作成すると、Gatsby は WordPress Web サイトのすべてのページの投稿を生成できます。 ソース プラグインは、これらのページに必要なデータを WordPress から取得しますが、デザイン テンプレートを作成する必要があります。

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

 const path = require(`path`) const { slash } = require(`gatsby-core-utils`) exports.createPages = async ({ graphql, actions }) => { const { createPage } = actions // query content for WordPress posts const result = await graphql(` query { allWordpressPost { edges { node { id slug } } } } `) const postTemplate = path.resolve(`./src/templates/post.js`) result.data.allWordpressPost.edges.forEach(edge => { createPage({ // will be the url for the page path: edge.node.slug, // specify the component template of your choice component: slash(postTemplate), // In the ^template's GraphQL query, 'id' will be available // as a GraphQL variable to query for this posts's data. context: { id: edge.node.id, }, }) }) }

WordPress からすべてのデータを呼び出した後、Gatsby は各投稿のページを生成します。 開発コマンドを使用すると、生成された URL を使用して新しい各ページに移動できます。

WordPress に Gatsby を使用する必要がありますか?

Gatsby は Web サイトの速度とセキュリティを向上させることができますが、すべての人にとって正しい選択ではありません。 Web サイトに頻繁に変更されない静的コンテンツがある場合、Gatsby は有益です。 ただし、Web サイトに動的コンテンツが必要な場合は、従来の WordPress の方が適している可能性があります。

WP Engine でサイトを最大限に活用する

Gatsby は、WordPress と簡単に統合できる効果的な静的 Web サイト ジェネレーターです。 システムをインストールして構成するには、従う必要のある手順があります。 開始する前に、Gatsby と GraphQL についての知識も必要です。

静的コンテンツは Web サイトの速度とセキュリティを向上させますが、適切なホストも必要です。 WP エンジンは、優れたデジタル エクスペリエンスを作成するための Web サイトに最適なリソースを提供します。 これにより、開発に集中する時間が増えます。