Builder」でAmazonアソシエイトのリンクを設置する方法WordPress2018年2月23日これまでAmazonで購入した商品レビューの類の記事では、Amazonアソシエイトのリンクをtable要素にて手動で設置していたのですが、もっとAmazonらしいリンクかつ販売者や価格もリアルタイムで表示できるよう、改修を試みることに。Builder」を導入して対応することにしました。Builder」を活用して、洗練されたデザインでAmazonアソシエイトのリンクを設置する方法についてご紹介させていただきたいと思います。アソシエイト管理画面で生成されるリンクはイマイチこれまでtable要素で主に対応していた理由の1つでもあるのですが、Amazonアソシエイトの管理画面で「テキストと画像」にて商品リンクを作成すると、以下のように非常に簡素でちょっと一昔を思わせるようなデザインで表示することになってしまうんですよね。iframeで設置することになるiframeではサイトパフォーマンスも落ちますし、Web屋の芝生DIYの記事は全てAMP対応していることもあり、そもそもiframeで設置する選択肢はありません(厳密にはamp-iframeという方法もありますが除外)そのためこれまでは、静的リンクで以下のようにせめてリンクと価格だけを表示していました。Builder」を採用した理由Amazonアソシエイトのリンクを設置するWordPressのプラグインといえば、「AmazonJS」が有名ですが、今回こちらの採用は見送りました。言いますのも、非常に便利なプラグインだとは思うのですが、JavascriptベースでDOM生成するため、あんまりパフォーマンスがよくはないんですね。開発も停止しているらしく、中長期的にサイト運営を考えた時、「WordPressのバージョンアップに伴い使えなくなった」というリスクだけは避けるべきと考えました。WordPressのポピュラーなテーマであれば比較的導入の敷居は低くないようですが、試しに導入を試みたところどうにも正常に動かず。オリジナルテーマであるWeb屋の芝生DIYでは導入が難しそうであった点も、見送った理由の1つです。JavascriptベースなのでAMP対応も不可です。「カエレバ」や「ヨメレバ」といった外部の商品紹介ツールも検討しましたが、Web屋の芝生DIYではAmazonへのリンクがあれば十分で、書籍紹介の記事も少ないためこれらもやはりよい選択肢とはいえず。余計なクレジットも表示されてしまいます。Builder」はWeb屋の芝生DIYと非常に親和性が高かったんですね。価格やメーカーをリアルタイムで取得できるAMP対応している(htmlで要素を出力できる)カスタマイズが可能(オリジナルテンプレートを作成可能)投稿画面からショートコードで簡単に設置できるクレジットの表記も必要ない上記の点から、ほぼほぼデメリットは無いということで、こちらのプラグインを導入することに決定しました。Builder」の導入手順を、以下のステップで説明させていただきたいと思います。最終的には、以下のようにナウでヤングなデザインのリンクを設置するまでをゴールとしたいと思います。3,998メーカー:MARUTO(マルト)販売者:Amazon.co.jp1Amazonアソシエイトアカウント(アソシエイトID)を作成まずは以下のページにアクセスし、Amazonアソシエイトのアカウントを作成します。Amazonアソシエイト(アフィリエイト)プログラムに参加しよう!既にアカウントを作成済みであれば「サインイン」を、新規登録する場合は「無料アカウントを作成する」をクリックします。※アカウント作成済みの方は「2アクセスキー、シークレットキーを取得」までスキップしてください名前、メールアドレス、パスワードを入力し、「Amazonアカウントを作成」をクリックします。画面に従って、アカウント情報を入力していきます。全て入力したら、「次へ」をクリックします。Amazonアソシエイトのリンクを貼るドメインを入力し、「追加」をクリックで追加後、「次へ」をクリックします。希望するアソシエイトIDおよびWebサイトの情報を入力します。情報を入力したら画像認証を入力後、「次へ」をクリックします。電話でアカウント情報の認証を行います。お手元にある電話の番号を入力し、「今すぐ電話する」を入力すると、電話がかかってきます。電話の自動音声に従って操作を行うと、画面が「お客様のご本人確認が完了しました〜」に変わります。運営規約を読んでチェックを入れ、「完了」をクリックします。これでAmazonアソシエイトの登録が完了しました。続けてお支払い情報と税金情報を入力することもできますが、ここでは「あとで」をクリックします。Amazonアソシエイトの管理画面トップに移動します。画面右上に作成したID「hoge123405-22」が表示されていますね。Builder」で設定するアソシエイトIDになるので控えておきます。API」に登録する必要があります。API]をクリックします。APIのページに移動したら、画面中部にある「利用をはじめる」をクリックします。認証情報が発行されますので、この「アクセスキー」「シークレットキー」を控えておきましょう。「認証情報をダウンロードする」をクリックすると、認証情報が記載されたファイルをダウンロードすることもできます。Builder」をインストールします、以下のURLよりダウンロードすることができます。プラグインダウンロードしたファイルを解凍後、フォルダごとWordPressがインストールされているフォルダの「/wp-content/plugins/直下」にFTPソフトでアップロードします。管理画面の[プラグイン]-[新規追加]から検索してインストールしてもOKです。管理画面の[プラグイン]-[インストール済みプラグイン]より、有効化します。Builder」の設定を行ういよいよプラグインの設定を行っていきます。Builder」が追加されていますので、これの「Settings」をクリックします。先ほど登録した「アソシエイトID」「アクセスキー」「シークレットキー」をそれぞれを入力します。Changes」をクリックして保存します。続けて、「Templates」に移動し、テンプレートの設定を行います。今回オリジナルデザインでリンクを設置するため、新規でテンプレートを追加します。template」を選択し、ここでは「Original」というテンプレート名でテンプレートを作成します。テンプレートのソースは以下で設定します。メーカー」「販売者」を表示します。参考価格と価格は在庫がある場合のみ表示し、さらに、Amazonプライムの対象商品であれば「プライム」アイコンを表示するようにしています。alt="プライム">{{/Prime}}</li>{{/InStock}}{{#By}}<li>メーカー:{{By}}</li>{{/By}}{{#Merchant}}<li>販売者:{{Merchant}}</li>{{/Merchant}}</ul></div>{{/aalb}}{{/Item}}</a></div>{{/Items}}オリジナルのテンプレートの情報を入力したら、「Save」で保存します。「Settings」に移動し、デフォルトのテンプレートを「Original」に変更します。Template」のプルダウンにて「Original」を選択します。Changes」をクリックして保存します。設定したテンプレートのマークアップにあわせ、以下のcssを追加します。使用しているテーマに合わせて、細かい箇所は弄んでください。}}6投稿画面からショートコードでリンクを設置これでやっと全ての準備が整いました。投稿画面からリンクを設置してみたいと思います。投稿画面には、Amazonアソシエイトのリンクを設置できるUIが追加されています。ブルー」へのリンクを設置してみたいと思います。キーワードを入力し、「Search」をクリックします。商品追加のダイアログが立ち上がります。目当ての商品が表示されたら、商品をクリックします。Shortcode」をクリックします。投稿画面のエディタにショートコードが追加されました。生成されたページを開くと、Amazonアソシエイトへのリンクが下の画像のような見た目で表示されている事が確認できます。設置されたリンクが正しくアカウントと紐付けされているかどうか確認するには、Amazonから提供されている以下のリンク動作確認ツールで確認することができます。テキストリンクリンクURLを入力し、「リンクを確認」をクリックします。「有効〜」と表示されればOKです。設置したAmazonアソシエイトのリンクは正しくアカウントに紐付けされています。Builderはとてもよいプラグインですが、日本語で解説されている記事が少ないのがたまにキズです。玄人向けのためか評価も低いようですが、必要最低限の機能を備えたシンプルでとてもよいプラグインだと思います。Amazonアソシエイトへのリンクを設置するという目的において、プレーンなHTMLかつ自由なマークアップで生成できるだけでも、このプラグイン一択ではないかといってもいいくらい、個人的には今のところ気に入っています。Builder、とてもおすすめです。Amazonアソシエイトへのリンク設置の際、ぜひ本記事がご参考になれば幸いです。ため、即時には反映されません。住宅ローン2019年5月7日さらに見る記事を書いている人フォローするRSSを購読するWebデザイナー/フロントエンド・エンジニアのMasaです。独学でWebデザインを勉強後Web業界へ就職し、今の会社に勤めて12年目になりました。2016年4月にマイホームを購入し、休日は芝生いじりと育児に励んでいます。