簡単♪Difyで作成したチャットボットをWordPressサイトに埋め込む方法

AI系ツール

Difyで作成したチャットボットをWordpressサイトに埋め込む方法を下記動画でご紹介しています。

ゼロから学ぶDifyとRAG②:DifyでAIチャットボットを作成してWordPressサイトにさくっと埋め込む方法。Difyの使い方や料金についても分かりやすくご紹介していきます♪

手順としては、下記のとおりです。

  1. Difyでチャットボット作成
  2. コードを出力
  3. WordPressに埋め込む

こちらの記事では、動画の補足として③の手順についてお伝えします。プラグインを使う方法をご紹介していきます。

コードのコピー

まずは埋め込み用のコードをDify側からコピーします。今回は右下のボタンをクリックすると、チャットボットが出てくるようにします。

プラグインのインストール

WordPressでCode Snippetsというプラグインをインストールします。

インストール後、左側のサイドバーの「スニペット」メニューをクリックします。

Difyでコピーしたコードをいれる

下記のようにいれます。

Difyからコピーしたコード部分は、実際にコピーしたコードに変更してくださいね。

上記のコードは、一番下のadd_action(‘wp_footer’, ‘add_dify_chatbot’); 部分で、WordPressのwp_footerフックを使って、add_dify_chatbot関数をフッター部分に追加しています。
また、<<<EODEOD;でDifyからコピーしたコードを囲んでいます。これは、ヒアドキュメントというもので、これによって、PHP内でHTMLやJavaScriptをそのまま記述できます。
AI系ツール

【Laravelの教科書・プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。 基礎編は無料でプレゼント中です♪
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

最新版テキストに加え、Laravel8版~Laravel11版もご用意しています♪

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

最新版テキストに加え、Laravel8版からLaravel11版もご用意しています♪

Laravelの本を書きました。


ひつじが目印♪

Laravelの使い方を分かりやすく解説した書籍を出版しました。 ご好評につき、最新版に対応した改訂版を2025年7月に発売
書店やAmazon等のオンラインショップにて販売中です。 詳しくは下記ボタンをクリック

書籍の詳細を見てみる

Laravelの本書きました。


ひつじが目印♪
クリックするとamazonページへ。

Laravelの使い方を分かりやすく解説した書籍を出版しました。ご好評につき最新版対応の改訂版発売。書店やAmazon等のオンラインショップにて販売中です。

書籍の詳細を見てみる
Twitter始めました。
40代からプログラミング!
タイトルとURLをコピーしました