2026年6月16日

WordPressのLaravel + Inertia.js連携方法

テーマ・デザイン

はじめに

この記事では、従来のWordPressとLaravelフレームワークを使用してWebサイトを作成し、Inertia.jsを利用してSPA（Single Page Application）風のユーザー体験を提供する方法について説明します。これにより、より高速でスムーズなUI/UXが実現できます。

症状・背景

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

WordPressを既存のCMSとして使用しているが、SPAのようなモダンなユーザー体験を提供したい場合
LaravelフレームワークとInertia.jsを利用して既に開発環境を整えているが、WordPressとの連携を模索している場合
従来のWebサイトでのページ遷移時のローディング時間を改善し、高速化を図りたい場合

手順・設定方法

ステップ1: Laravelプロジェクトの作成と初期設定

# まず、新しいLaravelプロジェクトを作成します。
laravel new wp-laravel-inertia

# WordPressとの通信を行うため、composerでwp-remote-clientパッケージをインストールします。
composer require laravel/tinker wp-api/wp-remote-client

ステップ2: Inertia.jsのセットアップ

# LaravelプロジェクトにInertia.jsとVue.jsを追加する
npm install @inertiajs/inertia @inertiajs/inertia-vue3 vue

# Vueコンポーネントを作成し、Inertia.jsを使用して初期設定を行います。
touch resources/js/Pages/Home.vue

ステップ3: WordPressとの連携設定

# Laravelプロジェクト内にwp-config.phpを設置します。これはWordPressのAPIキーとURL情報を含みます。
cp /path/to/your/wp-config.php .env

# wp-remote-clientを使用して、LaravelからWordPress APIへアクセス可能にするための設定を行います。
php artisan make:command WpCommand --plain

ステップ4: 設定を実践し、問題解決を行う

# 作成したコマンドファイルwp-command.phpに以下のようにコードを追加します。これにより、LaravelからWordPressへのAPI呼び出しが可能になります。
namespace App\Console\Commands;

use Illuminate\Console\Command;
use WP_Rest_API_Client\ClientFactory;

class WpCommand extends Command
{
    protected $signature = 'wp:call {url}';
    protected $description = 'Call WordPress REST API';

    public function handle()
    {
        // ローカル環境のWordPressサイトに接続します。
        $client = (new ClientFactory())->create('http://localhost/wordpress', [
            'consumer_key' => 'your-key',
            'consumer_secret' => 'your-secret',
        ]);

        // 指定されたURLでGETリクエストを実行し、レスポンスを表示します。
        $response = $client->get($this->argument('url'));
        echo json_encode($response, JSON_PRETTY_PRINT);
    }
}

注意事項

セキュリティ上の注意: WordPressとLaravel間での通信はSSLで保護されていることを確認してください。また、APIキーの管理にも十分に注意を払ってください。
パフォーマンス/運用上の注意: Inertia.jsを使用すると、ページ読み込み時に小さな遅延が生じることがあります。これは通常のブラウザキャッシュと同様の問題であり、適切なCDNやキャッシュ戦略で解決可能です。

まとめ

1. Laravelプロジェクトの作成: Laravel CLIを使って新しいプロジェクトを作ります。

2. Inertia.jsのインストール: Vue.jsと共にInertia.jsをnpmでインストールします。

3. WordPressとの連携設定: wp-remote-clientを通じて、LaravelからWordPressへのAPIアクセスを可能にします。

4. セキュリティとパフォーマンス管理: APIキーの適切な管理とCDNやキャッシュ戦略により、セキュリティとパフォーマンスを確保します。

Post Views: 4