WordPressにAsyntai AIチャットボットを追加する方法

WordPressウェブサイト向けステップバイステップガイド

プラットフォーム:

ステップ1：埋め込みコードを取得する

まず、Asyntaiダッシュボードに移動し、「Embed Code」セクションまでスクロールします。次のような固有の埋め込みコードをコピーします：

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

注記: 上記のコードは一例です。個人のウィジェットIDが含まれているため、ダッシュボードから固有の埋め込みコードをコピーしてください。

ステップ2：インストール方法を選択する

WordPressにチャットウィジェットを追加するにはいくつかの方法があります。最適な方法をお選びください：

方法1：プラグインの使用（推奨）

チャットウィジェットを追加する最も簡単な方法は、無料の「WPCode」プラグイン（旧称「Insert Headers and Footers」）を使用することです。

WPCodeの使用 (Free)

WordPress管理画面でPlugins → Add Pluginに移動します
「WPCode」を検索してインストールします
プラグインを有効化します
Code Snippets → Header & Footerに移動します
Asyntaiの埋め込みコードを「Footer」セクションに貼り付けます
「Save Changes」をクリックします

なぜプラグインを使用するのですか？ プラグインを使用すると、WordPressテーマを更新または変更した場合でもコードが保持されます。

方法2：テーマファイルの編集

テーマファイルに直接コードを追加することもできます。テーマファイルエディターの場所は、WordPressのバージョンとテーマの種類によって異なります。

クラシックテーマの場合

WordPress管理画面で外観 → テーマファイルエディターに移動します
ドロップダウンから有効なテーマを選択します（未選択の場合）
右側のファイル一覧からfooter.phpを見つけてクリックします
一番下までスクロールし、閉じタグ</body>を見つけます
</body>タグの直前にAsyntaiの埋め込みコードを貼り付けます
「Update File」をクリックします

ブロックテーマ（FSEテーマ）の場合

ブロックテーマ（Twenty Twenty-Fourやその他のFull Site Editingテーマなど）には、テーマファイルにfooter.phpファイルも</body>タグもありません。ブロックテーマの場合は、すべてのテーマタイプで動作するプラグイン方式（WPCode）を使用してください。

重要: テーマの更新により変更が上書きされます。恒久的な対策として、子テーマまたはプラグイン方式をご利用ください。

方法3：Elementorの使用

Elementorを使用している場合、Elementorのカスタムコード機能を通じてコードを追加できます。

Elementor Pro

Elementor → Custom Codeに移動します
「Add New」をクリックします
「Asyntai Chatbot」のような名前を付けます
Locationを「<body> – End」に設定します
Asyntaiの埋め込みコードを貼り付けます
表示条件を「Entire Site」に設定します
「Publish」をクリックします

Elementor Free

Elementorの無料版を使用している場合は、上記のプラグイン方式をご利用ください。カスタムコードの挿入にはElementor Proが必要です。

ステップ3：インストールの確認

コードを追加した後、新しいブラウザタブまたはシークレットウィンドウでウェブサイトにアクセスしてください。サイトの右下にチャットウィジェットボタンが表示されます。クリックして正しく開いて動作することを確認してください。

ウィジェットが表示されませんか？ ブラウザキャッシュおよびWordPressのキャッシュプラグインをクリアしてください。WP RocketやW3 Total Cacheなどのキャッシュプラグインを使用している場合は、コード追加後にキャッシュをパージしてください。

AI 検索バーを追加する

AI 検索バーは独自のコードを持つ別のウィジェットです。チャットと一緒に追加しても、単独で追加してもかまいません。Standard 以上のプランが必要で、下位プランではバーは表示されますが結果は返りません。

script タグに data-replace 属性を追加すると、テーマにある既存の検索バーと置き換わります。チャットコードに使用したものと同じヘッダー・フッター用プラグイン（WPCodeなど）で追加します。スクリプトを検索ボックスの近くに置く必要はないため、テーマファイルを編集する必要はありません。

<script src="https://widget.asyntai.com/static/js/search-widget.js" data-asyntai-id="YOUR_WIDGET_ID" data-replace="auto" async></script>

AI 検索バーの詳しいガイドを読む

ドキュメント