58話：【Dify×WordPress】ブログにAIを住まわせよう！ コピペだけで設置できる「埋め込みチャットボット」の作り方

前回（第57話）は、Excelのネタ帳を渡すだけで記事を大量生産する**「バッチ実行（工場長モード）」**を解説しました。 おかげさまで、記事を書く手間が劇的に減りましたね。

さて、執筆作業が自動化できたら、次にやりたいのはこれです。 「せっかくブログに来てくれた読者を、もっと楽しませたい！」

記事を読むだけ読んで、無言で帰ってしまうのは寂しいですよね。 そこで今回は、あなたのブログに**「AIコンシェルジュ（接客係）」**を常駐させましょう。

ブログの右下（または左下）に「何か質問はありますか？」と話しかけてくるアイコン、見たことありませんか？ あれを、Difyならたった5分のコピペ作業で作れます。

今回は、WordPress（特にConoHa WINGサーバー）を使っている人が必ずハマる「セキュリティの罠」の抜け方も含めて、失敗しない手順を完全解説します！

---

1. 準備：接客係（ボット）を用意する

まず、ブログに住まわせるボットを選びます。 前回の「記事量産工場」は**ワークフロー型（裏方専用）だったので、今回はチャットボット型（会話用）**を使います。

過去に作った「お喋りボット」を使ってもいいですし、練習用に新しく作ってもOKです。 今回は、読者からの質問に答えるシンプルな**「ブログ案内人」**をサクッと作って使いましょう。

【3分で完了】ブログ案内人の作り方

1. Difyホームで 「最初から作成」 ＞ 「チャットボット」 を選択。
2. 名前： （なんでもOK）ブログ案内人
3. **手順（プロンプト）**に以下をコピペ：
   • ポイント：自分のブログURLを入れておくと、AIが案内しやすくなります。
   平文あなたは、このブログ「AI再スタート（ https://あなたのブログURL.com ）」の案内人です。 中年男性のYasuが運営しており、DifyやAI活用の情報を発信しています。 読者からの質問に、親しみやすく、かつ丁寧に答えてください。
4. 右上の 「公開する」 ＞ 「更新」 をクリック。

これで「接客係」の準備は完了です！

このプロンプトは皆さまでそれぞれアレンジしてください

---

2. 実践：Difyから「魔法のコード」をもらう

ここからが今回のメイン作業です。 実は、さっき押した「公開」ボタンの中にショートカットが隠されています！

1. 画面右上の 「公開する」ボタンの右にある「ｖ（下矢印）」 をクリックします。
2. メニューの中から 「サイトに埋め込む（Embed in site）」 を選びます。

デザインを決めてコピーする

設定画面が開くと、上に3つのイラストが表示されます。

1. スタイルの選択： 通常は 「真ん中のイラスト（浮動ボタン）」 を選びます。 これが一番おしゃれです。
2. コードのコピー： 画面下にある英語の呪文のようなコード（）の右上にある 「コピーアイコン（四角いマーク）」 を押してコピーします。<script>...

---

3. 重要：WordPressに貼り付ける前の「2つの壁」

いよいよブログに貼り付けますが、ここで初心者が必ず躓く**「2つの壁」**があります。 これをクリアすれば、あとは楽勝です！

壁①：プラグインは「有効化」しないと動かない

コードを貼るには、無料プラグイン**「WPCode」**を使うのが一番安全です。

1. WordPress管理画面 ＞ 「プラグイン」 ＞ 「新規追加」。
2. WPCode で検索し、インストールします。
3. 【重要】 必ず 「有効化」 ボタンを押してください！
   • （これを忘れると、設定メニューが出てきません）

壁②：ConoHa WINGの「WAF」が邪魔をする

ConoHa WINGなどのセキュリティがしっかりしたサーバーを使っている場合、コードを保存しようとすると**「閲覧できません（Forbidden）」**というエラーが出たり、ボットが表示されなかったりします。

これは、サーバーのセキュリティ（WAF）が「変なプログラムを埋め込もうとしてるぞ！」と勘違いしてブロックしているからです。 一時的にガードを下げましょう。

1. ConoHa WINGの管理画面（WordPressではありません）にログイン。
2. 「サイト管理」 ＞ 「サイトセキュリティ」 ＞ 「WAF」 タブをクリック。
3. 「利用設定」 を一時的に 「OFF」 にします。
   • コツ：OFFにしても反映されるまで10分ほどかかる場合があります。 少し休憩しましょう。

---

4. 仕上げ：コードを貼り付ける

WAFをOFFにしたら、一気に設定します！

1. WordPress管理画面の左メニューから 「Code Snippets」 ＞ 「Header & Footer」 をクリック。
2. 「Body」 セクションを探します。
3. ここに、Difyでコピーしたコードを 「貼り付け（ペースト）」 します。
4. 「変更を保存」 をクリック。
   • （WAFがOFFになっていれば、エラーが出ずに保存できます！ ）

【補足】ボタンが重なってしまう場合

「トップへ戻るボタン」などと重なってしまう場合は、Dify側の設定で位置を変えるか、コードを少し書き換える必要があります。 （※今回はまずは標準の右下で試してみましょう）

---

5. 完成！ そしてWAFを戻す

さあ、あなたのブログを開いてみてください。 画面の隅に、青いアイコンが表示されましたか？ クリックして 「こんにちは！」 とチャットができれば大成功です！

【最後のお仕事】 無事に動いたら、ConoHa WINGの画面に戻り、必ずWAFを「ON」に戻してください。 （一度設置してしまえば、ONに戻してもボットは動き続けます）

---

まとめ：ブログが「お店」になった日

おめでとうございます！ これであなたのブログには、24時間365日、文句も言わずに働いてくれる「AIコンシェルジュ」が住み着きました。

• 読者のメリット： 気になることをすぐ聞ける。
• あなたのメリット： 「AIを使ってるブログだ！」という信頼感が爆上がりする。

ちなみにこの技術、**本業のホームページ（清掃業など）**にもそのまま使えます。 「見積もりはこちら」「対応エリアは横浜です」と答えるボットを置けば、夜中の問い合わせも逃しません。 まさに一石二鳥のスキルですね！まだホームページが無いので

作ったらチャットボットを入れようと思います。

次回は……会話変数と変数代入ブロックについて書こうと思います。

是非お楽しみに！