NEWS お知らせ

ChatGPT・Claude APIをWordPressに実装する方法

2026.5.28

「自社のWebサイトにAIを使いたいけれど、何から手を付ければいいかわからない」——WordPressを使うWeb担当者や経営者の方から、こうした相談を毎月10件以上いただいています。AIツールの導入を検討しても、「プラグインでできる範囲に限界を感じる」「APIを使いたいが実装方法がわからない」という壁にぶつかる方は少なくありません。本記事では、ChatGPT（GPT-4o）とClaude APIをWordPressにプラグインなしで直接実装する方法を、実際のコード例・比較表・失敗パターンとともに具体的に解説します。

1 1. プラグインでなくAPIを直接実装する3つのメリット
2 2. 実装前の準備：APIキー取得・環境チェック
3 3. WordPress REST API × Claude APIの実装手順（全3ステップ）
4 4. 主要AIモデル比較表：ChatGPT・Claude・Gemini どれを選ぶ？
5 5. 実装時のよくある失敗4パターンと対策
6 まとめ：段階的なAI実装で自社サイトの価値を最大化する

1. プラグインでなくAPIを直接実装する3つのメリット

プラグイン型とAPI直接実装の比較（コスト・自由度・セキュリティ） — 図1：プラグイン型 vs API直接実装コスト・自由度比較

WordPressにAI機能を追加する方法には、AIプラグインを使う方法とAI APIを直接組み込む方法の2択があります。中小企業の現場では手軽なプラグインが選ばれがちですが、本格活用を目指すならAPI実装が圧倒的に有利です。

① カスタマイズの自由度が段違い：自社のプロンプト・出力形式・UIを100%自社仕様に最適化できます。プラグインでは「○○機能を追加したいが対応していない」という制約が頻繁に発生します。

② コストが最大70%削減できる：AIプラグインは月額固定費（$20〜$100程度）がかかるのに対し、API従量課金なら実際の利用量だけ支払えばOKです。Claude Haikuの場合、1万文字あたり数円以下という驚異的な低コストを実現できます。

③ セキュリティとデータ管理を自社で完結：問い合わせ内容や顧客情報をAIに処理させる場合、外部サービスを経由せずに自社サーバー内でAPIキーとデータを管理できる点は企業にとって重要な要件です。

2. 実装前の準備：APIキー取得・環境チェック

実装に必要なものは3つだけです。まずAI APIキーの取得から始めます。OpenAI（ChatGPT）はplatform.openai.comでアカウント作成後にAPIキーを発行します。Anthropic（Claude）はconsole.anthropic.comから取得します。どちらも無料トライアル枠（$5〜$18相当）が付いているため、まずはテスト利用から始められます。

次にWordPress実行環境の確認です。PHP 8.0以上・WordPress 6.0以上を推奨します。特に注意が必要なのは、共有レンタルサーバーで外部APIへのHTTPS通信が許可されているかどうかです。wp_remote_post()関数で外部URLにアクセスできれば問題ありません。

最後に子テーマまたはカスタムプラグインの準備です。テーマファイルを直接編集するとWordPressアップデートで上書きされます。必ず子テーマのfunctions.phpか専用プラグインファイルに実装しましょう。

🔔 キャンバスラボへの導入相談はこちら

「API実装の技術的なハードルが高い」「自社サイトに何のAIが適しているか知りたい」というご相談を承っています。

→ 無料相談フォームへ（所要3分）

3. WordPress REST API × Claude APIの実装手順（全3ステップ）

WordPressとAI APIの実装フロー：フロントエンド→REST API→Claude API — 図2：WordPress × AI API 実装フロー（3ステップ）

実装の基本的な流れは「①フロントエンドからWordPress REST APIにリクエスト → ②PHPがAI APIに問い合わせ → ③レスポンスをフロントエンドに返す」という3ステップです。直接外部APIをJavaScriptから呼び出すとCORSエラーが発生するため、必ずWordPress（PHP）を中継させます。

ステップ1：カスタムREST APIエンドポイントの登録

add_action('rest_api_init', function() {
    register_rest_route('canvas/v1', '/ai-chat', [
        'methods'             => 'POST',
        'callback'            => 'canvas_ai_chat_handler',
        'permission_callback' => '__return_true',
    ]);
});

function canvas_ai_chat_handler(WP_REST_Request $request) {
    $user_message = sanitize_text_field($request->get_param('message'));
    $api_key      = defined('CLAUDE_API_KEY') ? CLAUDE_API_KEY : '';

    $response = wp_remote_post('https://api.anthropic.com/v1/messages', [
        'headers' => [
            'x-api-key'         => $api_key,
            'anthropic-version' => '2023-06-01',
            'Content-Type'      => 'application/json',
        ],
        'body'    => json_encode([
            'model'      => 'claude-haiku-4-5-20251001',
            'max_tokens' => 512,
            'system'     => 'あなたはキャンバスのWebサイト担当AIです。Web制作・SEO・デジタルマーケティングに関するご質問にお答えします。',
            'messages'   => [['role' => 'user', 'content' => $user_message]],
        ]),
        'timeout' => 30,
    ]);

    if (is_wp_error($response)) {
        return new WP_Error('api_error', 'AI APIとの通信に失敗しました', ['status' => 500]);
    }
    $body = json_decode(wp_remote_retrieve_body($response), true);
    return rest_ensure_response(['reply' => $body['content'][0]['text'] ?? '']);
}

ステップ2：wp-config.php にAPIキーを安全に定義

APIキーをソースコードに直書きすると、Gitリポジトリや共有環境でキーが漏洩するリスクがあります。wp-config.phpに定数として定義し、Gitの.gitignoreでwp-config.phpを除外設定してください。

define('CLAUDE_API_KEY', 'sk-ant-xxxxxxxxxxxxxxxx');

ステップ3：フロントエンドからAPIを呼び出す

nonce（ワンタイムトークン）を付与することでCSRF攻撃を防ぎながら、JavaScript側からREST APIを叩きます。

const response = await fetch('/wp-json/canvas/v1/ai-chat', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-WP-Nonce':   wpApiSettings.nonce,
    },
    body: JSON.stringify({ message: userInput }),
});
const data = await response.json();
document.getElementById('ai-reply').textContent = data.reply;

4. 主要AIモデル比較表：ChatGPT・Claude・Gemini どれを選ぶ？

ChatGPT・Claude・GeminiのコストとWordPress適合度のマトリクス — 図3：AIモデル選定マトリクス（コスト×WordPress適合度）

WordPressと組み合わせるAI APIは用途によって最適解が変わります。以下の比較表を参考に選定してください。

項目	ChatGPT（GPT-4o）	Claude（Haiku）	Gemini 1.5 Flash
得意分野	汎用・コード生成	長文・安全性・速度	マルチモーダル
日本語精度	◎ 非常に高い	◎ 非常に高い	○ 高い
入力コスト目安	$2.50/1Mトークン	$0.25/1Mトークン	$0.075/1Mトークン
レスポンス速度	○ 普通〜速い	◎ 最速級（0.8秒〜）	◎ 高速
WordPress向き度	★★★★☆	★★★★★	★★★☆☆
おすすめ用途	コード補助・FAQ生成	問い合わせ補助・記事生成	画像解析・分類

コスト最優先ならGemini、精度と速度のバランスを重視するならClaude Haiku、コード生成を多用するならChatGPTが適しています。キャンバスラボでは問い合わせ対応補助やFAQ自動化の実装事例において、Claude Haikuをメインに採用しています。

5. 実装時のよくある失敗4パターンと対策

WordPress AI実装でよくある4つの失敗パターンと対策 — 図4：AI実装よくある失敗4パターンと対策まとめ

AI API実装のプロジェクトで繰り返し発生するつまずきを事前に把握しておくと、開発工数を大幅に削減できます。

失敗①：CORSエラーでAPIが呼び出せない
JavaScriptから外部AIのAPIを直接呼び出すとブラウザのCORSポリシーに引っかかります。必ずWordPress（PHP）側を中継（プロキシ）させるのが正解です。本記事のステップ3がその解決策です。

失敗②：APIキーがソースコードに露出する
JavaScriptにAPIキーを直書きすると、ブラウザの開発者ツールから誰でも確認できてしまいます。wp-config.phpの定数定義と、.htaccessでのwp-config.phpへの直接アクセス禁止を必ず設定しましょう。

失敗③：レスポンス遅延でユーザー体験が悪化する
AIのレスポンスは1〜5秒かかることがあります。ローディングアニメーション表示とタイムアウト設定（推奨30秒）を実装することで、ユーザーの離脱を防げます。

失敗④：汎用プロンプトで精度が低い
「何でも答えてください」では自社サービスに特化した回答が返りません。システムプロンプトに役割・対象ドメイン・回答スタイルを明示することで、精度が大幅に向上します。

まとめ：段階的なAI実装で自社サイトの価値を最大化する

WordPressへのAI実装は、今や大企業だけの選択肢ではありません。実際に、キャンバスが支援した中小企業のWebサイトでは、FAQ補助AIの導入後に問い合わせ対応工数が月間約40%削減された事例があります。Claude Haikuなら1万文字あたり数円以下というコストで、自社サイトに高品質なAI機能を追加できます。まずはFAQチャットボットや問い合わせ補助AIから試験導入し、データを蓄積しながら段階的に拡張していくアプローチがリスクを最小化します。キャンバスラボのブログでは、今後も具体的な実装事例・最新AIツール情報を継続発信します。また、Webサイトのアクセス解析に関する記事もあわせてご参照ください。

「自社サイトにどのAIを、どう組み込むべきか」というご相談をお待ちしています。営業電話は一切なく、ご相談内容は厳密に秘密厳守で対応いたします。初回相談から具体的なご提案まで、貴社の課題に合わせたサポートを提供しています。無料相談フォームへ（所要3分）→

無料相談する VIEW MORE

＜PREV

商業施設DX化で集客が変わる｜体験型デジタルコンテンツ3つの成功事例

NEXT＞