DifyとWordPress連携！自作チャットボット開発事例

「自社のWordPressサイトに、独自の知識を持ったAIチャットボットを設置したい」

そう考えたとき、既存のチャットボットツールは高額だったり、カスタマイズ性が低かったりすることがあります。

そこで今回は、DifyとWordPressを連携させ、完全にカスタマイズ可能なAIチャットボットを自作した開発事例をご紹介します。

無料のフォームプラグイン「Contact Form 7」をフロントエンドとして利用し、裏側でDifyのAPIを叩くという、ユニークかつコストパフォーマンスの高い構成です。

開発の全体像と仕組み

今回のシステム構成は以下の通りです。ユーザーがページを開いている間は会話の文脈（コンテキスト）を維持し、ページを閉じるとリセットされる仕様にしています。

構成要素：

1. WordPress (Contact Form 7): チャットの入力インターフェースとして利用。
2. JavaScript (Frontend): 画面の描画と、会話ID（conversation_id）の管理を担当。
3. PHP (Backend): APIキーを隠蔽するためのプロキシ（中継）役。
4. Dify API: AIの頭脳。回答を生成して返します。

実装ステップ1：DifyでのAPI準備

まずはDify側で、外部からアクセスするための「窓口」を作ります。

1. Difyでチャットボットアプリを作成します。
2. サイドメニューの「APIアクセス」から、新しいAPIキーを発行し、コピーしておきます。

実装ステップ2：WordPressフォームの作成

入力フォームには、普及率の高い「Contact Form 7」プラグインを利用します。

チャット用として使うため、極限までシンプルな構成にします。

<div id="chat-interface"> <div id="your-history"><!-- ここに会話履歴が表示されます --></div> [textarea your-question placeholder "AIに質問を入力してください..."] [submit "送信"] </div>

実装ステップ3：JavaScriptでの会話制御

ここが開発のキモとなる部分です。JavaScriptを使って以下の処理を実装します。

• フォームの送信イベントをフック（横取り）する。
• ユーザーの入力を画面に即時表示する。
• 「考え中…」のアニメーションを表示する。
• sessionStorage を使って conversation_id を保存し、文脈を維持する。

Dify_custom_Script.js というファイルを作成し、以下のコードを記述します。

document.addEventListener('DOMContentLoaded', function() { const historyContainer = document.getElementById('your-history'); const userInputField = document.querySelector('[name="your-question"]'); const submitBtn = document.querySelector('.wpcf7-submit');

// セッションから会話IDを取得（なければ空）
let conversationId = sessionStorage.getItem('dify_conversation_id') || '';

submitBtn.addEventListener('click', function(e) {
    e.preventDefault(); // 通常の送信をキャンセル
    
    const userMessage = userInputField.value.trim();
    if (!userMessage) return;

    // 1. ユーザーのメッセージを表示
    appendMessage('user', userMessage);
    userInputField.value = '';

    // 2. 「考え中」を表示
    const thinkingId = showThinking();

    // 3. PHP経由でDify APIを叩く
    const formData = new FormData();
    formData.append('action', 'dify_chat_proxy');
    formData.append('query', userMessage);
    formData.append('conversation_id', conversationId); // 会話IDを送信

    fetch('/wp-admin/admin-ajax.php', {
        method: 'POST',
        body: formData,
    })
    .then(res => res.json())
    .then(data => {
        removeThinking(thinkingId);
        
        if (data.success) {
            // AIの回答を表示
            appendMessage('ai', data.data.answer);
            
            // 新しい会話IDが返ってきたら保存（これで会話が繋がる）
            if (data.data.conversation_id) {
                conversationId = data.data.conversation_id;
                sessionStorage.setItem('dify_conversation_id', conversationId);
            }
        } else {
            appendMessage('error', 'エラーが発生しました。');
        }
    })
    .catch(err => {
        removeThinking(thinkingId);
        appendMessage('error', '通信エラーが発生しました。');
    });
});
});

// ※appendMessage等のヘルパー関数は省略（実際のコードに合わせて実装してください）

実装ステップ4：PHPでのAPI中継（セキュリティ対策）

JavaScriptに直接APIキーを書くと、サイト訪問者にキーが漏洩してしまいます。

そのため、WordPressの functions.php に中継用（プロキシ）の関数を作成し、そこでAPIキーを使用します。

// functions.php に追記

add_action('wp_ajax_dify_chat_proxy', 'dify_chat_proxy'); add_action('wp_ajax_nopriv_dify_chat_proxy', 'dify_chat_proxy');

function dify_chat_proxy() { $dify_api_key = 'YOUR_DIFY_API_KEY'; // ここにAPIキーを設定 $user_message = $_POST['query']; $conversation_id = $_POST['conversation_id'];

$body = [
    'inputs' => [],
    'query' => $user_message,
    'response_mode' => 'blocking',
    'conversation_id' => $conversation_id,
    'user' => 'wp_user'
];

$response = wp_remote_post('[https://api.dify.ai/v1/chat-messages](https://api.dify.ai/v1/chat-messages)', [
    'headers' => [
        'Authorization' => 'Bearer ' . $dify_api_key,
        'Content-Type' => 'application/json',
    ],
    'body' => json_encode($body),
    'timeout' => 60,
]);

if (is_wp_error($response)) {
    wp_send_json_error(['message' => 'API Error']);
} else {
    $data = json_decode(wp_remote_retrieve_body($response), true);
    wp_send_json_success($data);
}
wp_die();
}

実装ステップ5：CSSでのデザイン調整

最後に、チャット画面らしく見せるためのCSSを適用します。

吹き出しのデザインやアイコンの配置、スクロールバーの制御などを行います。

/* チャットエリアのスタイル例 */ #your-history { max-height: 500px; overflow-y: auto; background-color: #f9f9f9; padding: 20px; border-radius: 10px; margin-bottom: 20px; }

.ai-message { background-color: #e1f5fe; padding: 10px 15px; border-radius: 15px; margin-bottom: 10px; display: inline-block; }

.user-message { background-color: #dcedc8; padding: 10px 15px; border-radius: 15px; margin-bottom: 10px; text-align: right; display: block; }

完成したチャットボットの動作

以上の手順で実装したチャットボットは、以下のように動作します。

• ページを開いている間は、会話の流れ（コンテキスト）を記憶し続けます。
• ブラウザを閉じたり、再読み込みをすると会話がリセットされ、新しいセッションとして始まります。

まとめ

DifyとWordPressを組み合わせることで、高機能なAIチャットボットを、驚くほど低コストで自社サイトに導入することができます。

今回の事例のように「Contact Form 7」という既存の資産を活用することで、ゼロから開発する工数を大幅に削減できるのも大きなメリットです。

ぜひ、あなたのWebサイトにもオリジナルのAIアシスタントを実装してみてください。

「自社のWordPressサイトに、独自の知識を持ったAIチャットボットを設置したい」

そう考えたとき、既存のチャットボットツールは高額だったり、カスタマイズ性が低かったりすることがあります。

そこで今回は、DifyとWordPressを連携させ、完全にカスタマイズ可能なAIチャットボットを自作した開発事例をご紹介します。

無料のフォームプラグイン「Contact Form 7」をフロントエンドとして利用し、裏側でDifyのAPIを叩くという、ユニークかつコストパフォーマンスの高い構成です。

開発の全体像と仕組み

今回のシステム構成は以下の通りです。ユーザーがページを開いている間は会話の文脈（コンテキスト）を維持し、ページを閉じるとリセットされる仕様にしています。

構成要素：

1. WordPress (Contact Form 7): チャットの入力インターフェースとして利用。
2. JavaScript (Frontend): 画面の描画と、会話ID（conversation_id）の管理を担当。
3. PHP (Backend): APIキーを隠蔽するためのプロキシ（中継）役。
4. Dify API: AIの頭脳。回答を生成して返します。

実装ステップ1：DifyでのAPI準備

まずはDify側で、外部からアクセスするための「窓口」を作ります。

1. Difyでチャットボットアプリを作成します。
2. サイドメニューの「APIアクセス」から、新しいAPIキーを発行し、コピーしておきます。

実装ステップ2：WordPressフォームの作成

入力フォームには、普及率の高い「Contact Form 7」プラグインを利用します。

チャット用として使うため、極限までシンプルな構成にします。

<div id="chat-interface"> <div id="your-history"><!-- ここに会話履歴が表示されます --></div> [textarea your-question placeholder "AIに質問を入力してください..."] [submit "送信"] </div>

開発の全体像と仕組み

今回のシステム構成は以下の通りです。ユーザーがページを開いている間は会話の文脈（コンテキスト）を維持し、ページを閉じるとリセットされる仕様にしています。

構成要素：

1. WordPress (Contact Form 7): チャットの入力インターフェースとして利用。
2. JavaScript (Frontend): 画面の描画と、会話ID（conversation_id）の管理を担当。
3. PHP (Backend): APIキーを隠蔽するためのプロキシ（中継）役。
4. Dify API: AIの頭脳。回答を生成して返します。

実装ステップ1：DifyでのAPI準備

まずはDify側で、外部からアクセスするための「窓口」を作ります。

1. Difyでチャットボットアプリを作成します。
2. サイドメニューの「APIアクセス」から、新しいAPIキーを発行し、コピーしておきます。

• Difyにログインし、「設定」 > 「API Key」から新しいAPIキーを発行します。
• このキーはWordPressのJavaScriptコードで使用するので、コピーして控えておきます。

実装ステップ2：WordPressフォームの作成

入力フォームには、普及率の高い「Contact Form 7」プラグインを利用します。

チャット用として使うため、極限までシンプルな構成にします。

作成したフォームのショートコードを、会話を表示したいWordPressの固定ページや投稿に貼り付けます。

ステップ1: Difyでの準備

1. APIキーの発行:
   • Difyにログインし、「設定」 > 「API Key」から新しいAPIキーを発行します。
   • このキーはWordPressのJavaScriptコードで使用するので、コピーして控えておきます。

ステップ2: WordPressでの準備

1. プラグインのインストール:
   • WordPressのダッシュボードで「プラグイン」 > 「新規追加」から「Contact Form 7」をインストールして有効化します。
2. フォームの作成(Contact Form 7のショートコード作成):
   • 「お問い合わせ」メニューから新しいフォームを作成します。
   • フォームには、Contact Form 7で作成したユーザーが入力するテキストエリア（例: [textarea your-question]）と送信ボタン（[submit "送信"]）を含めます。
     
     <label> あなたの質問
　　　　[textarea your-question] </label>
[submit "送信"]
     

実装ステップ3：JavaScriptでの会話制御

ここが開発のキモとなる部分です。JavaScriptを使って以下の処理を実装します。

• フォームの送信イベントをフック（横取り）する。
• ユーザーの入力を画面に即時表示する。
• 「考え中…」のアニメーションを表示する。
• sessionStorage を使って conversation_id を保存し、文脈を維持する。

以下のコードをWordPressのテーマファイルに追加します。
子テーマのfunctions.phpのフックを使ってJavaScriptを追加します。

以下に組み込み方法を記載します。

1.Dify_custom_Script.jsを作成

エディタに以下のjavascript（Dify_custom_Script.js）を作成する。

注意：ファイルに保存するエンコードは必ずUTF-8で保存して下さい。

document.addEventListener('DOMContentLoaded', function() {
    console.log('--- [Debug] DOMContentLoaded: スクリプト初期化開始 ---');

    const historyContainer = document.getElementById('your-history');
    const userInputField = document.querySelector('[name="your-question"]');
    const chatForm = document.querySelector('.wpcf7-form');
    const submitBtn = document.querySelector('.wpcf7-submit');
    
    console.log('--- [Debug] 要素取得チェック:', {
        historyContainer: historyContainer ? 'OK' : 'MISSING',
        userInputField: userInputField ? 'OK' : 'MISSING',
        chatForm: chatForm ? 'OK' : 'MISSING',
        submitBtn: submitBtn ? 'OK' : 'MISSING'
    });

    if (!historyContainer || !userInputField || !chatForm || !submitBtn) {
        console.error('--- [Debug] 必須要素が見つからないため終了します ---');
        return;
    }
    
    let conversationId = sessionStorage.getItem('dify_conversation_id') || '';
    console.log('--- [Debug] 初期conversationId:', conversationId);

    // 送信ボタンのクリックイベントを「最優先」で登録
    submitBtn.addEventListener('click', function(e) {
        console.log('--- [Debug] Click Event発生 ---');
        
        e.preventDefault(); // CF7の標準動作を止める
        e.stopPropagation(); // 他の処理への伝播を止める
        console.log('--- [Debug] 1: 標準イベント停止完了 ---');
        
        const userMessage = userInputField.value.trim();
        console.log('--- [Debug] 2: 入力値:', userMessage);

        if (!userMessage) {
            console.log('--- [Debug] 中断: メッセージが空です ---');
            return;
        }

        console.log('--- Start Process: ' + userMessage + ' ---');

        // 1. ユーザー発言と「考え中」の表示
        const thinkingId = 'thinking-' + Date.now();
        console.log('--- [Debug] 3: thinkingId生成:', thinkingId);
        
        try {
            // ユーザー
            const uDiv = document.createElement('div');
            uDiv.className = 'user-message';
            uDiv.innerHTML = '<strong>あなた:</strong> ' + userMessage;
            historyContainer.appendChild(uDiv);

            // 考え中
            const tDiv = document.createElement('div');
            tDiv.id = thinkingId;
            tDiv.className = 'ai-response-wrapper';
            tDiv.innerHTML = `
                <img src="your_Icon_URL" class="ai-icon">
                <div class="ai-message thinking-dots">考え中<span>.</span><span>.</span><span>.</span></div>
            `;
            historyContainer.appendChild(tDiv);
            historyContainer.scrollTop = historyContainer.scrollHeight;
            console.log('--- [Debug] 4: DOM表示（ユーザー・考え中）完了 ---');
        } catch (domErr) {
            console.error('--- [Debug] DOM表示エラー:', domErr);
        }

        userInputField.value = ''; // 入力欄をクリア

        // 2. 通信実行
        console.log('--- [Debug] 5: Fetch準備開始 ---');
        const formData = new FormData();
        formData.append('action', 'dify_chat_proxy');
        formData.append('query', userMessage);
        formData.append('conversation_id', conversationId);
        formData.append('user', 'wordpress_user');

        console.log('--- [Debug] 6: Fetch実行直前 (admin-ajax.phpへ) ---');
        fetch('https://your_Domain/wp-admin/admin-ajax.php', {
            method: 'POST',
            body: formData,
        })
        .then(response => {
            console.log('--- [Debug] 7: HTTPレスポンス受信 ステータス:', response.status);
            if (!response.ok) throw new Error('Network response was not ok');
            return response.json();
        })
        .then(data => {
            console.log('--- [Debug] 8: JSONパース成功:', data);
            
            // 考え中を削除
            const target = document.getElementById(thinkingId);
            if (target) {
                target.remove();
                console.log('--- [Debug] 9: 考え中要素を削除しました ---');
            }

            if (data.success && data.data && data.data.answer) {
                console.log('--- [Debug] 10: AI回答表示開始 ---');
                const aiDiv = document.createElement('div');
                aiDiv.className = 'ai-response-wrapper';
                aiDiv.innerHTML = `
                    <img src="your_Icon_URL" class="ai-icon">
                    <div class="ai-message">${data.data.answer}</div>
                `;
                historyContainer.appendChild(aiDiv);
                
                if (data.data.conversation_id) {
                    conversationId = data.data.conversation_id;
                    sessionStorage.setItem('dify_conversation_id', conversationId);
                    console.log('--- [Debug] 11: conversationId更新:', conversationId);
                }
	    } else {
		// サーバー負荷やDify内部エラーを詳細に取得
                let errorMsg = 'サーバーからの応答がありません。';
                if (data.data && data.data.message) {
                    errorMsg = data.data.message;
                }
                // Dify内部のrawエラー（image_edc821.pngの内容）があればそれを優先
                if (data.data && data.data.dify_response_raw) {
                    try {
                        const raw = JSON.parse(data.data.dify_response_raw.body);
                        if (raw && raw.message) errorMsg = raw.message;
                    } catch(e) {}
                }
                console.error('--- [Debug] API側エラー詳細:', errorMsg);
                throw new Error(errorMsg);
            }
            historyContainer.scrollTop = historyContainer.scrollHeight;
        })
	.catch(err => {
	    console.error('--- [Debug] 12: Catch到達:', err.message);
            const target = document.getElementById(thinkingId);
            if (target) target.remove();
            
            const eDiv = document.createElement('div');
            eDiv.className = 'error-message';
            // サーバー高負荷（CPU 300%超）を考慮したメッセージを表示
            eDiv.innerHTML = `<strong>システム通知:</strong> ${err.message}<br><small>現在サーバーが非常に高負荷（CPU超過）です。しばらくしてから送信してください。</small>`;
            historyContainer.appendChild(eDiv);
        });
    }, true); // 「true」でキャプチャフェーズを使用

    // CF7の緑枠メッセージを強制非表示
    document.addEventListener('wpcf7mailsent', function() {
        console.log('--- [Debug] wpcf7mailsentイベント検知 ---');
        const out = document.querySelectorAll('.wpcf7-response-output');
        out.forEach(el => el.style.setProperty('display', 'none', 'important'));
    }, false);
});

• your-history：画面上で問合せ結果を表示するエリアIDを設定
• your-question: Contact Form 7の[textarea your-question]で指定した名前に合わせます。
• your_Icon_URL：Difyの応答に使用するアイコン画像のURLを設定
• your_Domain：あなたのWordpressサーバのドメインを設定

2. JavaScriptのサーバへの格納

Dify_custom_Script.jsをサーバ上のWordPressのテーマファイルに追加します。
この例ではSWLL ChildテーマのフォルダにDify_custom_Script.jsを格納。

3. functions.phpでJavaScriptをシステムに登録

Difyのjavascript（Dify_custom_Script.js）をシステムに登録するため使用しているテーマのfunctions.phpへ設定を追加

// Difyのjavascriptを登録
function enqueue_custom_scripts() {
    wp_enqueue_script(
        'custom-dify-chat',
        // './'を削除し、'/Dify_custom_Script.js'のみにする
        get_stylesheet_directory_uri() . '/Dify_custom_Script.js',
        array('jquery'),
        null,
        true
    );
}

エンドポイントを登録

add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

実装ステップ4：PHPでのAPI中継（セキュリティ対策）

JavaScriptに直接APIキーを書くと、サイト訪問者にキーが漏洩してしまいます。

そのため、WordPressの functions.php に中継用（プロキシ）の関数を作成し、そこでAPIキーを使用します。

Difyへのプロキシエンドポイントを登録

// Difyへのプロキシエンドポイントを登録
add_action('wp_ajax_dify_chat_proxy', 'dify_chat_proxy');
add_action('wp_ajax_nopriv_dify_chat_proxy', 'dify_chat_proxy');

function dify_chat_proxy() {
    // ユーザーからのPOSTデータを取得
    $user_message = isset($_POST['query']) ? sanitize_textarea_field($_POST['query']) : '';
	// UUIDを生成する新しいロジック
	$conversation_id = isset($_POST['conversation_id']) && !empty($_POST['conversation_id']) ? sanitize_text_field($_POST['conversation_id']) : '';
    $user_id = isset($_POST['user']) ? sanitize_text_field($_POST['user']) : 'anonymous_user';

    // ここでデバッグ用の出力を追加
    $debug_log = [
        'user_message' => $user_message,
        'conversation_id' => $conversation_id,
        'request_body' => [
            'inputs' => [],
            'query' => $user_message,
            'user' => $user_id,
            'response_mode' => 'blocking',
            'conversation_id' => $conversation_id,
        ],
    ];

    // Dify APIキー
    $dify_api_key = 'YOUR_DIFY_API_KEY';

    // Dify APIへのリクエストボディ
    $request_body = [
        'inputs' => new stdClass(), // [] ではなく {} として送信するために stdClass を使用
        'query' => $user_message,
        'user' => $user_id,
        'response_mode' => 'blocking',
        'conversation_id' => $conversation_id,
    ];

    // ここからデバッグログ
    $debug_log = [
        'user_message' => $user_message,
        'conversation_id' => $conversation_id,
        'request_body' => $request_body,
    ];

	// Dify APIにリクエストを送信
    $response = wp_remote_post('https://your_Dify_Domain/v1/chat-messages', [
        'headers' => [
            'Authorization' => 'Bearer ' . $dify_api_key,
            'Content-Type' => 'application/json',
        ],
        'body' => json_encode($debug_log['request_body']),
        'timeout' => 60,
    ]);

    // ここで$responseの値をデバッグログに追加
    $debug_log['dify_response_raw'] = $response;

    // Difyからの応答を処理
    if (is_wp_error($response)) {
        wp_send_json_error([
            'message' => 'Dify API Error: ' . $response->get_error_message(),
            'debug_log' => $debug_log,
        ]);
    }

    $body = wp_remote_retrieve_body($response);
    $data = json_decode($body, true);

    // 応答をJavaScriptに返す
    if (isset($data['answer'])) {
        wp_send_json_success([
            'answer' => $data['answer'],
            'debug_log' => $debug_log,
        ]);
    } else {
        wp_send_json_error([
            'message' => 'Invalid Dify API response',
            'dify_response' => $data,
            'debug_log' => $debug_log,
        ]);
    }

    wp_die();
}

• YOUR_DIFY_API_KEY: Difyで発行したAPIキーに置き換えます。
• your_Dify_Domain：あなたのDifサーバのドメインを設定

実装ステップ5：CSSでのデザイン調整（オプション）

最後に、チャット画面らしく見せるためのCSSを適用します。

吹き出しのデザインやアイコンの配置、スクロールバーの制御などを行います。

「style.css」に整形用のCSSを追加

AIメッセージの表示エリアに改行を反映させる

/* AIメッセージの表示エリアに改行を反映させる */
.ai-message {
    white-space: pre-wrap; /* これで \n が改行として表示されます */
    line-height: 1.8;      /* 行間を広げて読みやすくします */
    margin-bottom: 20px;   /* 次のメッセージとの間隔を空けます */
}

ユーザー側のメッセージを整える

/* ついでにユーザー側のメッセージも整える場合 */
.user-message {
    white-space: pre-wrap;
    margin-bottom: 15px;
}

チャット履歴表示エリアの固定

/* チャット履歴表示エリアの固定 */
#your-history {
    max-height: 500px;    /* 表示エリアの最大高さ。お好みの高さに調整してください */
    overflow-y: auto;     /* 内容が溢れた場合に垂直スクロールを表示 */
    padding: 15px;        /* 内側の余白 */
    background-color: #f9f9f9; /* 履歴エリアと背景を区別しやすくする（任意） */
    border: 1px solid #ddd;    /* エリアの境界線（任意） */
    border-radius: 8px;   /* 角丸（任意） */
    margin-bottom: 20px;  /* 送信フォームとの間隔 */
    white-space: pre-wrap; /* 改行コードを有効にする */
}

メッセージごとの間隔

/* メッセージごとの間隔 */
.ai-message, .user-message {
    margin-bottom: 15px;
    line-height: 1.6;
}

アイコンとメッセージを横並びにする設定

/* アイコンとメッセージを横並びにする設定 */
.ai-response-wrapper {
    display: flex !important; /* 横並びを強制 */
    align-items: flex-start;
    margin-bottom: 20px;
    width: 100%;
}

アイコン自体の大きさ指定

/* アイコン自体の大きさ指定 */
.ai-icon {
    width: 50px !important;   /* アイコンの幅 */
    height: 50px !important;  /* アイコンの高さ */
    border-radius: 50%;       /* 丸くする */
    margin-right: 15px;       /* 右側の余白 */
    flex-shrink: 0;           /* アイコンが潰れないようにする */
    display: block !important;
}

メッセージ部分の微調整

既存の .ai-message の設定に max-width を追加するとより綺麗になります

/* メッセージ部分の微調整 */
/* 既存の .ai-message の設定に max-width を追加するとより綺麗になります */
.ai-message {
    white-space: pre-wrap;
    line-height: 1.8;
    margin-bottom: 0px; /* wrapperで制御するため0に */
    flex-grow: 1;      /* 残りの幅をメッセージに使う */
}

スクロールバーが表示されるように、固定した高さがあるか再確認

/* スクロールバーが表示されるように、固定した高さがあるか再確認 */
#your-history {
    max-height: 500px;
    overflow-y: auto !important; /* 強制的にスクロールを有効にする */
    display: block;
}

カスタムcssを追加（オプション）

チャットボット設定画面にカスタムcssを追加しBOXサイズや「考え中」アニメーションを設定します。

入力ボックス（textarea）のサイズ変更

/* 入力ボックス（textarea）のサイズ変更 */
.wpcf7-form textarea[name="your-question"] {
    width: 100% !important;  /* 横幅をエリアいっぱいに広げる */
    height: 120px !important; /* 高さを指定。お好みで調整してください */
    min-height: 80px;        /* 最小の高さ */
    max-height: 300px;       /* 手動で広げられる最大の高さ */
    padding: 15px;           /* 内側の余白を増やして入力しやすくする */
    border: 2px solid #ddd;  /* 枠線を少し太くする */
    border-radius: 8px;      /* 角を丸くする */
    font-size: 16px;         /* 文字サイズを調整 */
}

送信ボタン（送信ラベル）の調整

/* 送信ボタン（送信ラベル）の調整が必要な場合 */
.wpcf7-form input[type="submit"] {
    margin-top: 10px;
    padding: 10px 30px;
}

ドットのアニメーション

/* ドットのアニメーション */
.thinking-dots span {
    animation: blink 1.4s infinite both;
    font-size: 24px;
    font-weight: bold;
}
.thinking-dots span:nth-child(2) { animation-delay: .2s; }
.thinking-dots span:nth-child(3) { animation-delay: .4s; }

@keyframes blink {
    0% { opacity: .2; }
    20% { opacity: 1; }
    100% { opacity: .2; }
}

スマホ表示時のみ画像の幅を制限

/* スマホ表示時のみ画像の幅を制限する設定 */
@media screen and (max-width: 768px) {
    .mobile-small-img img {
        max-width: 150px;      /* 最大幅を150pxに制限 */
        width: 100%;           /* コンテナに合わせて縮小 */
        height: auto;          /* 比率を保持 */
        display: block;        /* ブロック要素にする */
        margin: 0 auto;        /* 中央揃えにする */
    }
}

完成したチャットボットの動作

以上の手順で実装したチャットボットは、以下のように動作します。

• ページを開いている間は、会話の流れ（コンテキスト）を記憶し続けます。
• ブラウザを閉じたり、再読み込みをすると会話がリセットされ、新しいセッションとして始まります。

この設定により、ユーザーがページにアクセスすると新しい会話が始まり、ページを閉じない限り同じconversation_idで対話が継続されます。ページを閉じるとsessionStorageがクリアされ、次回アクセス時には新しい会話としてDifyとやり取りが行われます。

以下では、この仕組みを使用したチャットボットを以下の記事で公開していますのでご参考下さい。

もし、正常に応答が無い場合には、以下のポイントを確認して下さい。

１．Development Toolによる確認

F12キーを入力してDevelopment Tool画面のConsoleログで正常に通信されているかを確認して下さい。

---

２. Difyコンテナ側のリアルタイムログ確認

もし上記でもダメな場合、コマンドを打った瞬間にDifyが何と言っているか、以下のコマンドを打ちながらチャットを送信してみてください。

cd ~/dify/docker
sudo docker compose logs -f nginx api

ここで GET /v1/... 403 や 404 といったログが流れれば、通信は届いていますが設定が拒否されています。何も流れなければ、ネットワーク（Fail2BanやFirewall）で止まっています。

まとめ

DifyとWordPressを組み合わせることで、高機能なAIチャットボットを、驚くほど低コストで自社サイトに導入することができます。

今回の事例のように「Contact Form 7」という既存の資産を活用することで、ゼロから開発する工数を大幅に削減できるのも大きなメリットです。

ぜひ、あなたのWebサイトにもオリジナルのAIアシスタントを実装してみてください。