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

はじめに

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

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

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

最初からAPI制限がかかっている場合はご利用できません。

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

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

---

事前準備

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

1. 楽天APIの設定

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

設定項目	説明
楽天アプリケーションID	楽天ウェブサービスで発行されるID（API利用に必須）
楽天アフィリエイトID	楽天アフィリエイトに登録すると取得できるID（アフィリエイトリンク生成に必須）

重要: 楽天APIを使うには、楽天ウェブサービスに登録してアプリケーションIDを取得し、楽天アフィリエイトに登録してアフィリエイトIDを取得する必要があります。

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

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

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

---

基本的な使い方

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

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

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

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

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

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

• 商品画像（サムネイル）
• 商品名
• ショップ名
• 参考価格

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

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

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

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

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

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

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

---

設定パネルの解説

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

パネル1: 表示設定

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

画像サイズ

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

値	サイズ	おすすめの用途
小	64px	テキスト中心の紹介
中	128px	バランスの良い標準表示（デフォルト）

楽天APIが提供する画像は小（64px）と中（128px）の2種類です。Amazon商品リンクブロックと異なり、大（500px）サイズは選択できません。

表示モード

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

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

トグル（ON/OFF）設定

設定	デフォルト	説明
価格を表示	挿入時のCocoon設定の値	商品の価格を表示します。取得時刻も表示されます
説明文を表示	挿入時のCocoon設定の値	商品の説明文を表示します
枠線を表示	挿入時のCocoon設定の値	商品カードの枠線を表示します
楽天ロゴを表示	挿入時のCocoon設定の値	カード右上の楽天ロゴを表示します

Amazon商品リンクブロックにある「レビューリンクを表示」「カタログ画像を表示」の設定は、楽天商品リンクブロックにはありません。これは楽天APIがこれらの情報を提供していないためです。

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

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

カスタムタイトル

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

カスタム説明文

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

検索キーワード

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

パネル3: 購入タイプ

楽天市場の商品検索時に、購入タイプでフィルタリングできます。

購入タイプ	説明
通常購入	一般的な商品購入（デフォルト）
定期購入	定期配送の商品のみを検索
頒布会購入	頒布会（毎月届く異なる商品セットなど）のみを検索

この設定は商品検索時のフィルタリングに使用されます。購入タイプを変更した場合は、再度商品を検索して選択してください。

パネル4: ストアボタン

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

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

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

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

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

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

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

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

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

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

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

---

ツールバー操作

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

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

---

初期値について

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

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

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

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

---

自動更新機能

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

仕組み

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

更新される内容

• 商品タイトル
• 商品画像（小・中サイズ）
• 価格
• ショップ名
• 商品説明
• アフィリエイトURL
• アフィリエイト料率

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

更新間隔

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

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

バッチ処理

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

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

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

---

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

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

原因: 楽天APIの設定が正しくない可能性があります。

対処法:

1. Cocoon設定の「API」タブを開きます
2. 楽天アプリケーションIDと楽天アフィリエイトIDが正しく入力されているか確認します
3. 楽天ウェブサービスのAPI利用制限に達していないか確認します

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

原因: 指定した商品コードの商品が楽天市場に存在しないか、販売終了した可能性があります。

対処法:

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

検索結果が表示されない

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

対処法:

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

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

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

対処法:

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

価格が表示されない

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

対処法:

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