ステップ 1: Phottaウィジェットキーを取得する
business.photta.appからPhotta Businessダッシュボードにログインします。「Settings → API Keys」に移動し、pk_live_ で始まるパブリッシャブルキーをコピーします。必要な資格情報はこのキーのみです。キーを有効にする前に、「Settings → Allowed Domains」にWooCommerceストアのドメイン（例：mystore.com）を追加してください。試着リクエストのたびにドメインチェックが行われるため、公開前に許可リストを設定する必要があります。
localhost などのサブドメインやステージング URL でローカルテストを行う場合は、そのドメインを別途許可リストに追加してください。有料プランでは最大 10 ドメインまで追加可能です。トライアルアカウントでは 1 ドメインまでとなります。ドメインがリストに追加されると、そのオリジンからのリクエストは即座に承認されます。反映までの待機時間はありません。
ステップ 2: ショートコードかスクリプトタグかを選択する
WooCommerceでは、2つのクリーンな統合パスを提供しています。ショートコード方式（[photta_widget pk="pk_live_..."]）では、商品ページテンプレートやカスタムのWooCommerceフック内の特定の場所にウィジェットを貼り付けることができます。これは、商品ギャラリーと「カートに入れる」ボタンの間に正確に表示したい場合に最適です。ショートコードを使用するには、WooCommerceの商品テンプレートファイル single-product/add-to-cart/simple.php に直接貼り付けるか、ページビルダーのブロックを使用します。
スクリプトタグ方式では、テーマの functions.php ファイルで wp_enqueue_script を使用して、SDK をグローバルに挿入します。子テーマの functions.php に以下を追加してください：add_action('wp_footer', function() { echo '<script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>'; }); これにより、テンプレートごとの変更なしで、すべての商品ページにウィジェットボタンが自動的に表示されます。多くのマーチャントは、そのシンプルさからスクリプトタグ方式を選択しています。
ステップ 3: 選択したスニペットを保存する
ショートコードの場合：子テーマの個別商品ページ用WooCommerceテンプレートオーバーライドを開きます。ボタンを表示したい垂直位置に [photta_widget pk="pk_live_..."] を貼り付け、ファイルを保存します。ショートコードのレンダラーはPhottaの軽量ヘルパーによって登録されます。SDK 自体がロード時にハンドラーを登録するため、追加のプラグインファイルは不要です。
スクリプトタグの場合：WordPress 管理画面の「外観 → テーマファイルエディター」を開き、子テーマの functions.php に移動して、ステップ 2 で示した wp_footer アクションのスニペットを追加します。「ファイルを更新」をクリックして保存します。エディターをリフレッシュしてコードが存在することを確認し、保存されたことを検証してください。キャッシュプラグイン（WP Rocket、W3 Total Cache など）を使用している場合は、新しいフッタースクリプトが配信されるよう、この時点でキャッシュをクリアしてください。
ステップ 4: ストアでのウィジェット表示を確認する
プライベートブラウザウィンドウで、WooCommerceストアの商品ページにアクセスします。「カートに入れる」セクションの近くに「Try it on（試着する）」ボタンが表示されているはずです。ボタンをクリックし、テスト写真をアップロードして、試着結果が表示されることを確認してください。ボタンが表示されない場合は、ブラウザのコンソール（F12）を開き、photta のエラーを探します。403 ドメインエラーは、ドメインがまだ「Allowed Domains」リストに含まれていないことを意味します。
また、Ctrl+U（ソースを表示）を押して photta を検索し、SDK のスクリプトタグがページ HTML ソースに含まれているか確認してください。タグがないのに wp_footer フックを追加した場合は、テーマのフッターテンプレートで wp_footer() が呼び出されているか再確認してください。一部の古いテーマや高度にカスタマイズされたテーマでは、この呼び出しが省略されていることがあります。footer.php の </body> 閉じタグの前に <?php wp_footer(); ?> を追加することで解決します。
ステップ 5: カテゴリごとの表示設定を行う
デフォルトでは、ウィジェットボタンはすべての商品ページに表示されます。特定のカテゴリに限定するには、スクリプトタグに data-categories 属性を追加し、WooCommerceのカテゴリスラッグをカンマ区切りで指定します：<script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-categories="womens-apparel,mens-apparel,swimwear" defer></script>。SDK は現在のページのWooCommerceカテゴリデータを読み取り、一致しないページのボタンを自動的に非表示にします。
ショートコードユーザーの場合は、対象カテゴリに関連付けられたテンプレートにのみショートコードを配置するか、WooCommerceの条件分岐でショートコードを囲みます。PHP の has_term() 関数を使用して、ショートコードを出力する前に現在の製品が対象カテゴリに属しているかチェックします。このパターンにより、テンプレートを複製することなく、どの製品タイプに試着オプションを表示するかを厳密に制御できます。