WordPress へのタグ設置方法

概要

WordPress を使用している EC ストアに AnyGift タグを埋め込むことで、商品詳細ページに「ギフトとして贈る」ボタンを追加できます。

本ガイドは、WooCommerce または その他の WordPress ベースカート を使用しているストアを対象にしています。

対応環境

以下の環境で AnyGift タグを使用できます：

環境	対応状況	備考
WordPress + WooCommerce	✓	最も一般的な構成
WordPress + カスタムカート	✓	テンプレート変数の確認が必要な場合あり

設置の流れ（全体像）

1. ストア ID の確認
   └─ AnyGift管理画面から「ストア ID」をコピー

2. WordPress テーマの編集
   └─ 商品詳細ページのテンプレート（single-product.php）を編集

3. スクリプトタグの挿入
   └─ AnyGift 設定ブロックを商品詳細ページに追加

4. マーカータグの挿入
   └─ ボタン表示位置にマーカーを設置

5. キャッシュクリア
   └─ WordPress・ブラウザのキャッシュをクリア

6. 動作確認
   └─ ボタンが表示され、クリック可能か確認

ステップ1: ストア ID を確認

AnyGift管理画面にログイン
ストア設定 または 統合設定 へ移動
ストア ID をコピー（例：abc123def456）

このストア ID は後のステップで使用します。

ステップ2: WordPress テーマを編集

アクセス方法

WordPress 管理画面から商品詳細ページのテンプレートファイルにアクセスします。

WordPress 管理画面にログイン
外観 → テーマファイルエディター をクリック
右側パネルで single-product.php を探す

ファイルが見つからない場合: テーマによって異なる場合があります。以下も確認してください： - product.php - template-parts/content-single-product.php

ステップ3: スクリプトタグを挿入

single-product.php ファイルを開く
ファイルの最後近く、<?php get_footer(); ?> または </body> の直前に以下を追加

<?php
// AnyGift スクリプト start
?>
<script type="text/javascript">
  window.AnyGift = {
    productCode: '<?php echo $product->get_id(); ?>',
    storeId: 'YOUR_STORE_ID',
  };
</script>
<script defer src="https://d1ioo46r7yo3cy.cloudfront.net/store.js" charset="utf-8"></script>
<?php
// AnyGift スクリプト end
?>

置き換えが必要な部分:

項目	置換内容
`YOUR_STORE_ID`	ステップ 1 でコピーしたストア ID（例：`abc123def456`）

コード例:

<script type="text/javascript">
  window.AnyGift = {
    productCode: '<?php echo $product->get_id(); ?>',
    storeId: 'abc123def456',
  };
</script>

注意: $product->get_id() は WooCommerce の標準関数です。get_the_ID() で置き換えることも可能ですが、前者を推奨します。

ステップ4: マーカータグを挿入

同じファイル（single-product.php）を編集中
「カートに追加」ボタンの付近に以下を挿入

<!-- AnyGift マーカー start -->
<div data-anygift="marker"></div>
<!-- AnyGift マーカー end -->

設置位置の例:

「カートに追加」ボタンの直上 ← 推奨
「カートに追加」ボタンの直下
商品説明の下

マーカーの数に注意: 上の data-anygift="marker" 方式で表示対象になるのは、ページ内で最初に見つかる1個だけです。複数個所に表示する場合は、各場所で <div data-anygift-product-code="<?php echo $product->get_id(); ?>"></div> を使ってください。

ステップ5: テンプレートを保存

テーマエディター画面で更新をクリック
変更内容が保存されます

ステップ6: キャッシュをクリア

WordPress キャッシュプラグイン（WP Super Cache など）を使用している場合、キャッシュをクリアしてください。

キャッシュクリアの手順

WordPress 管理画面でクリアする場合:

キャッシュプラグインのメニュー（例：「WP Super Cache」）を開く
キャッシュをクリア または Purge all caches をクリック

ブラウザキャッシュをクリアする場合:

Chrome: Ctrl+Shift+Delete（Windows）/ Cmd+Shift+Delete（Mac）
Safari: 開発 → キャッシュを空にする
ページを再読み込み（Ctrl+R / Cmd+R）

ステップ7: 動作確認

1. ボタン表示の確認

WordPress ストアで任意の商品詳細ページを開く
ページをスクロールして「ギフトとして贈る」ボタンが表示されているか確認

期待される表示:
┌─────────────────────────────┐
│   商品詳細ページ             │
│ ┌───────────────────────┐  │
│ │ ギフトとして贈る       │  ← ボタン表示
│ └───────────────────────┘  │
│ ┌───────────────────────┐  │
│ │ カートに追加          │  │
│ └───────────────────────┘  │
└─────────────────────────────┘

表示される → ステップ 2 へ
表示されない → トラブルシューティングを参照

2. ボタン動作の確認

「ギフトとして贈る」ボタンをクリック
AnyGift のギフト購入画面が開く
受贈者情報が入力できるか確認

よくある質問

Q1: テーマが「テーマファイルエディター」に表示されない

A: セキュリティ設定で無効化されている可能性があります。FTP 経由で直接編集するか、Code Snippets プラグインを使用してください。

Q2: 複数の商品でテストしたが、一部の商品でボタンが表示されない

A: ブラウザの開発者ツール（F12）で、そのページのソースコードを確認してください。window.AnyGift.productCode に値が入っているか確認します。空白の場合、テンプレート変数が正しく動作していない可能性があります。

Q3: ボタンはあるがクリックしても何も起こらない

A: 以下を確認してください： - ブラウザコンソール（F12 → Console タブ）でエラーがないか - ストア ID が正しいか（AnyGift管理画面で確認） - ネットワーク接続が正常か

Q4: 「カートに追加」ボタンとギフトボタンを分けたい

A: ギフト商品専用ページの場合、通常の「カートに追加」ボタンを非表示にすることができます。カスタマーサポートにお問い合わせください。

トラブル時のサポート

上記の手順で解決しない場合は、以下の情報を用意した上でカスタマーサポートにお問い合わせください：

ストア ID
問題が発生している商品 URL
ブラウザコンソール（F12）のエラーメッセージ
WordPress テーマ名

📧 カスタマーサポート: cs@anyreach.co.jp
⏱️ 対応: 2営業日以内