Amazon商品リンクブロックの使い方

はじめに

Amazon商品リンクブロックは、Cocoonテーマ専用のGutenbergブロックです。WordPressのブロックエディタ上でAmazonの商品を直接検索して選択するだけで、アフィリエイトリンク付きの商品紹介カードを記事に挿入できます。

従来のショートコードを使った方法と違い、コードを手書きする必要がありません。エディタ上でリアルタイムにプレビューを見ながら設定を調整できるので、初心者の方でも安心して使えます。

また商品リンクは静的HTMLで挿入されるのでAPIの制限がかかったとしても、表示が崩れる心配を避けることができます。

最初からAPI制限がかかっている場合は使用することはできません。

このブロックでできること

• Amazon商品をキーワードで検索して選択
• 商品画像・タイトル・価格を含む商品カードを自動生成
• Amazon・楽天・Yahoo!ショッピング・メルカリのストアボタンを表示
• 画像サイズ・表示モード・ボタンの表示/非表示などをカスタマイズ
• もしもアフィリエイト経由のリンクにも対応
• 商品情報の自動定期更新（WP-Cron機能）

---

事前準備

Amazon商品リンクブロックを使うには、いくつかの設定が必要です。

1. Amazon Creators APIの設定

Cocoon設定の「API」タブで、以下の情報を入力してください。

設定項目	説明
トラッキングID	Amazonアソシエイトに登録すると取得できるID（例: yoursite-22）
認証情報ID	Creators API host 認証情報ID
シークレット	Creators APIの認証に使う秘密鍵

重要: Creators APIを使うには、Amazonアソシエイト・プログラムに登録し、Creators APIの利用申請が必要です。APIキーはAmazonアソシエイトの管理画面から取得できます。

2. アフィリエイトIDの設定（任意）

Amazon以外のストアボタンを使う場合は、それぞれのアフィリエイトIDを設定します。

設定項目	対応するボタン
楽天アフィリエイトID	楽天ボタン
バリューコマース SID/PID	Yahoo!ボタン
メルカリ アフィリエイトID	メルカリボタン
もしもアフィリエイトID各種	もしもアフィリエイト

---

基本的な使い方

ステップ1: ブロックを追加する

1. ブロックエディタで記事を編集します
2. 「+」（ブロック追加）ボタンをクリックします
3. 検索欄に「Amazon」と入力します
4. 「Amazon商品リンク」ブロック（Amazonロゴアイコン）をクリックします

ブロックを追加すると、「商品を検索して選択してください。」というプレースホルダーが表示され、自動的に検索モーダルが開きます。

ステップ2: 商品を検索する

1. 検索モーダルが開いたら、キーワードを入力します（例: 「WordPress 入門」）
2. 「検索」ボタンをクリックするか、Enterキーを押します
3. Amazon APIを通じて商品が検索され、結果が一覧表示されます

検索結果には以下の情報が表示されます：

• 商品画像（サムネイル）
• 商品名
• 著者名・ブランド名
• 参考価格

検索結果のページネーション（前へ/次へ）に対応しており、最大10ページ（100件）まで表示できます。

ステップ3: 商品を選択する

1. 検索結果から掲載したい商品をクリックします
2. モーダルが閉じ、選択した商品のプレビューがエディタ上に表示されます
3. 自動的にAmazon APIから商品の詳細情報（高解像度画像・商品説明など）が取得されます

選択完了後、エディタ上には以下が表示されます：

• ASIN表示: 選択した商品のASINコード
• プレビュー更新ボタン: 手動でプレビューを再生成
• 商品を変更ボタン: 別の商品に変更したい場合
• ライブプレビュー: 実際のフロントエンドの見た目と同じプレビュー

ステップ4: 記事を保存する

設定が完了したら、記事を保存（公開または下書き保存）してください。保存時にブロック内のstaticHTML（静的HTML）がそのまま出力され、フロントエンドに商品カードが表示されます。

---

設定パネルの解説

商品を選択すると、右側のサイドバー（インスペクター）に設定パネルが表示されます。全部で5つのパネルがあります。

パネル1: 表示設定

商品カードの見た目を調整する基本設定です。

画像サイズ

商品画像の大きさを選べます。

値	サイズ	おすすめの用途
小	75px	テキスト中心の紹介
中	160px	バランスの良い標準表示（デフォルト）
大	500px	商品画像を目立たせたい

表示モード

商品カードの表示形式を選べます。

モード	説明
通常	画像＋テキスト＋ボタンのフルカード表示（デフォルト）
画像のみ	商品画像だけのリンク（アフィリエイトリンク付き）
テキストのみ	商品名テキストだけのリンク（アフィリエイトリンク付き）

トグル（ON/OFF）設定

設定	デフォルト	説明
価格を表示	挿入時のCocoon設定の値	商品の価格を表示します。取得時刻も表示されます
説明文を表示	挿入時のCocoon設定の値	商品の説明文（Features）を表示します
レビューリンクを表示	挿入時のCocoon設定の値	Amazonのカスタマーレビューへのリンクを表示します
枠線を表示	ON	商品カードの枠線を表示します
Amazonロゴを表示	挿入時のCocoon設定の値	カード右上のAmazonロゴを表示します
カタログ画像を表示	挿入時のCocoon設定の値	商品のバリエーション画像（色違いなど）を表示します

パネル2: カスタムコンテンツ

商品の表示内容を自分でカスタマイズできます。

カスタムタイトル

• APIから取得したタイトルの代わりに、自分で指定したタイトルを表示できます
• 空欄のままにすると、Amazonから取得したオリジナルのタイトルが使われます

カスタム説明文

• Amazonから取得した説明文の代わりに、自分で書いた説明文を表示できます
• 「説明文を表示」がOFFの場合、この設定は無効になります（入力欄がグレーアウトします）
• 空欄のままにすると、APIから取得した説明文が使われます

検索キーワード

• ストアボタン（Amazon・楽天・Yahoo!など）の検索リンクに使うキーワードを指定できます
• 空欄のままにすると、商品タイトルがキーワードとして使われます
• 商品名が長い場合や、より適切なキーワードがある場合に便利です

パネル3: ストアボタン

各ストアの検索リンクボタンの表示/非表示を切り替えます。

ボタン	デフォルト	説明
Amazonボタン	挿入時のCocoon設定の値	Amazonの商品ページへのリンクボタン
楽天ボタン	挿入時のCocoon設定の値	楽天市場の検索ページへのリンクボタン
Yahooボタン	挿入時のCocoon設定の値	Yahoo!ショッピングの検索ページへのリンクボタン
メルカリボタン	挿入時のCocoon設定の値	メルカリの検索ページへのリンクボタン

各ストアボタンのリンクは、商品タイトル（またはカスタム検索キーワード）を使った検索リンクになります。Amazonボタンのみ、商品ページへの直接リンクになります。

パネル4: もしもアフィリエイト

アフィリエイトリンクをもしもアフィリエイト経由にするかどうかを設定します。

• 「リンクをもしもアフィリエイト経由にする」をONにすると、各ストアボタンのリンクがもしもアフィリエイト経由のリンクに変換されます
• Cocoon設定でもしもアフィリエイトのID（Amazon / 楽天 / Yahoo用）が1つも設定されていない場合、この機能は利用できません（その旨のメッセージが表示されます）

もしもアフィリエイトを利用する場合は、必ずCocoon設定で該当するもしもIDを設定してください。IDが設定されていないストアのリンクは、もしも経由にはなりません。

パネル5: カスタムボタン

商品カードに独自のボタンを最大3つまで追加できます。

設定項目	説明
ボタン テキスト	ボタンに表示する文字（例: 「公式サイトで見る」）
ボタン URL	ボタンをクリックした時のリンク先URL

例えば、メーカーの公式サイトや、別のECサイトへのリンクを追加したい場合に便利です。

---

ツールバー操作

商品選択後、プレビューの上部に表示される操作ボタンです。

ボタン	機能
プレビュー更新	現在の設定でプレビューHTMLを再生成します
商品を変更	検索モーダルを再度開いて、別の商品に変更できます

---

初期値について

ブロックを新規追加したとき、一部の設定はCocoon設定の値が自動的に反映されます。

以下の設定がCocoon設定から初期値として読み込まれます：

• 枠線の表示
• Amazonロゴの表示
• カタログ画像の表示
• 価格の表示
• 説明文の表示
• レビューリンクの表示
• 各ストアボタンの表示（Amazon・楽天・Yahoo!・メルカリ）
• もしもアフィリエイトの使用

これらの初期値はブロックを新しく追加したときにのみ適用されます。一度保存したブロックの設定は、Cocoon設定を変更しても上書きされません。

---

自動更新機能

Amazon商品リンクブロックには、商品情報を自動的に定期更新する機能があります。

仕組み

WordPressのWP-Cron（定期タスク実行機能）を使って、投稿内のAmazon商品リンクブロックの情報を自動的に最新の状態に更新します。

更新される内容

• 商品タイトル
• 商品画像（全サイズ・バリエーション画像含む）
• 価格
• 著者名・ブランド名
• 商品説明
• 商品ページURL

カスタムタイトルとカスタム説明文はユーザーが設定した値が維持され、自動更新では上書きされません。

更新間隔

Cocoon設定で以下の間隔を選べます。

間隔	説明
1日ごと / 2日ごと	頻繁に価格が変わる商品を紹介しているサイト向け
3日ごと	推奨設定
5日ごと / 1週間ごと	そこまで変動しない商品を紹介しているサイト向け
2週間ごと	あまり変動しない商品を紹介しているサイト向け

バッチ処理

自動更新は一度にすべての投稿を処理するのではなく、バッチ処理（少しずつ分割して処理）を行います。これはAmazon APIのレート制限に配慮し、サーバーへの負荷を軽減するためです。

• 1回の実行で処理する投稿数はCocoon設定で変更できます
• 投稿間・APIリクエスト間にスリープ（待機時間）が入ります
• 全投稿の処理が完了すると、次の実行で最初から再び処理を開始します

自動更新時に投稿の「更新日時」は変更されません。商品情報の更新だけが行われます。

---

よくあるトラブルと対処法

「Amazon APIに接続できませんでした」と表示される

原因: Creators APIの認証情報が正しく設定されていない可能性があります。

対処法:

1. Cocoon設定の「API」タブを開きます
2. AmazonアソシエイトトラッキングID、Creators API認証情報ID、シークレットが正しく入力されているか確認します
3. Creators APIの利用資格があるか（Amazonアソシエイトの審査に合格しているか）を確認します

「商品が見つかりませんでした」と表示される

原因: 指定したASINの商品がAmazonのカタログに存在しないか、Creators APIで取得できない商品です。

対処法:

• 別のキーワードで検索してみてください
• Amazonのサイトで商品が存在するか確認してください

検索結果が表示されない

原因: キーキーワードに一致する商品がないか、API接続の問題の可能性があります。

対処法:

1. より一般的なキーワードで検索してみてください
2. ネットワーク接続を確認してください
3. Creators APIの利用制限に達していないか確認してください

プレビューが「プレビューを生成中...」のまま止まる

原因: APIの応答に時間がかかっている可能性があります。

対処法:

1. しばらく待ってみてください
2. 「プレビュー更新」ボタンをクリックしてプレビューの再生成を試みてください

価格が表示されない

原因: 一部の商品では、Creators APIから価格情報が取得できないことがあります。

対処法:

• これはAmazon側の仕様によるもので、対処方法はありません
• 「価格を表示」をOFFにすることで、価格欄自体を非表示にできます