Ideal House
コンテンツにスキップ

WordPress 連携#

公開ブラウザースクリプトを一つ読み込み、商品コードがインポート済みカタログの SKU と一致するコンテナを描画して、WordPress サイトに ideal.house Room Visualizer を追加します。

検証状況: 2026年9月7日 にドキュメントを確認しました。このガイドは、顧客の WordPress テーマに対して一連の操作全体を検証済みではありません。公開前に、実際に使用するテーマとページビルダーのバージョンを複製したステージング環境で検証してください。

SDK を読み込む前に: ダッシュボード → 設定を開き、オンラインストアのオリジンを Allowed Origins (CORS) に追加して 保存 をクリックします。公開サイトのホスト名と、利用するプレビューまたはステージングのオリジンを含めます。複数のオリジンはカンマで区切ってください。設定手順を参照してください。

対応範囲と前提条件#

このガイドは、WordPress のコンテンツサイト、クラシックテーマ、ブロックテーマ、HTML を追加できるページビルダーを対象とします。サイトで WooCommerce の商品データを使う場合、バリエーション選択については WooCommerce ガイドを使用してください。

用意するもの:

  • 管理者権限、および継続的に維持できる方式では子テーマまたは小さなサイト専用プラグイン
  • ideal.house ダッシュボードで取得した Shop ID と Publishable Key
  • 既知の sku を持ち、ideal.house にインポート済みの商品一つ
  • テスト中にキャッシュと圧縮を無効にできるステージングページ

Publishable Key はブラウザーのマークアップでの使用を想定しています。WordPress の HTML に Client Secret または AI API キーを含めないでください。

SDK の仕様の確認#

対応する最小構成は、SDK スクリプト一つと自動生成ボタンのコンテナ一つです。

html
<script
  src="https://sdk.ideal.house/sdk.js"
  data-shop-id="<SHOP_ID>"
  data-publishable-key="<PUBLISHABLE_KEY>"
  async
></script>

<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>

data-product-code は、大文字と小文字、記号を含めてカタログの sku と一致する必要があります。コンテナの内容は SDK が管理します。このガイドでは、WordPress 向けの ideal.house プラグインは提供していません。

サイト全体へのスクリプトの設置#

WordPress では、wp_enqueue_script() によるフロントエンドスクリプトの読み込みを推奨しています。以下を子テーマの functions.php またはサイト専用プラグインに追加します。フィルターは、WordPress が生成するタグに二つの必須データ属性を追加します。

php
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script(
        'idealhouse-room-visualizer',
        'https://sdk.ideal.house/sdk.js',
        array(),
        null,
        array('strategy' => 'async', 'in_footer' => true)
    );
});

add_filter('script_loader_tag', function ($tag, $handle) {
    if ($handle !== 'idealhouse-room-visualizer') {
        return $tag;
    }

    return str_replace(
        '<script ',
        '<script data-shop-id="<SHOP_ID>" data-publishable-key="<PUBLISHABLE_KEY>" ',
        $tag
    );
}, 10, 2);

両方のプレースホルダーを置き換えます。6.3 より前の WordPress は、wp_enqueue_script() の最後の引数に配列形式を指定できません。代わりに true を渡し、script_loader_tag フィルターで async も追加してください。

コードブロックやタグマネージャーから SDK を再度設置しないでください。開発者ツールで document.querySelectorAll('script[src="https://sdk.ideal.house/sdk.js"]').length を実行すると、1 が返る必要があります。

ボタンの配置#

ブロックエディターで、ボタンを表示したい場所に カスタム HTML ブロックを追加します。

html
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>

繰り返し表示するカードでは、テーマのテンプレートから同じマークアップを描画し、商品コードを HTML 属性としてエスケープします。

php
<div
  data-idealhouse-button-container
  data-product-code="<?php echo esc_attr($idealhouse_product_code); ?>"
></div>

テーマまたはプラグイン側で $idealhouse_product_code を提供する必要があります。同じ値をインポート先の ideal.house の sku として使用している場合を除き、投稿 ID、スラッグ、タイトルは使用しないでください。

商品とバリエーションの対応付け#

公開前に明示的な対応表を作成します。

WordPress の値ideal.house の値規則
idealhouse_sku などのカスタムフィールドsku文字列が完全に一致する
バリエーションのない一つのページインポート済みの商品一つコンテナ一つ
ページビルダーのコレクション項目項目単位の SKU フィールドコレクション全体で一つのコードを使い回さない

ページ内でバリエーションが切り替わる場合、利用側のアダプターで新しい data-product-code を設定する必要があります。古いビューアーの状態が再利用されないよう、新しいコンテナを挿入する前に以前のコンテナを消去します。

js
function renderIdealhouseButton(host, sku) {
  host.replaceChildren();
  if (!sku) return;

  const container = document.createElement('div');
  container.dataset.idealhouseButtonContainer = '';
  container.dataset.productCode = sku.trim();
  host.append(container);
}

これは利用側で実装するアダプターのコードです。ドキュメントにない ideal.house メソッドを呼び出したり、存在しない WordPress イベントを作り出したりするものではありません。テーマまたはページビルダーが提供する公開されたコールバックから呼び出してください。

動的な画面遷移とキャッシュ#

AJAX フィルター、無限スクロール、モーダルの商品カード、ページビルダーの画面遷移では、新しい商品ノードが DOM に追加された後で新しいコンテナを挿入します。SDK がすでに内容を追加したコンテナを複製しないでください。ツールに安定した描画コールバックがない場合は、項目のテンプレートにコンテナを追加して、描画のたびに新しいマークアップが作られるようにします。

テーマ編集後は、WordPress、CDN、最適化プラグインのキャッシュを消去します。性能改善プラグインがデータ属性を削除したり、操作後まで読み込みを遅らせたりする場合は、https://sdk.ideal.house/sdk.js を遅延読み込みの書き換え対象から除外してください。

カタログデータのインポート#

WordPress のコンテンツは自動同期されません。選択したカスタムフィールドを sku としてエクスポートし、商品アップロードから対応するレコードをインポートします。商品インポート、ジョブの状態、商品一覧、商品更新、商品削除、エラーと再試行も参照してください。

公開前の検証#

  1. WordPress エディターのプレビューではなく、プライベートブラウジングのウィンドウでステージング環境を開きます。
  2. SDK のリクエストが一回だけ実行され、正常に返ることを確認します。
  3. コンテナを調べ、data-product-code をインポートした sku と一文字ずつ比較します。
  4. インポート済みの SKU では可視化機能を操作でき、不明な SKU では動作しないコントロールが表示されないことを確認します。
  5. ページビルダーの画面遷移、フィルター、ブラウザーの戻る・進む、モバイル表示、同意設定を確認します。
  6. 対応するすべてのバリエーションを選択し、それぞれの SKU でコンテナが再作成されることを確認します。
  7. ブラウザーのコンソールを確認し、キャッシュと圧縮を再び有効にしてテストします。

連携の削除#

スクリプト読み込み登録の関数と script_loader_tag フィルターを削除し、すべての data-idealhouse-button-container ブロックまたはテンプレート断片を削除します。すべてのキャッシュを消去し、ページソースとネットワークパネルに SDK の URL がないことを確認します。

プラットフォームの公式リファレンス#