コンテンツへスキップ
[景品表示法に基づく表示]本サイトでは広告による収益を受けています。気になった商品をクリック/タップしていただけたらブログ運営の励みになります!

今年はアフィリエイト用プラグインを作ってしまった

気づいた人はいたでしょうか。最近、ぷくおブログで商品を紹介する時に使っている紹介カードに「ぷくリンク」とか「Pukulink」という文字が描かれていることを(↓こんなやつです)。

もともとこのブログは、自分が他の人におすすめしたい!と思える商品を紹介したり、個人的な旅行記や食事レポなどのためのブログなのですが、その「商品」の販売先(Amazonとか)へのリンクを都度作るのは案外面倒なものなのです。

そこで、ブログを運用しているWordPressというコンテンツ管理システム用のプラグインを使って、編集画面において①プラグインのアイコンを押す ②紹介したい商品を検索 ③該当する商品を選んで「挿入」 というステップだと、画面遷移も当該編集画面(タブ)内で済むので便利というわけですね。

ぷくおは、これまで「WP Associate Post R2」というプラグインを使っていたのですが、Amazonの商品を検索するためのAPI仕様変更などにより事実上使えないプラグインとなってしまいました。

代替プラグイン

現在、有名なプラグインとしては「Rinker」や「Pochipp(ポチップ)」というものがありますが、Rinkerは記事編集画面だと「[itemlink post_id=”xxx”]」といったようなショートコードと呼ばれるもので表示されるため、実際になんの商品を紹介していたのかをみるには、プラグイン管理画面から確認するか記事のプレビューを見るしかありません。

また、Pochippは編集画面内で、商品名と価格などが表示されるのですが、個人的に残念なことにクラシックエディタ(旧エディタ)には非対応で、ブロックエディタしか対応していません。

自分は都度色々な商品を紹介していくスタイルなので、WP Associate Post R2のように都度好きな商品を挿入できる形。さらに、Wordのように文章を書き進めていけるクラシックエディタ好きなので、どちらのプラグインも合いませんでした。

そのため、しばらくの間は「商品名にリンクを張る」という初歩的な方法で行っていたのですが、面倒なうえに見た目も良くないのでアフィリエイト収入もただでさえ少ないのが壊滅的になり、結果ブログを書く気力も低下という悪循環に陥っていったのです。

2026年夏の作品:ぷくリンク

思えば、昨年夏はAIでbotを作るためのKindle書籍を作りましたが、今年も同じぐらいの時期になって「そうだ!自分でアフィリエイトリンクを作ってしまえばいいや!」という気持ちになり、Claude CodeとCodexの力を借りて1からプラグインを作ってしまいました(来年も初夏に何か作りたくなったとしたら、何か体のリズムと季節の関係がありそう)。

名前は「ぷくリンク」。ぷくおの(商品紹介)リンク作成プラグインなので「ぷくリンク(英語名だとPukulink)。安易な名前ですね笑

もともとはクラシックエディタで動作する、WP Associate Post R2のようなプラグインを作るだけだったのが、これまでに感じていた不便な点を網羅していった結果、かなり高機能なプラグインになってしまいました。

ぷくリンクの主な特徴

クラシックエディタ・ブロックエディタ両対応

これはもう完全に自分のためですが、自分にとって使い勝手の良いクラシックエディタで動くことがマストでした。

とはいえ、ブロックエディタも人気があるという話を聞いたので、両エディタに対応いたしました。

推しショップ

皆様お気付きの通り、ぷくおは手間暇かけて個別写真を撮影し気に入った個体を買えるようにしてくれているscopeさんがお気に入り。

とはいえ、例えば商品リンク検索時に「イッタラ オリゴ」なんて楽天で検索すると数多ある楽天市場内でイッタラを取り扱っているお店の検索結果が出てきてしまい、結果としてscopeさんの商品にたどり着かないことも多々あります。

普段使っていないお店の商品を紹介するというのは個人的に本意ではないため、お店のIDが取得できる楽天市場とYahoo!ショッピングにおいては、設定で「推しショップ」を登録することができるようにしました。

▲ 推しショップを設定しているところ(写真は英語版(以下同じ))

推しショップに登録すると、商品検索時に検索先を「全店」と「登録したお店」から選べるようになり、より自分が好きなお店の商品が登録できるようになりました。

▲ 商品検索時に「推しショップ」内を検索できる

とはいえ、今この文字を打ち込みながら、「こんな機能を欲しい人がどこまでいるのかな?」という疑問が無くはないのですが、とはいえ自分にとってはマストな機能の一つで気に入っています。

各モールへの紐付け

リンクを記事に挿入する際は、まず商品を検索を検索するわけですが、Amazonで検索した時は楽天市場とYahoo!ショッピングが。楽天市場で検索した時はAmazonとYahoo!ショッピングが、それぞれ検索キーワードに基づきモールボタンを押した際に当該モール内で検索されていました。

結果として、こちらの意図しない商品がずらっと表示されてしまうことが多々発生。書き手にとっても読み手にとっても好ましくない状況です。

これを無くすために、商品を検索したあと、挿入プレビュー画面において残るモールでも具体的にどの商品にリンクさせるか(紐付けさせるか)選べるようにしました。

▲ こちらはAmazonで「イッタラ オリゴ ボウル」が紐付けされている状態。楽天やYahoo!の右側にある「Link」ボタンを押すと、それぞれのモールでどのお店のどの商品にリンクを張るか設定可能
▲ 複数の紐付けを行うと、カードに表示される価格などの情報元となる「メイン」をどのモールから取得するかも変更可能

もちろんリンクを設定しなくても従来通り似たような商品がリンク先に出ますし、最初の「検索キーワード」を保持しているので複数ワードで検索することでかなり正確に商品が出るようになっています。

直近で紹介した商品の再利用

ぷくリンクを呼び出した画面に、直近で挿入した50商品の履歴を残すようにしました。1つの記事内で複数回紹介したい時などに便利かと思います。

▲ 直近紹介商品履歴

テンプレート

よく見かけるのが商品の写真と商品名、価格、モール名が組み合わされたカード。ですが、製品比較表などを載せる際には、「Amazon」「楽天」「Yahoo!」といったボタンだけ表示したいこともありました。

また、海外だと大きなカードにゆったりと情報を配置するというのが主流らしいので、それを「モダン」と名付けた上で、計6つのテンプレートを用意。さらにモールのボタン色と文字色は、モダンとそれ以外の2グループでそれぞれ設定できるようにしてみました。

さらに、Amazonと楽天市場で検索した場合は、当該商品において複数の写真が取得できた場合は、カード内で写真の切り替えができるようになっています(設定は、サイト全体の既定と、カード1枚ごとの上書きの2段構えで決められます)。

スタンダード

 

コンパクト

 

ラージカード

 

モダン

 

テキストリンク

 

岩鉄鉄器 ダクタイルパン26 鉄器 フライパン 鍋 26cm IH・ガス火対応 ポット アウトドア iwatetsu tekki 送料無料 公式 直営店商品 ※お陰様でご好評につき、2週間を目安に発送しております。

比較表用ボタン

横一列/塗りつぶし

 

Amazon楽天市場Yahoo! ショッピング

縦積み/枠線のみ

 

Amazon楽天市場Yahoo! ショッピング

編集画面での表示

編集画面では、挿入したカードがどんな内容なのか分かるようにしました。商品名、検索先、価格(と価格取得日)、表示モール名、テンプレート名。

▲ 編集画面での表示(クラシックエディタ)
▲ 編集画面での表示(ブロックエディタ)

再編集

一度記事に挿入したカードを再編集することも可能。編集画面で対象のカードにマウスを近づけると鉛筆アイコンがポップアップ。アイコンを押すと「挿入プレビュー画面」が表示され、テンプレートスタイルや各モールへの紐付けなどが後からでも編集できるようになっています。

▲ 再編集ボタンを表示させたところ

なので、急いでいる時はとにかく記事を作成。その後、時間のある時に各モールへの紐付けをゆっくり行う。なんて使い方も可能となっています。

価格表示

価格については、初期検索したモールにおける価格を、モール先に負担がかからないよう毎時少しずつ更新(既定は24時間のキャッシュ)するようになっています。

価格表示については、プラグイン全体のON/OFFのほか、各カードで切り替えできるようになっています。

合わせて「評価と口コミ」の設定で★評価と口コミリンクの表示もオン/オフできます。

その他

他にも次のような機能が含まれていて、正直まだ自分でも使いこなせていないぐらいというのが実情です。

  • クリック計測とレポート:カードのボタンが押された回数を、モール別に記録します。設定画面の「レポート」タブで、今月と先月の2か月分を「記事×モール×クリック数」の形で確認できます。長期の推移を見たい場合は、Google Analytics(gtag)へのイベント送信に対応しているので、そちらで追えます(個人を特定する情報は保存しません)
  • 商品の健全性:価格を取得できなかった商品は、単に在庫切れの場合もあれば、販売終了の可能性もあります。設定内レポート画面で一覧を確認でき、該当商品が紹介されている記事を表示し、メンテナンスしやすいように配慮しています
  • カスタマイズ
    • ボタンの色・文字色だけでなく、ボタンの文言や角丸の具合もカスタマイズ可能
    • カードの配色(ダークモード)は、既定は「端末・ブラウザに合わせる」となっていますが、常にダークテーマのサイトでは「常にダーク配色」を選ぶことが可能
  • 構造化データ出力:商品カードにschema.org形式のJSON-LDを出力させることも可能。出力するのは商品名・画像・モール別のオファー(価格・通貨・素の商品URL)です。アフィリエイトリンクは含めません。また、モール由来のレビュー点数を aggregateRating として出すことは意図的にしていません
  • もしもアフィリエイト対応(Amazon、楽天市場、Yahoo!ショッピング)
  • 接続テスト:各モールAPIとの疎通は設定画面の「接続テスト」から確認が可能。エラーは、各モール側が出した内容を元に日本語でどこを直せば良いか分かる文言で表示します(秘密鍵などの情報は非表示なので安心)
  • AI下書きにも対応:記事の執筆をAIに任せる場合、[pukulink_draft keyword=”正式名称”]を指示するだけでOK。AIはリンクを直接書かず、キーワードだけを置いていきます。下書き画面ではその位置が琥珀色のプレースホルダーになり、鉛筆アイコンから検索済みの候補を選べば正式なカードに変換されます。確定を忘れてそのまま公開しても、フロントには何も表示されないので事故の心配もありません。
    ▲ AIマーカーのプレースホルダーを編集画面に移行させるところ

入手先

WordPress公式ディレクトリへの申請が完了しました。WordPressの「プラグインを追加」画面内で『Pukulink』を検索すれば利用可能となります。

この関係で、もともと日本語で作っていたプラグインが英語版となっていますが、現在日本語版のアップロードも終了。おそらく明日(8/20)あたりにはサーバー側で言語パックが生成され、日本語利用が可能になるらしいです。

よかったら使ってみてくださいね。ではでは。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Webサービス by Yahoo! JAPAN