2026年7月6日

WordPressのGatsbyサイトを構築する方法

カスタマイズ

はじめに

この記事では、WordPressのコンテンツを活用しながら、Gatsbyという先進的な静的サイトジェネレーターで動的なWebサイトを作成する方法について詳しく紹介します。これにより、高速なパフォーマンスと効率的な開発プロセスを実現できます。

症状・背景

このテーマが必要になる主な場面:

WordPressから静的サイトに移行したい場合
サイトの読み込み速度を大幅に向上させたい場合
動的なコンテンツと静的なページを組み合わせたハイブリッドアプローチを取りたい場合
フロントエンド開発者の視点から、より効率的にサイトを管理したい場合

手順・設定方法

ステップ1: WordPressデータベースのエクスポートと準備

# WordPressデータベースのバックアップを作成します。
mysqldump -u [DB_USER] -p[DB_PASSWORD] [DB_NAME] > wp_backup.sql

# Gatsbyプロジェクト用に新しいディレクトリを作成します。
mkdir gatsby-wordpress-site
cd gatsby-wordpress-site

ステップ2: Gatsbyプロジェクトの初期化と設定

# Gatsby CLIをインストールします。
npm install -g gatsby-cli

# 新しいGatsbyプロジェクトを作成します。
gatsby new wp-gatsby-site

# WordPressからデータを抽出するためのプラグインをインストールします。
cd wp-gatsby-site
npm install @tryghost/gatbsy-source-graphql

ステップ3: GraphQL APIとデータソースの設定

# Gatsbyプロジェクトの設定ファイルを開きます。
code gatsby-config.js

# WordPressとの連携を設定するために、GraphQL APIの情報を追加します。
// gatsby-config.js
plugins: [
  {
    resolve: `gatsby-source-graphql`,
    options: {
      typeName: `WPGraphQL`,
      fieldName: `wpgraphql`,
      url: `http://localhost/graphql`, // WordPress GraphQLエンドポイントのURL
      headers: {
        Authorization: process.env.WP_GITHUB_TOKEN, // 必要な場合、認証トークンを設定します。
      },
    },
  },
],

ステップ4: カスタムコンポーネントとスタイルの追加

# プロジェクト用に新しいCSSファイルを作成し、スタイルを適用します。
touch src/css/site.css
code src/css/site.css

// src/css/site.css
body {
  background-color: #fff;
  font-family: Arial, sans-serif;
}

# WordPressからのデータを使用してページを構築するためのコンポーネントを作成します。
cd src/pages
code index.js

// src/pages/index.js
import React from "react"
import { useStaticQuery, graphql } from "gatsby"

const IndexPage = () => {
  const data = useStaticQuery(graphql`
    query {
      allWpPost {
        edges {
          node {
            id
            title
            excerpt
            slug
            date(formatString: "YYYY-MM-DD")
          }
        }
      }
    }
  `)
  
  return (
    <div>
      {data.allWpPost.edges.map(post => (
        <article key={post.node.id}>
          <h2>{post.node.title}</h2>
          <time dateTime={post.node.date}>{post.node.date}</time>
          <p dangerouslySetInnerHTML={{ __html: post.node.excerpt }} />
        </article>
      ))}
    </div>
  )
}

export default IndexPage

注意事項

サイトの移行前に必ずバックアップを取ること。
GatsbyとWordPress間でデータ同期を行う際は、セキュリティ上の問題に注意すること。
データベースの大規模なサイトでは、エクスポートとインポートが時間のかかる作業となるため、適切な計画を立てて対応すること。
カスタムフィールドやカスタムポストタイプの取り扱いには、特別な設定が必要になる場合がある。

まとめ

1. バックアップ: 移行前に必ずデータベースとコンテンツのバックアップを取ること。

2. セキュリティ: APIの利用時には適切な認証やアクセス制御を行ってください。

3. テスト: リリース前の十分なテストを行い、パフォーマンスと機能が期待通りに動作することを確認してください。

4. 更新管理: WordPress側でのコンテンツ更新はGatsbyのビルドプロセスによって反映されるため、適切なスケジュールでサイトを再構築することが重要です。

Post Views: 8