AMPでAmazonJSプラグインを使えるようにした | WordPress




AMP で AmazonJS を使う

Amazonアソシエイト(アフィリエイト)の商品紹介を、WordPressで生成したブログ上に、キレイに貼り付けてくれる便利なプラグインに AmazonJS があり、有名だ。

一方、スマートフォン等の携帯端末向けに、高速なウェブブラウジングを実現する手段として、Google社も推奨するAMP(Accelerated Mobile Pages Project)という枠組みがある。

AMP に対応させると、Googleの検索結果に引っかかりやすくなり、また、高速なブラウジングが可能となるため、閲覧者はストレス無くページを閲覧することが可能となる。
(その結果、PV数が増えるということで、対応するブログも多くなってきた。)

ただ、AmazonJS は Javascript で動作するのだが、AMP は限定した Javascript のみに対応しており、AmazonJS は動作しない。

ただ、AmazonJS の Javascript は、Amazonから API を介して必要な商品情報を取得する仕組みになっているが、この処理を、php に書いてあげることで、正常に動作させることが可能となる。

こちら↓の方が、「AMP」というプラグインでAMP化を実現した際に、AmazonJS を使用する例を記載してくださっている。

AMPでAmazonアフィリエイト(アソシエイト)に本格的に対応した話(WordPress AmazonJSを使う)

今回は、これを真似て、Simplicity2 でAMP化を実現した際に、AmazonJS を使用することとする。

Simplicity2 でAMP化し、AmazonJS を利用

SimplicityというWordPressテーマは、Simplicity 2.3.1 から AMP に対応している。

Simplicity 2.3.1 以降が、WordPress にインストールされている前提で進める。

wp-content/themes/simplicity2/lib/amp.php というファイルを編集する。

まず、万が一の場合を想定し、バックアップをとっておく。

標準では、AmazonJS 関連のエントリーがあった場合は、URLをhttpsに変換する等の処理が入っているが、一部重複するため、Amazonアソシエイト関連の処理は、コメントアウトする。

Amazonから商品リンクを引っ張ってくるためのライブラリをダウンロードし、

wp-content/themes/simplicity2/lib/amp.php

と同じディレクトリに格納する。

ダウンロード先 → github: AmazonWordpressApi

次に、いよいよ、AmzonJS の Javascript を書き換えるための phpコードを書く。

先程、Amazonアソシエイト関連の処理をコメントアウトした直後の、83行目辺りに、以下のように記載する。

amp.phpの末尾に以下を追記する。

あとは、Simplicity2 の設定から、AMPを有効化すればOKだ。

WordPressの通常のブログ投稿画面からAmazonJS で Amazonアソシエイトのリンクを貼れば、AMPでもキレイに表示されるはずだ。




シェアする

  • このエントリーをはてなブックマークに追加

フォローする