がとらぼ

WordPressでアマゾンの商品広告を表示したいというときに日本ではAmazon JSが人気あるように思う。「がとらぼ」でも使ってきたし。
しかし、AMPを考慮するとJavascript+JQuery頼みのAmazon JSはちょっと困る。それとAmazon JSはWordPress本体のデータベースのテーブルの1つwp_optionsを汚染しすぎるし。
そこで乗り換え先のプラグインとしていろいろ探して見たが、Amazonアソシエイト推奨のAmazon Associates Link Builderで良くないかと思いはじめた。Javascriptを使わないテンプレートも使えるようだし。

初期設定と使用するテンプレート切り替えで利用する設定画面。
初期設定の保存時だけでなく、テンプレート切り替え時など保存ボタンを押す直前に毎回チェックボックスにチェックする必要があるのが面倒っちゃ面倒。

テンプレートの設定画面。
標準で用意されているテンプレートはPriceLink、ProductAd、ProductCarousel、ProductGrid、ProductLinkの5種類。標準(初期値)はProductCarouselだが、このテンプレートはjCarouselLiteを使ったスライド表示のためのJavascriptを含むので注意。
標準で存在する5つのテンプレートはそれを直接変更できないのでどこか変更して使いたいならベースのテンプレートを選んで[Clone]ボタンで複製し、名前を付けて自分用のテンプレートにする。複製したテンプレートと新規作成(Create new template)したテンプレートはいつでも編集可能(削除も)。
一般的な画像付き商品広告であればProductAdを複製したものをベースにするのが簡単かも。もちろん、1から作るのもありなので、その場合はCreate new templateを選択する。

標準テンプレートのPriceLinkで表示したもの。オレンジ線の枠はテンプレートには含まれない。
その名のとおり価格だけ。

標準テンプレートのProductAdで表示したもの。オレンジ線の枠はテンプレートには含まれない。シンプルだが商品画像も表示される。

標準テンプレートのProductCarouselで表示したもの。オレンジ線の枠はテンプレートには含まれない。Productfrom Amazon.co.jpという表示のある部分がヘッダ。このテンプレートでは前述のとおりスライド表示で商品を切り替え表示できるみたい。最近はAMPを意識せざるを得ないのでJavascriptでのスライドとか興味が無く試していない。

標準テンプレートのProductGridで表示したもの。オレンジ線の枠はテンプレートには含まれない。グリッドというだけあって、複数の商品を選択して登録すると上の画像のように複数の商品が並んで表示される。更に増やせば2x2など横だけでなく縦にも並ぶ。

標準テンプレートのProductLinkで表示したが、WordPressの新しい標準テーマのTwenty Nineteenでは何も表示されなかった。Chromeブラウザのデベロッパツールで広告のある筈の部分が上の画像。肌色ともオレンジ色ともいえない塗りつぶし部分は広告が表示される筈のエリアのマージン部分みたい。実際の広告エリアはその塗りつぶし部分の中央を左右に1本見えるオレンジの線。エリアなので矩形であるべきところだが直線になっているということは上下に押し潰れている？

テンプレートの書き方

基本はHTMLとCSSなので最低限のことが解ってたら誰でも手を入れられる。Amazon Associates Link Builderではそこに専用の口髭タグ？変数？を埋めておくことでそこに記事中で指定したAmazon商品の情報が入って表示されるようになる。

• {{Title}} アマゾンの商品のタイトルが入る。
• {{DetailPageURL}} アマゾンの商品ページのURLが入る。
• {{ASIN}} アマゾン商品番号(ASIN)が入る。
• {{CurrentPrice}} 商品の現在価格が入る。通貨単位が付く。
• {{CurrentPriceValue}} 商品の現在価格が入る。数字だけ。
• {{StrikePrice}} 割引き前の価格(参考価格？)が入る。通貨単位が付く。
• {{StrikePriceValue}} 割引き前の価格(参考価格？)が入る。数字だけ。
• {{By}} 作者、アーティスト、メーカー名やブランドが入る。
• {{Merchant}} 販売者(Amazonかマーケットプレイスの販売者)が入る。
• {{InStock}} 在庫の有無が入る。
• {{LargeImageURL}} 大きな商品画像が入る。
• {{MediumImageURL}} 中サイズの商品画像が入る。
• {{SmallImageURL}} 小さな商品画像が入る。
• {{Prime}} プライムである場合にプライムであることを表示する。

上は基本的な商品情報タグだけ。詳しくはユーザーガイドを参照。
割引前価格や値下げ額など、その値が存在しない場合は基本的に空白になる。
また、タグによる簡素な条件分岐が可能で、商品が存在する場合だけ表示、在庫がある場合だけ表示などの表示分けもできる。なお、{{InStock}}はYes, True, No, Falseのような値が返ってくるだけのようなので在庫残り幾つとかは無理？

 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

{{#Items}}
    {{#Item}}
        {{#aalb}} 

            商品を表示するためのHTMLタグと口髭タグを書く

            {{#SavingPercent}}
                割引がある場合だけ表示するHTMLタグと口髭タグを書く
            {{/SavingPercent}}

            商品を表示するためのHTMLタグと口髭タグを書く

            {{#StrikePrice}}
                割引前価格(参考価格)がある場合だけ表示するHTMLタグと口髭タグを書く
            {{/StrikePrice}}

            商品を表示するためのHTMLタグと口髭タグを書く

            {{#Prime}}
                プライム商品の場合だけ表示するHTMLタグと口髭タグを書く
            {{/Prime}}

            商品を表示するためのHTMLタグと口髭タグを書く

        {{/aalb}}
    {{/Item}}
{{/Items}}

{{#Items}}{{#Item}}{{#aalb}} ・・・ {{/aalb}}{{/Item}}{{/Items}}の部分はほぼ無条件で書けば良いかと思われる。
購入できない商品の広告を表示するのは無駄なので例えば在庫切れなら表示させないということであれば(下)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{{#Items}}
    {{#Item}}
        {{#aalb}} 
             {{#InStock}}

                 在庫がある場合だけ表示するHTMLタグと口髭タグを書く

             {{/InStock}}
        {{/aalb}}
    {{/Item}}
{{/Items}}

CSSについては、AMPプラグインのClassicモードでは読み込まれないためAMPページではデザインが崩れることになる。CSSの内容を(丸ごとコピーして)AMPプラグインのstyle.phpに追記することで問題は回避されるが、AMPページではCSSの!importantは使ってはいけないのでstyle.phpに混入させないよう注意。なお、AMPプラグインディレクトリ下のtemplates内にあるstyle.phpを直接編集してはいけない。(プラグイン更新時に変更が失われるので)。使用中テーマのディレクトリ内にampというディレクトリを作成してその下にwp-content/plugins/amp/templates/style.phpからコピーしてそのファイルを編集する。

記事への広告埋め込み

add_filter('use_block_editor_for_post', '__return_false');

add_filter('user_can_richedit', '__return_false');

↑はリッチエディタを無効にするフィルタ。これはWordPressのユーザーの「プロフィール」画面で「ビジュアルリッチエディタを使用しない」のチェックを付けるのと同じ効果。(チェックするのと効果が同じだが、それによってチェックが付くわけではないので注意。チェックしてないのにリッチエディタが使えないと悩むことになることもある。)

直前に書いたようにAssociates Link Builderを使うならリッチエディタを有効化しないと記事への商品埋め込みが機能しないので、「ビジュアルエディタを使用しない」にチェックしている場合は外す。

リッチエディタを有効化しなくてはAmazon商品検索が機能しないが、ビジュアルモードを使わなくてはならないということではない。テキストモード(コード入力)でも正常に機能する。
広告を入力したいところにカーソルを合わせてからテキストボックス上部にあるAmazon検索窓にキーワードやASINを入力して[Search]ボタンを押す。

検索結果が表示されるので広告として表示したい商品があればクリックする。グリッドやスライドなど複数の商品を表示できるテンプレートでは複数商品をクリックできる。クリックした商品は下側のボックスに表示される。
[Add Shortcode]ボタンを押せば記事中に広告用ショートコードが記入される。

Amazon Associates Link Builderプラグインを使用するとWordPress用データベースにはwp_aalb_asin_responseというテーブルが作成されそこにキャッシュ的な商品情報データが蓄積される。商品情報1件あたりのデータが意外と大きい。商品に関する情報でAmazonから入手できるもの全てを取り込んでるみたい。このデータが使われると広告の表示はアマゾンへの問い合わせ無しに高速に行えるという利点はあるかもしれないが、広告の商品の価格が変わったとか在庫の有無などの情報が変わったときのデータ更新はどうなるのかしら？特に広告商品が増えた場合。AmazonJSはキャッシュの削除をボタン1つでできるのでその点は負けてるかも。