[PR]
本サイトはアフィリエイト広告を利用しています。
「Pinpoint Yahoo Shopping Affiliate（仮）」の設定画面とフロントの商品カード表示
Yahooショッピング連携プラグイン：設定画面＋商品カードUIサンプル
Pinpoint Suite 配下に「Yahooショッピング連携」設定画面を追加し、記事側のショートコードから Yahoo!ショッピングの商品カードをグリッド表示するUIイメージです。
Yahooショッピング連携設定 管理画面 / Pinpoint Suite
Yahoo アプリケーションID (appid)
必須
※ Yahoo!デベロッパーネットワークで取得したアプリケーションIDを入力します。
ValueCommerce MyLink タグ
必須 / HTMLごと貼り付け
※ MyLink のHTMLをそのまま貼り付けると、アフィリエイトIDを自動生成します。
自動生成された affiliate_id（確認用）
読み取り専用
http%3A%2F%2Fck.jp.ap.valuecommerce.com%2Fservlet%2Freferral%3Fsid%3DXXXX%26pid%3DYYYY%26vc_url%3D
デフォルト検索キーワード
任意
1ページの表示件数
デフォルトレイアウト
「プロテイン」で検索した商品カード表示サンプル
ショートコード:
[pp_ysa_items keyword="プロテイン" limit="6" layout="grid"]
キーワード連動表示
商品画像
ホエイプロテイン 1kg ココア味 国内製造 WPC 高タンパク
商品画像
ソイプロテイン 900g プレーン 無添加 女性向け ダイエットサポート
商品画像
レディ向けホエイプロテイン 750g ベリー風味 ビタミン配合
商品画像
ジュニアプロテイン 成長サポート ココア味 カルシウム＋ビタミンD
商品画像
BCAA＋ホエイプロテイン パウダー レモン風味 トレーニング前後用
商品画像
初心者向けお試しプロテイン 7日分 飲み比べセット
最小コード（フロント出力ショートコードのイメージ）
[pp_ysa_items keyword="プロテイン" limit="6" layout="grid"]
<!-- PHP側で展開されるHTMLのイメージ -->
<div class="pp-ysa-grid">
<article class="pp-ysa-card">
<img src="商品画像URL" alt="商品名" class="pp-ysa-thumb">
<h3 class="pp-ysa-title">商品名テキスト...</h3>
<div class="pp-ysa-meta">
<span class="pp-ysa-price">3,280円</span>
<span class="pp-ysa-rating">★4.5（1,234件）</span>
</div>
<a href="アフィリエイトURL" class="pp-ysa-btn" target="_blank" rel="nofollow sponsored">
Yahoo!ショッピングで見る
</a>
</article>
<!-- ...繰り返し... -->
</div>UI設計のポイント
- 左カラムは「Pinpoint Suite > Yahooショッピング連携」の設定画面として、必須項目だけをコンパクトにまとめています。
- ValueCommerce の MyLink タグは HTML ごと貼り付けてもらい、affiliate_id の生成はプラグイン側で自動化する前提です。
- 右カラムのカードは、画像・価格・レビュー・ボタンの4点に絞った「買い物UI」で、PCは3列、モバイルは1列のレスポンシブグリッドにしています。
- 実運用では、ショートコードで展開されるクラス名（pp-ysa-xxx）をテンプレートとして共通化し、テーマ側CSSでデザインを差し替えられるようにしておくと拡張しやすくなります。
- このUIサンプルをベースに、「ランキング表示」「タグ連動の関連商品」なども同じカードUIで再利用できます。
Yahooショッピング連携プラグイン：リスト（縦並び）商品UIサンプル
同じ商品データを「一覧で比較しやすい」リスト（縦並び）で表示するレイアウト例です。 記事本文の流れを崩さずに、価格・レビューをざっと見せたいときの想定UIです。
「プロテイン」で検索した商品リスト表示サンプル
ショートコード:
[pp_ysa_items keyword="プロテイン" limit="6" layout="list"]
リスト（縦並び）表示
商品画像
ホエイプロテイン 1kg ココア味 国内製造 WPC 高タンパク
公式ストア
ポイント+5倍
人気ランキング上位
商品画像
ソイプロテイン 900g プレーン 無添加 女性向け ダイエットサポート
人気ショップ
定期便あり
商品画像
レディ向けホエイプロテイン 750g ベリー風味 ビタミン配合
ランキング上位
女性人気
飲みやすさ高評価
商品画像
ジュニアプロテイン 成長サポート ココア味 カルシウム＋ビタミンD
子ども向け
牛乳に溶けやすい
最小コード（ショートコードと展開HTMLのイメージ）
[pp_ysa_items keyword="プロテイン" limit="6" layout="list"]
<!-- PHP側で展開されるHTMLのイメージ -->
<div class="pp-ysa-list">
<article class="pp-ysa-row">
<div class="pp-ysa-thumb">
<img src="商品画像URL" alt="商品名">
</div>
<div class="pp-ysa-main">
<h3 class="pp-ysa-title">商品名テキスト...</h3>
<div class="pp-ysa-meta">
<span class="pp-ysa-price">3,280円</span>
<span class="pp-ysa-rating">★4.5（1,234件）</span>
</div>
<a href="アフィリエイトURL" class="pp-ysa-btn" target="_blank" rel="nofollow sponsored">
Yahoo!ショッピングで見る
</a>
</div>
</article>
<!-- ...繰り返し... -->
</div>UI設計のポイント
- 画像左・テキスト右の「メディアオブジェクト」構造で、タイトルが長くても折り返して読みやすいようにしています。
- 価格・レビュー・送料条件を同一ラインにまとめ、ひと目で比較できるように構成しています。
- グリッド版と同じ商品情報を使いつつ、記事本文の途中に差し込んでも邪魔になりにくいコンパクトさを意識しています。
- クラス名（.pp-ysa-*）をこのサンプルのように固定しておけば、テーマ側CSSだけ差し替えてデザインのバリエーションを増やしやすくなります。
- ランキング表示や「タグ連動の関連商品」も同じリストUIで流用できるため、実装コストを抑えながら用途だけ切り替えられます。
決済はStripeで安全に処理されます。
Amazonで「wordpress・連携」を検索
Amazonで探す
この記事の感想をこっそり教えてください（非公開）
