WordPress + Simplicity2:AmazonJSプラグインで起きた2つの不具合・対策

シェアする

30c6019e3a85d4aae6e1b72d6b0ba2aa - Wordpress + Simplicity2:AmazonJSプラグインで起きた2つの不具合・対策

WordPress + Simplicity2:AmazonJSプラグインで起きた不具合対策

kengenius.comは、Wordpressと無料テンプレートSimplicity2を自分で少しカスタマイズして使っています。

そして、ブログ内でAmazonの商品を紹介することがあれば、その時にはAmazonJSというプラグインでリンクを作成していました。

とある日、そこに不具合を発見!

不具合

  1. AmazonJSで貼ったアフィリエイトリンク以降の文章が表示されない
  2. ページの中間あたり以降から画像が表示されない

事象1

AmazonJSで貼ったアフィリエイトリンク以降の文章が表示されない

どういうことかというと、自分のバイクに追加で装備したオプションを教えて欲しい!という問い合わせがあったので、自分の備忘録的に見たところ、起きていました。以下のページです。(現在は復旧しています。)

IMG 2540 100x100 - Wordpress + Simplicity2:AmazonJSプラグインで起きた2つの不具合・対策
Moto Guzzi V7 Ⅲでグリップヒーターを使いたい人は、必見!最低でも、ヘッドライトだけでもLED化して省エネ化しなければ、グリップ...

不具合発生時スクリーンショット

30c6019e3a85d4aae6e1b72d6b0ba2aa 300x294 - Wordpress + Simplicity2:AmazonJSプラグインで起きた2つの不具合・対策

AmazonJSでグリップヒーターの商品リンクを出している箇所以降、まだまだブログは続いているのですが、そこで終了してしまっています。

原因究明

切り分けは簡単でした。

AmazonJSの箇所を削除して、記事を更新してみるとしっかりと表示されます。この間、WordpressをVer.4.9.4にアップグレードしたのですが、Wordpress Ver.4.9.3まではAmazonJSが動作していたことを確認していました。

AmazonJSのGitHubを見たところ、最終リリース0.8、2016年です。

41d6b975f8182f9fda6c1f667adbf9c6 300x171 - Wordpress + Simplicity2:AmazonJSプラグインで起きた2つの不具合・対策

AmazonJSのメインphpファイルであるamazonjs.phpがhttpsに対応していない、もしくはmixed contentsで不具合かな、と思って、https化も試しましたが動きませんでした。と思ったら・・・。

対策発見

そういえば、と考え直してみたら、AmazonJSのリンク作成時、「動的なテンプレート」を使用していたんですよね。

6087d632368d62538142fffcbe7117e6 300x172 - Wordpress + Simplicity2:AmazonJSプラグインで起きた2つの不具合・対策

AMP対応としても動的なコンテンツにしてしまうのはNGなので、どちらにしても直さなければいけないということでした。現在は、単純なHtml画像(中)と、タイトルを使ってシンプルにしています。

2904f472c3f6f6b0581c83ab4927503d 300x116 - Wordpress + Simplicity2:AmazonJSプラグインで起きた2つの不具合・対策 679fca132993efb24c443c3a6000dd43 300x167 - Wordpress + Simplicity2:AmazonJSプラグインで起きた2つの不具合・対策

これで、AMP対策もしっかりOKになりました。

Amazon公式のAmazon Associates Link Builderプラグイン

AmazonJSの代替として、Amazon公式のAmazon Associates Link Builderプラグインの仕様も試してみました。AmazonJSを利用した記事の更新は、ただただ面倒。。

Amazon Associates Link Builderプラグイン

ただし、現行のAmazon Associates Link Builderプラグインは、未だベータ版であり、AMPも未対応であると公式が伝えています。

やはり、AmazonJSしか使えないんですかね・・・。でも、AmazonJSの開発停止も気になるので、Amazonアフィリエイトの以下ページで、しこしこと直接リンクを作ることにしました。

一応、Amazon Associates Link Builderプラグインの使用方法を残しておきます。

Amazon Associates Link Builderプラグイン利用方法

WordPress管理ページ – 新規プラグイン追加から、「Amazon Associates」で検索できます。

d70d4607e0ff9137dee6f40a397d222f 300x153 - Wordpress + Simplicity2:AmazonJSプラグインで起きた2つの不具合・対策

む、レートが低い・・・。やはり、問題やデザインが悪いこと、AMP非対応が大きいですかね・・・。

設定

設定するべき項目は以下の通り。

  1. Tracking Id
  2. Default Template
  3. PA-API Credentials – Access Key ID
  4. PA-API Credentials – Secret Access Key

d95595402124f843291a446835bcd906 300x175 - Wordpress + Simplicity2:AmazonJSプラグインで起きた2つの不具合・対策

1.Tracking Id

Amazonアソシエイトにログインして、右上に表示されるアソシエイトIDを入力します。

28cf8dd6ab63baeeb4bd1cd81977b2f1 300x74 - Wordpress + Simplicity2:AmazonJSプラグインで起きた2つの不具合・対策

2.Default Template

のちほど、テンプレート設定で設定した項目をデフォルトにします。

3.PA-API Credentials – Access Key ID

Amazonアソシエイトにログインし、「メニューバー – ツール – Product Advertising APIを開きます。

4076b2c767aebd5c975848fe8129f953 300x165 - Wordpress + Simplicity2:AmazonJSプラグインで起きた2つの不具合・対策

認証キーを管理する」を開きます。

ee94b55ed6bd0437ec47505241eb8d30 300x275 - Wordpress + Simplicity2:AmazonJSプラグインで起きた2つの不具合・対策

「アクセスキー(アクセスキーIDとシークレットアクセスキー)」を開きます。5a68b3c6d5a69496649f5c05135ae653 300x174 - Wordpress + Simplicity2:AmazonJSプラグインで起きた2つの不具合・対策

PA-API Credentials – Access Key ID」に入れるべきアクセスキーは確認することができます。

ce10ff0132b00d854f513d2f6e578584 300x159 - Wordpress + Simplicity2:AmazonJSプラグインで起きた2つの不具合・対策

ただし、「PA-API Credentials – Secret Access Key」に入れるべき、シークレットアクセスキーは作成時のみしか表示されませんので、忘れた場合には「新しいアクセスキーの作成」からアクセスキーとシークレットアクセスキーのペアを作り直します。

テンプレート設定

初期テンプレートだと、機械的で、フレンドリーでないので、カスタマイズした方が良いかと思います。

ググって出てきた、以下のブログを参考にし、文言を変更しました。

 Amazonアソシエイトのリンクを、プラグイン Amazon Associates Link Builder を利用して出すことにしました。アマゾンアソシエイト公式のWordPress用プラグインです。(執筆時バージョ … "Amazon Associates Link Builder プラグインでアソシエイトリンク...

対応:AmazonJSを利用した記事の更新

あとは、ただひたすら、AmazonJSを使っていた記事のリンクを、Amazon Associates Link Builderでリライト。

これで落ち着いた!

と思ったら・・・。

事象2

ページの中間あたり以降から画像が表示されない

せっかく直り、ブログも全文表示されているのに、画像が表示されない

不具合発生時スクリーンショット

bd4bd790d3fb937140db26b28314a1d9 300x278 - Wordpress + Simplicity2:AmazonJSプラグインで起きた2つの不具合・対策

原因究明

マウスオーバーしてみると、Alterは表示される。

8c54e3d17f9ceab967edd953b63772bd 300x217 - Wordpress + Simplicity2:AmazonJSプラグインで起きた2つの不具合・対策

クリックすると、画像は表示されていて、リンクは切れていない模様。えぇ、キレてないですよ。

c0674d85ae1fb7408d6033d5d45c187f 300x231 - Wordpress + Simplicity2:AmazonJSプラグインで起きた2つの不具合・対策

別名で画像を保存」してみると・・・

96240395b6b2e72f33c0b67532c89896 300x241 - Wordpress + Simplicity2:AmazonJSプラグインで起きた2つの不具合・対策

画像の名前が、「1×1.trans」。

384517fd0f794d6c01bf48a769b5721f 300x194 - Wordpress + Simplicity2:AmazonJSプラグインで起きた2つの不具合・対策

はは〜ん、アレか。

対策:Lazy Loadをオフにする

サーバーの負荷対策とユーザーのデータ量節約のためにと思ってオンにしていましたLazy Load。元々SEO的にも色々手を入れなければ画像がキャシュされなくなってしまうし、テンプレートとの相性もあるので、今回からオフに。

WordPress管理画面メニュー – 外観 – カスタマイズ – 画像」を開き、以下2項目のチェックを外します。

  • Lazy Loadを有効
  • Lazy Loadのエフェクトを有効

ab75d0296fe78cac3d89637360834cff 126x300 - Wordpress + Simplicity2:AmazonJSプラグインで起きた2つの不具合・対策

これで、無事表示されるようになりました。記事数少なくて、対応であまり影響が出なくてよかったのか悪かったのか・・・。

まとめ

結局、AmazonJSに戻したのですが、この労力はなかなか・・・。

不具合が出た時、原因究明が簡単にできるように、かつ、修正の影響範囲が少なくなるように日々まとめておくというのは本当に大変ですよね。ブロガーのみなさま、日々の努力お疲れさまです。この記事が少しでもその労力節約になれば幸いです。