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

副業

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

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

ねこじゃすり

created by Rinker
PEPPY(ペピイ)
¥3,850 (2024/03/15 19:03:46時点 Amazon調べ-詳細)

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

Anker PowerCor

created by Rinker
Anker
¥4,990 (2024/03/15 15:06:44時点 Amazon調べ-詳細)

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

【最新機種】GoPro hero11 Black

created by Rinker
GoPro(ゴープロ)
¥62,000 (2024/03/15 19:06:06時点 Amazon調べ-詳細)

最新機種でVlogの思い出を撮影しよう!

モンスターエナジー 355ml×24本 [エナジードリンク]

created by Rinker
モンスター
¥4,748 (2024/03/15 19:03:48時点 Amazon調べ-詳細)

脳を活性化させるにはこれ!

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

created by Rinker
Bauhutte(バウヒュッテ)
¥13,861 (2024/03/15 15:06:46時点 Amazon調べ-詳細)

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

MOFT X 【新型 ミニマム版】 iPhone対応 スマホスタンド

created by Rinker
MOFT
¥2,880 (2024/03/15 19:06:03時点 Amazon調べ-詳細)

Amazon一番人気のスマホスタンド!カード類も収納出来てかさ張らないのでオススメです!

サンディスク microSD 128GB

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

スポンサーリンク

336×280




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リンクが追加されるようになりました。

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

336×280




336×280




CATEGORIES & TAGS

副業, , , , , , , , , ,

blogenist

Author: blogenist

関連記事

YouTubeも見てね♪

お名前.comサイドバー