「cocoon」の商品リンク機能が便利。AMPページでも表示が崩れません。

はじめに・rinkerは便利なのですが……

WordPressでブログを作成され、収益化を目指しておられる方は、Amazonなどの商品リンクを貼られていると思います。
有名なプラグイン「rinker」を使っておられる方が多いのではないでしょうか？
↓「rinker」で作れるのが、こういう感じの商品リンクです。

「rinker」はとても便利なプラグインですが、AMPページに対応していないという残念なところがあります。
AMPというのはGoogleがモバイル高速化表示を目的に導入を推奨している表示形式です。
スマホで見る際のページ表示が高速化するので、導入するとGoogleの評価が高まり、より多くのアクセスを集めると言われています。
ちなみにテーマ「cocoon」では、簡単にAMP化ができるようになっています。

ですが、「rinker」はAMPに対応していないので、表示が少し崩れてしまうのです。
＜本来の表示＞

＜AMP化した場合の表示＞

大崩れというほどではないのですが、ボタンを押そうという気になるかといえば、そうではないように思います。
本来の表示ができないというのももったいないなと……
そこで、何か代わりになるものがないかと探してみたところ、自分がワードプレスのテーマとして利用している「cocoon」の標準機能で同じようなことができるとわかりました。
以下のような画面です。
「rinker」と似ていますよね？

こちらの作り方について紹介します。

cocoonでの商品リンクの作り方

商品リンクを使う前に必要なものがあります。
Amazonや楽天のアクセスキーやIDです。
取得の仕方は以下のサイトがわかりやすかったので、こちらを見て下さい。

こりゃすごい！Cocoonの商品リンク機能が便利すぎる件

WordPressの無料テーマ「Cocoon」には、商品リンクをかんたんに入れられる「商品リンクのショートコード機能」がついています。記事の作成中に、たとえばこんな感じのコードを入れるとこのような商品リンクがすぐにできてしまいます。このショ

yuzuyu3.com

必要な情報を入力できたら、今度は以下のページを見て下さい。
cocoonの公式ページです。

Amazon商品リンクブックマークレットの使い方

Amazon商品リンクショートコードを手軽に作成するための「Amazonリンク作成ブックマークレット」の登録方法と、使い方の解説です。

wp-cocoon.com

上記ページの真ん中の方に説明がありますが、「Amazonリンク作成」ボタンをブラウザにドラッグ＆ドロップしてください。
ブックマークに登録する方法もありますが、ブラウザのトップ画面にある方が使いやすいです。
すると、こんな感じの画面になるはずです。
※例のブラウザはChromeです。

Amazonからリンクを作る方法

ここまでできれば後は簡単です。
まず、紹介したい商品があれば、Amazonの商品ページを開いてください。
検索した直後の画面ではなく、商品そのもののページまで進んでください。
以下のような画面です。

この画面で、先程ブラウザに作成した「Amazonリンクの作成」ボタンをクリックします。
すると以下のような小さなウインドウが出てきます（※例はChromeの画面です）。

あとはこのショートコードをWordPressのエディタにコピーするだけです。
以下のような表示ができます。

この画面はAMP化されたページで見ても表示が崩れません。

最後に……念のための注意

この商品リンク機能は非常に便利ですが、「rinker」と比べて、できないこともあります。
「rinker」は「Googleアナリティクス」のイベント機能でクリックされた回数が計測されるのですが、こちらは計測されません。
なので、何回クリックされたかがわかりません。
しかし、そこはAmazonのレポートなどでも確認できます。
あと、「rinker」は商品別カテゴリーを作って、商品リンクの整理ができますが、こちらはできません。
登録済みのリンクを引っ張ってくることもできません。
このあたりは好みだと思いますので、使いやすい方を使ってください。