Affilicard WP Registry grade A. No security issues foundWP RegistryNo security issues foundOpen the reportA

汎用アフィリエイト商品カードの WordPress プラグイン。電子書籍 / VOD / 家電など複数の商品ジャンルに対応する拡張可能設計。

主な機能 (v1.0.0)

• カスタム投稿タイプ affilicard_product で 1 商品 = N プラットフォーム listing を管理
• 商品タイプ拡張 (Affilicard\Types\ProductTypeInterface): 汎用 / 電子書籍 / VOD (4a-4)
• Provider 拡張 (Affilicard\Provider\ProviderInterface): 手動入力 / DMM ebook API / Amazon (4b) / 楽天 (4b)
• React + @wordpress/scripts ベースの管理画面 (Settings + 商品編集 Metabox)
• WP REST API (/wp-json/affilicard/v1/*) で外部ツールから商品 upsert 可能
• AES-256-CBC で Provider 認証情報を暗号化保存
• URL フォールバック (アフィリエイト URL 未設定時は通常 URL) + admin 可視化 (CPT 一覧 + ダッシュボードウィジェット)
• 自動更新: GitHub Releases から plugin-update-checker v5.7 で配信
• Gutenberg Block (affilicard/product-card): ブロックエディタから商品カードを挿入、サーバサイドレンダリングで常に最新情報を表示

Gutenberg Block の使い方

ブロックの挿入

1. 投稿・固定ページのブロックエディタで「Affilicard 商品カード」ブロックを挿入
2. 「商品を検索」コンボボックスで登録済み商品を検索・選択（/products?search= REST API 経由）
3. 右サイドバーの「色設定」パネルでボタン・カードの色を調整（テーマパレット連携）

表示はサーバサイドレンダリング（dynamic block）で行われるため、常に最新の商品情報・在庫状態が反映されます。在庫切れ (out_of_stock) や販売終了 (discontinued) 時は CTA ボタンが非表示になります。

色のカスタマイズ

ブロック属性（InspectorControls）で設定した色は CSS カスタムプロパティとしてブロック要素に付与されます。テーマやカスタム CSS からも以下のプロパティで上書き可能です。

/* テーマの style.css やカスタム CSS で上書きする例 */
.wp-block-affilicard-product-card {
    --affilicard-cta-bg: #e60033;
    --affilicard-cta-text: #ffffff;
}

計測用 data 属性

商品カードは、タグマネージャや解析ツールから読めるように data-affilicard-* 属性を出力します。 プラグイン自体は計測イベントを送信しません（フロント JS を一切読み込みません）。送信は Google Tag Manager などの外部ツール側で組み立ててください。

CTA ボタン（a.affilicard-card__cta）

カードのルート要素（.affilicard-card）

data-affilicard-product-id / data-affilicard-product-slug / data-affilicard-product-title の 3 つ。 data-affilicard-platform は出力しません（1 枚のカードに複数プラットフォームが並ぶため単一値にならないため）。

注意

• 値が空の項目は属性ごと出力されません。 空文字の属性が計測側に空パラメータとして届くのを避けるためです
• クリックを拾うセレクタは a[data-affilicard-platform]、カードの表示を拾うセレクタは .affilicard-card を推奨します
• 将来 CTA の内部に要素が増えてもクリック対象がずれないよう、イベント側では closest() で祖先を辿ってください
• 非 ASCII のタイトルから WordPress が自動生成したスラッグはパーセントエンコードされ、非常に長くなります（和文 20 文字程度で 180 文字前後）。計測基盤にはパラメータ値の長さ制限があることが多く（例: GA4 は 100 文字で無言の切り詰め）、超えた分は復元できません。長さが問題になる場合は商品に明示的な ASCII スラッグを与えてください。スラッグは REST API が返す値と一致している必要があるため、プラグイン側でデコードして出力することはしません

動作要件

• WordPress 6.8+
• PHP 8.1+
• Node.js 20+ (開発時)

インストール

1. Releases から最新の zip をダウンロード
2. WP 管理画面の「プラグイン > 新規追加 > プラグインのアップロード」から導入
3. 有効化すると Affilicard メニューが追加されます

REST API

すべてのエンドポイントは https://example.com/wp-json/affilicard/v1/ 配下。

認証

WordPress Application Passwords を推奨。

curl -u 'username:xxxx xxxx xxxx xxxx xxxx xxxx' \
     -X POST https://example.com/wp-json/affilicard/v1/products \
     -H 'Content-Type: application/json' \
     -d '{
       "title": "サンプル商品",
       "product_type": "ebook",
       "stock_status": "available",
       "extras": [
         { "key": "author",    "label": "著者",   "value": "山田太郎" },
         { "key": "publisher", "label": "出版社", "value": "サンプル社" }
       ],
       "listings": [
         {
           "platform": "dmm-books",
           "enabled": true,
           "auto_update": true,
           "external_id": "56869",
           "regular_url":   "https://book.dmm.com/product/56869/",
           "affiliate_url": "https://al.dmm.com/?lurl=...",
           "price": "600",
           "list_price": "1000",
           "badge": "40%OFF"
         }
       ]
     }'

auto_update（既定 true）は listing 単位の自動更新スイッチで、全プラットフォーム共通。false にすると定期実行の価格更新から外れる（同期の負荷を抑えたい listing に使う）。設定画面の「強制一括更新」は false の listing も更新する。自動取得そのものの可否はプラットフォームの Provider 側で決まるため、Provider が手動入力のプラットフォームでは true でも取得されない。

なお update_mode（既定 auto）は v3.2.x 以前の互換フィールドで、保存済みの値も判定に使われる。manual の listing は auto_update が true でも自動更新されない（api は auto の旧表記として扱う）。商品編集画面で「自動更新」トグルを操作すると auto へ正規化される。

一括作成（bulk）

複数商品を 1 リクエストで投入する（1 リクエスト最大 100 件）。1 件の検証エラーは全体を止めず、各アイテムの結果を返す（部分成功）。上限超過時は何も保存せず 400（affilicard_bulk_too_many）を返す。

curl -u 'username:xxxx xxxx xxxx xxxx xxxx xxxx' \
     -X POST https://example.com/wp-json/affilicard/v1/products/bulk \
     -H 'Content-Type: application/json' \
     -d '{
       "products": [
         { "title": "作品A", "product_type": "vod",
           "extras": [{ "key": "director", "label": "監督", "value": "山田太郎" }],
           "listings": [{ "platform": "u-next", "affiliate_url": "https://example.com/a" }] },
         { "title": "作品B", "product_type": "ebook" }
       ]
     }'

レスポンス（HTTP 207 Multi-Status）:

{
    "results": [
        { "index": 0, "status": "created", "id": 123 },
        { "index": 1, "status": "created", "id": 124 }
    ],
    "created": 2,
    "failed": 0
}

失敗したアイテムは { "index": N, "status": "error", "message": "..." } を返す。

Hybrid extras 形式

[
    { "key": "author", "label": "著者", "value": "..." },
    { "key": "publisher", "label": "出版社", "value": "..." },
    { "label": "ラベル", "value": "値" }
]

• key を含む行は ProductType の extrasSchema() 由来 (electronic book なら author/publisher/isbn)
• key なしの行はカスタム追加
• 未知の key が来た場合は無視 (label/value のみ保持)

商品タイプ・プラットフォーム拡張

新しい ProductType を追加

1. src/Types/MyType.php で Affilicard\Types\AbstractProductType を継承
2. code() / label() / extrasSchema() を実装（最低限この 3 つ）
3. extrasSchema() の各フィールドに card 区分を付与してカード表示を制御:
   • 'card' => 'header': 書誌ヘッダ（タイトル下）に昇格
   • 'card' => 'detail'（既定）: カード詳細部に表示
   • 'card' => 'hidden': カード非表示（メタ情報のみ）
4. 画像プレースホルダ文言を変えるなら cardMediaLabel() を override
5. 外部 API 連携があれば extractExtrasFromProvider() を実装（手動入力のみなら return array();）
6. Plugin::buildProductTypeRegistry() に $registry->register(new MyType()) を追加

実装例は src/Types/EbookType.php（API provider 連携あり）と src/Types/VodType.php（手動入力のみ・監督/出演を header に昇格）を参照。VOD のように provider 連携が無い場合は extractExtrasFromProvider() を空配列で返すだけでよい。新しいプラットフォームを使う場合は PlatformConfig::defaults() に applicableTypes を新タイプの code にした PlatformDefinition を追加する（src/Platform/PlatformConfig.php の VOD platform 群を参照）。

Account / Provider を追加する

1. src/Account/<Name>Account.php に AccountInterface（code/label/credentialsSchema）を実装し、 Plugin::buildAccountRegistry() に register する。
2. src/Provider/<Name>/<Name>Provider.php に ProviderInterface（code/label/isAutomatic/ accountCode/fetch/testConnection）を実装し、Plugin::buildProviderRegistry() に register する。

設定画面のアカウント認証フィールド・provider ドロップダウンは、AccountUiList/ProviderUiList → wp_add_inline_script → accounts.js/providers.js で 自動生成される（管理画面 JS の改修は不要）。

開発

composer install
npm install --legacy-peer-deps

# テスト
composer test          # PHPUnit 9.6 + WP_Mock
npm run test:js        # Jest (wp-scripts)

# Lint
composer lint
npm run lint:js

# ビルド (build/ 配下に bundle 出力)
npm run build

WP Playground でのプレビューは PR ごとに自動で払い出されます。PR で composer install + npm run build を実行してビルド済みプラグイン zip を生成し (.github/workflows/pr-preview-build.yml)、その zip を Playground にインストールする Preview ボタンを PR に投稿します (.github/workflows/pr-preview-publish.yml)。これにより React/Block を含むビルド成果物も Playground 上で動作確認できます（build/ は git 管理せず CI でビルド）。

ライセンス

MIT