2026年7月25日

WordPressのSvelteKitで構築する方法

テーマ・デザイン

はじめに

この記事では、WordPressとSvelteKitというフレームワークを組み合わせて使用する方法について説明します。SvelteKitは新しいSPA(Single Page Application)のフレームワークであり、その特性を利用してWordPressサイトを高速化することができます。

症状・背景

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

高性能でスムーズなユーザー体験を求める
SPAを活用したWebアプリケーション開発に興味がある
ページ読み込み時間の短縮を図りたい
WordPressとSvelteKitを組み合わせて新しい開発アプローチを探している

手順・設定方法

ステップ1: WordPressとSvelteKitプロジェクトの初期化

# WordPressサイトのセットアップを完了させます。
wp core download --locale=ja_JP

# SvelteKitプロジェクトを作成します。
npm init svelte@next my-sveltekit-project
cd my-sveltekit-project

ステップ2: APIエンドポイントの設定

# WordPress REST APIを有効にします。
wp plugin install wp-api-plugin --activate

# カスタムAPIエンドポイントを作成します。
cat << EOF > ./src/routes/api/posts.js
import { handle } from '$app/server';

export async function GET({ params }) {
    const posts = await fetch(`https://your-wordpress-site.com/wp-json/wp/v2/posts`).then(response => response.json());
    return handle({
        request: { method: 'GET', url: `/api/${params.id}` },
        params
    });
}
EOF

ステップ3: SvelteKitプロジェクトにWordPressデータを統合

# WordPressから取得したデータを使用してページを生成します。
cat << EOF > ./src/routes/blog/[...slug].js
import { handle } from '$app/server';
import axios from 'axios';

export async function get({ params }) {
    const post = await axios.get(`https://your-wordpress-site.com/wp-json/wp/v2/posts?slug=${params.slug}`);
    return {
        status: 200,
        body: post.data
    };
}
EOF

# カスタムフックを定義します。
cat << EOF > ./src/hooks.server.js
import { handle } from '$app/server';
import axios from 'axios';

export const prerender = true;

export async function handle({ request, resolve }) {
    if (request.url.startsWith('/api/')) {
        return await fetch(`https://your-wordpress-site.com${request.url}`).then(response => response.text());
    }
    return await resolve(request);
}
EOF

ステップ4: WordPressとSvelteKitの統合を確認

# サーバーを起動し、動作確認を行います。
npm run dev -- --open

注意事項

安全にデータ通信を行うためにAPIエンドポイントへのアクセス制御を適切に行うことが重要です。
WordPressのパフォーマンス改善はキャッシュ設定なども併せて行うことでより効果的になります。
SvelteKitとWordPressを統合する際には、セキュリティ対策としてCSRFやXSSに注意が必要です。

まとめ

1. WordPressのREST API有効化: WordPress REST APIプラグインをインストールし、有効化します。

2. SvelteKitプロジェクト作成: SvelteKitを使用して新しいプロジェクトを作成します。

3. カスタムAPIエンドポイント設定: 自分独自のAPIエンドポイントを作成します。

4. WordPressデータ統合: WordPressから取得したデータをページに統合します。

5. 統合確認: サーバーを起動し、動作確認を行います。

Post Views: 16