TAIKOBAN/ヘルプセンター
← 戻る

WordPress への設置方法

TAIKOBAN のウィジェットは WordPress のクラシックエディタ・ブロックエディタの どちらでも簡単に設置できます。テーマを問わず5分で完了します。 この記事では、各エディタでの設置手順と注意事項を詳しく解説します。

事前準備

設置前に、ダッシュボードの「プロジェクト設定」からウィジェットの埋め込みコードを コピーしておいてください。以下のようなスクリプトタグです。

<div data-taikoban="あなたのウィジェットID" style="min-height: 200px;"></div>
<script src="https://taikoban.app/widget.js" async defer></script>

また、少なくとも1件の承認済みの声があることを確認してください。 承認済みの声がないとウィジェットは表示されません。

ブロックエディタ（Gutenberg）での設置

  1. WordPress 管理画面で対象のページまたは投稿を開く
  2. ウィジェットを表示したい位置にカーソルを置く
  3. 「+」ボタンをクリックし、検索ボックスに「HTML」と入力
  4. 「カスタム HTML」ブロックを選択して追加する
  5. 表示されたテキストエリアにコピーした埋め込みコードを貼り付ける
  6. 「プレビュー」タブをクリックして表示を確認（エディタ内では空欄に見えることがあります）
  7. 「更新」または「公開」をクリックする

エディタの「プレビュー」タブでは表示されない場合がありますが、 実際のページプレビューまたは公開後のページでは正常に表示されます。

クラシックエディタでの設置

  1. WordPress 管理画面で対象のページまたは投稿を開く
  2. エディタ右上の「テキスト」タブをクリックして HTML モードに切り替える
  3. ウィジェットを表示したい位置にコードを貼り付ける
  4. 「更新」または「公開」をクリックする

「ビジュアル」モードに戻すとスクリプトタグが見えなくなりますが、 これは正常な動作です。フロントエンドでは正常に表示されます。 ビジュアルモードでコードを編集するとタグが壊れる場合があるため、 編集は必ず「テキスト」モードで行ってください。

ウィジェットエリアへの設置

サイドバーやフッターにウィジェットを設置したい場合は以下の手順です。

  1. WordPress 管理画面の「外観」から「ウィジェット」を開く
  2. 設置したいウィジェットエリア（サイドバー、フッターなど）を選択
  3. 「カスタム HTML」ウィジェットを追加
  4. タイトル欄に「お客様の声」などの見出しを入力（任意）
  5. コンテンツ欄に埋め込みコードを貼り付ける
  6. 「保存」をクリック

テーマビルダーでの設置

Elementor・Divi・Snow Monkey・SWELL・Cocoon 等のテーマビルダーを使っている場合も、 「HTML」または「コード」ブロックに埋め込みコードを貼り付けるだけで動作します。

各テーマビルダーでの手順

  • Elementor -- 「HTML」ウィジェットをドラッグして配置し、コードを貼り付け
  • Divi -- 「コード」モジュールを追加し、コードを貼り付け
  • SWELL -- 「カスタム HTML」ブロックを追加し、コードを貼り付け
  • Cocoon -- 「カスタム HTML」ブロックを追加し、コードを貼り付け
  • Snow Monkey -- 「カスタム HTML」ブロックを追加し、コードを貼り付け

固定ページ vs 投稿ページ

ウィジェットは固定ページにも投稿ページにも設置できます。 一般的な使い分けは以下の通りです。

  • 固定ページ -- 「お客様の声」専用ページ、サービス紹介ページ、LP に設置する場合
  • 投稿ページ -- ブログ記事内に引用として埋め込む場合
  • ウィジェットエリア -- サイドバーやフッターに常時表示する場合

注意事項とトラブル対応

セキュリティプラグインによるブロック

Wordfence、SiteGuard、iThemes Security 等のセキュリティプラグインが 外部スクリプトをブロックする場合があります。 その場合は taikoban.app をホワイトリストに追加してください。 各プラグインの設定画面で「許可するドメイン」に追加する方法はプラグインのドキュメントをご確認ください。

キャッシュプラグイン

WP Super Cache、W3 Total Cache、LiteSpeed Cache 等を使用している場合は、 ウィジェット設置後にキャッシュをクリアしてください。 キャッシュが残っている間はウィジェットが表示されない場合があります。

AMP ページ

AMP（Accelerated Mobile Pages）ページではカスタムスクリプトの読み込みが 制限されているため、ウィジェットは表示されません。 通常の HTML ページでご利用ください。

CSP ヘッダーの設定

サーバーに Content Security Policy ヘッダーが設定されている場合は、script-src に taikoban.app を追加する必要があります。 サーバー管理者にご相談ください。

関連ページ

WordPress 埋め込み | ヘルプセンター | TAIKOBAN