素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

投稿日: 2018年12月16日
最終更新日:

【AMP For WordPress】AMPページにAmazonJSのリンクの画像や商品情報が表示されない場合の原因と対処方法【デザイン調整】

YouTubeも見てね♪

ねこじゃすり

created by Rinker
PEPPY(ペピイ)
¥3,850 (2023/06/29 16:02:15時点 Amazon調べ-詳細)

猫を魅了する魔法の装備品!

Anker PowerCor

created by Rinker
Anker
¥4,990 (2023/06/29 16:02:15時点 Amazon調べ-詳細)

旅行には必須の大容量モバイルバッテリー!

ペヤング ソースやきそば 120g×18個

created by Rinker
ペヤング
¥2,928 (2023/06/29 16:02:23時点 Amazon調べ-詳細)

とりあえず保存食として買っておけば間違いなし!

レッドブル エナジードリンク 250ml×24本

created by Rinker
Red Bull(レッドブル)
¥4,280 (2023/06/29 16:02:19時点 Amazon調べ-詳細)

翼を授けよう!

Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK

created by Rinker
Bauhutte(バウヒュッテ)
¥14,935 (2023/06/29 16:02:26時点 Amazon調べ-詳細)

メインデスクの横に置くのにぴったりなおしゃれな可動式ラック!

BANDAI SPIRITS ULTIMAGEAR 遊戯王 千年パズル 1/1スケール

created by Rinker
BANDAI SPIRITS(バンダイ スピリッツ)
¥9,280 (2023/06/29 16:02:21時点 Amazon調べ-詳細)

もう一人の僕を呼び覚ませ!!

サンディスク microSD 128GB

スマホからSwitchまで使える大容量MicroSDカード!

Amazonの商品リンクが見にくい。。。

果てしなきAMP対応

連日のAMP関連の記事となります。

前回まではGoogleAnalyticsとGoogleAdsenseのAMP対応をご紹介しました。

そして、今回はAmazonの商品リンクに対するカスタマイズをご紹介致します。

何が問題か

AMPページのAmazon商品をみると、一応テキストリンクは挿入されているのでクリックされなくなる、と言う懸念はありません。

が、何より分かりにくい。。。orz

本来の見た目と比較すれば一目瞭然ですよね。

AMPはJavaScriptを使えない

原因はAmazonJSが商品カードを描写する際にJavaScriptで読み込むのですが、AMPでは基本的にはJavaScriptは使えません。
なので結果として表示されなくなっているようです。

しかし、ユーザー側からすると商品画像や最低限のテキスト情報は欲しいところですよね。

なので、今回はそちらの対応を入れてみようと思います。

手順

AMP用ファイル関連

今回はこちらの記事を参考にさせていただきました。
ありがとうございます!!

AMPでAmazonアフィリエイト(アソシエイト)に本格的に対応した話(Wordpress AmazonJSを使う) | なみさ日記 

※一部、そのままでは動かない部分があったのでカスタマイズしています。

amp/aws_api.phpの作成

まずは、テーマディレクトリ内にampディレクトリを追加し、その中にaws_api.phpと言うファイルを作成します。
そして、そのファイルにはこちらの内容をコピペしましょう。

amp/single.phpの作成

次に、AMPのテンプレートファイルを作成します。
今回はsingle.phpを追加してそちらに手を入れる形になります。

まずは、以下のデフォルトのテンプレート内容をコピペしましょう。

AMPのテンプレートファイル?

AMPプラグインはとてもカスタマイズ性が高く作られており、テーマディレクトリのampフォルダ内に、プラグインに対応しているファイルを配置するだけでそちらを利用してAMPページを生成してくれます。

また、存在しない場合はplugin側で用意しているデフォルトのテンプレートを利用するので、すべて用意しなくても良いです。
この辺についてはまた別の記事にてご紹介致します。

amp/single.phpの修正

では、カスタマイズ用のファイルを追加したので実際にAmazonJS対応を入れていきましょう。

28行目あたりの<?php echo $this->get( 'post_amp_content' ); // WPCS: XSS ok. Handled in AMP_Content::transform(). ?>の部分を以下のように修正してください。

そして、上記で使う関数も同じファイル内の最後に定義しましょう。

style周りの整理

次に、ampフォルダにstyle.phpstyle.cssの2ファイルを作成してください。

既存のamazonjsのCSSをそのまま使いまわしたいので読み込んでいます。また、CSSファイル量に50KBの上限があるため簡単なminifyも行っています。
{サイトドメイン}は適時サイトドメインに変更してください

AmazonJSのプラグイン修正

次に、AmazonJSのプラグインを修正します。
ただ、pluginの修正は動かなくなる可能性があるので、必ずバックアップをした上で自己責任でお願いします。

amazonjs.php473行目あたりを以下のように修正してください。
※amazonJSのバージョンによって行数が異なります

やったことは、<div class="amazon_item_{$asin} amazon_item_wrap">で囲むようにしました。

amazon_item_{$asin}によって、AMP対応のHTMLを差し込む場所を特定し、amazon_item_wrapによって、残ってしまうテキストリンクを消すためのCSSを当てるようにしています。

確認

これで準備は完了です。
AMPページにアクセスしてみましょう。

無事にAmazonの商品リンクがいい感じに出るようになりましたね♪

課題

今回は、取り急ぎなんとかしたかったので参考にしてもらった方法を軸に対応を行いましたが、導入しているAmazonJSのプラグインを呼び出せば、aws_api.php不要になりそうな気はしているので、暇なときに改修してみようかなと思います♪

参考

WordPress AMP対応 モダンWeb制作 レッスンブック

終わりに

以上のようにちょっと大変な修正ですが、AMPページでも通常のページと同様なAmazonリンクが追加されるようになりました。

クリックしてもらうためには、クリックしたくなるような工夫は必要不可欠なので、お手すきで対策してみてはいかがでしょうか♪

CATEGORIES & TAGS

副業