アマゾンのアフィリエイトプラグインをAmazonJSからAmazon Associates Link Builder に切り替えました。
AmazonJS ではなんの問題もなかったのですが長い間更新されていなかったのとAMP対応されそうもなかったので切り替えることにしました。
Amazon Associates Link Builder はAMP表示に対応してます。ただWING（AFFINGER5）ではAMPがβなこともあり表示されないみたいですが。
Amazon Associates Link Builder テンプレート登録
Amazon Associates Link Builderでは表示のテンプレートを登録することでAmazonJSっぽい表示もできるようになっています
役に立つかどうかわかりませんが自分のテンプレートを乗っけておきますね
Add HTML for your template
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
{{#Items}} {{#Item}} {{#aalb}} <div class="aalb-sample-template"> <div class="aalb-sample-template__image"> <a class="aalb-sample-template__image-link" href="{{DetailPageURL}}" title="{{Title}}" target="_blank" rel="nofollow"> <img src="{{MediumImageURL}}" alt="{{Title}}" /> </a> </div> <div class="aalb-sample-template__details"> <div class="amzn-product-meta"> <div class="amzn-product-title"><a href="{{DetailPageURL}}">{{Title}}</a></div> {{#By}}<div class="amzn-product-brand">{{By}}</div>{{/By}} <div class="amzn-product-price"> {{#StrikePrice}}<div class="amzn-product-strike-price">参考価格：<span class="strike-price">{{StrikePrice}}</span></div>{{/StrikePrice}} {{#SavingPercent}}<div class="amzn-product-saving">OFF: <span class="saving-percent">{{SavingPercent}}%</span></div>{{/SavingPercent}} <span class="amzn-product-current-price">{{CurrentPrice}}<span> {{#Prime}}<span class="amzn-product-prime-icon"><i class="icon-prime"></i></span>{{/Prime}} </div> {{#Merchant}}<div class="amzn-product-seller">{{Merchant}}</div>{{/Merchant}} </div> <div class="aalb-sample-template__btn"> <a href="{{DetailPageURL}}" title="{{Title}}" target="_blank" rel="nofollow">Amazonで探す</a> </div> </div> </div> {{/aalb}} {{/Item}} {{/Items}} |
Add CSS for your template
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
.aalb-sample-template { display:block; padding:1rem; border: 1px solid #ddd; border-radius:4px; box-shadow: 1px 1px 2px rgba(0,0,0,.05); } .aalb-sample-template__image { text-align:center; } .aalb-sample-template__details { margin: .5rem 0 0; } .aalb-sample-template__price { font-size: .8rem; color: #666; } .aalb-sample-template__btn { margin: 1rem 0 0; } .aalb-sample-template__btn a { display:block; padding: .25rem 2rem; border:1px solid #f47e1e; border-radius:4px; background-color: #f47e1e; color: #fff; text-decoration: none; text-align:center; transition:all .3s; } @media only screen and (min-width: 600px) { .aalb-sample-template { display:flex; } .aalb-sample-template__details { margin: 0 0 0 1rem; } .aalb-sample-template__btn a { display:inline-block; } .aalb-sample-template__btn a:hover { background-color: #fff; color: #f47e1e; } } |
適当にサイト巡って切り貼りしたものですがスマホ表示が綺麗にできたと結構気に入ってます
AmazonJSからAmazon Associates Link Builderへ書式の変更
こちらのページにプラグインと正規表現を用いた変更方法が描かれています
-
-
AmazonJSからLink Builderに一括で移行する方法 WordPress | wararyo SoundWorks
続きを見る
これで今までAmazonJSで描かれていたものもAmazon Associates Link Builderで表示できるようになります。AmazonJSはプラグイン欄から削除してしまいましょう
まとめ
これにて移行が完了しました。
AmazonJSよりAmazon Associates Link Builderのほうが柔軟性もあっていい感じだと思います
あとは早くAFFINGER5がAmazon Associates Link Builderに対応しないかなぁ
