2026年10月27日

WordPressのEleventyと連携してSSGサイトを作る方法

テーマ・デザイン

はじめに

<2〜3段落でテーマの概要と重要性を説明>

ステップ1: WordPressからデータを取得する

# WordPressのデータベース情報を設定ファイルに保存
export WP_DB_HOST=localhost
export WP_DB_NAME=wordpress
export WP_DB_USER=root
export WP_DB_PASS=password

# wp-cliを使用してWordPressデータをエクスポート
wp db export wordpress_data.sql --path=/var/www/html/wordpress

ステップ2: Eleventyプロジェクトの初期化

# プロジェクトディレクトリを作成
mkdir eleventy-wordpress && cd eleventy-wordpress

# package.jsonを作成し、必要なモジュールをインストール
npm init -y
npm install --save @11ty/eleventy @wordpress/api-fetch axios lodash

ステップ3: WordPressデータの取得と変換

# データベースから記事情報を取得するスクリプトを作成
mkdir src && touch src/get-articles.js

# get-articles.jsに以下の内容を追加
cat << 'EOF' > src/get-articles.js
import axios from 'axios';
const WP_API_URL = 'http://localhost/wordpress/wp-json/wp/v2/posts';

async function fetchArticles() {
  const response = await axios.get(WP_API_URL);
  return response.data;
}

export default fetchArticles;
EOF

# Eleventyのデータソースとして記事情報を取得
mkdir .eleventy.js && touch .eleventy.js

# .eleventy.jsに以下の内容を追加
cat << 'EOF' > .eleventy.js
const articles = require('./src/get-articles');
module.exports.addDataContextFn = async function (context) {
  context.articles = await articles();
};
EOF

ステップ4: テンプレートファイルの作成と配置

# index.htmlのテンプレートを作成
mkdir src/templates && touch src/templates/index.html

# index.htmlに以下の内容を追加
cat << 'EOF' > src/templates/index.html
---
layout: default
title: Eleventy WordPress SSG Site
---

<header>
  <h1><a href="/">{{ title }}</a></h1>
</header>

<main>
  {{ articles | json }}
</main>
EOF

# デフォルトのレイアウトテンプレートを作成
mkdir src/layouts && touch src/layouts/default.html

# default.htmlに以下の内容を追加
cat << 'EOF' > src/layouts/default.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>{{ title }}</title>
</head>
<body>
  {% block content %}{% endblock %}
</body>
</html>
EOF

# テンプレートファイルを実行してHTMLを生成
npx @11ty/eleventy

注意事項

<実践的な注意点1>: セキュリティ設定の確認と適切な認証情報の管理が必要です。
<実践的な注意点2>: WordPressデータベースへのアクセス権限を考慮してください。
<セキュリティ上の注意>: データ転送時に暗号化を行うこと。
<パフォーマンス/運用上の注意>: 生成した静的ファイルは適切なキャッシュ設定で配信することが推奨されます。

まとめ

1. <キー1>: WordPressのデータを効率的に取得する方法を理解してください。

2. <キー2>: Eleventyを使用して静的なウェブサイトを作成することの利点を把握します。

3. <キー3>: テンプレートファイルとデータソースの関係性について学びます。

4. <キー4>: 実際の運用環境でのパフォーマンス最適化策を検討します。

5. <キー5>: 連携システムにおけるセキュリティ対策の重要性を認識します。