スポンサーリンク

【AMP】Search RegexでAmazonJSからCocoonのリンクに変更する方法

AmazonJSのリンクを変更 ブログ運営

どうもスルメ坊主です。

このブログではAmazonのリンク作成に『AmazonJS』という、とっても便利なプラグインを利用してきました。

簡単にAmazonアソシエイトのリンク作成ができる上、カスタマイズをすると楽天のリンクも貼ることができます。

とても満足していたのですが、私の技術ではAMP対応ができない

最近グーグルの検索結果を見るとAMPのサイトがとても増えたと思います。

AmazonJSという便利なプラグインがボトルネックとなり対応できずにいたのですが、このブログで使っている最強の無料テーマのCocoonのAmazonアソシエイトのリンク作成機能が凄かったんです。

簡単に美しいリンクが作成できるだけでなく、標準でAMPに対応してるというではないですか。

「これはリンクの変更待ったなし」というところなんですが、300記事を超えるすべてのリンクを修正するのは億劫。

しかし、Search Regexという文章を置換できるプラグインを利用することで、一瞬でAmazonJSのリンクをCocoonのリンクに変更することが出来たので紹介させていただきます。

スポンサーリンク

AmazonJSのリンクをCocoonのリンクに変更する方法

プラグインの準備をする

まずは作業の前にバックアップを取りましょう。

スルメ坊主
スルメ坊主

俺は面倒でバックアップせず実行したけどね。

バックアップはというBackWPupというプラグインが人気のようです。

使い方はこちらの記事が参考になります。

参考BackWPUpの使い方と設定方法|WordPressのバックアップに

バックアップが出来たら文字を置換してくれるプラグイン「Search Regex」をインストールしましょう。

このプラグインは常時SSL化の際にお世話になった人も多いのではないでしょうか。

Search Regexの使い方はこちらの記事を参考にしてください。

参考Search Regexプラグインの使い方

Cocoonの設定をする

プラグインの準備ができたら次にCocoonの設定を行います。

設定方法はこちらの本家の記事を見れば簡単にできました。

公式Amazon商品リンクの初期設定方法と使い方

ショートコードを置換する

AmazonJSとCocoonのショートコードを見比べてみると非常に似ていることがわかります。

・AmazonJSのショートコード

[amazonjs asin="B0792PG3S9" locale="JP" title="Echo Dot (エコードット) 第3世代 (Newモデル) - スマートスピーカー with Alexa、チャコール"]

・Cocoonのショートコード

[amazon asin="B0792PG3S9" kw="Echo Dot (エコードット) 第3世代 (Newモデル) - スマートスピーカー with Alexa、チャコール"]

これを見てみると下記2点の置換を実行すれば、一瞬で変更完了しそうです。

  1. 「amazonjs asin」→「amazon asin」
  2. 「locale=”JP” title」→「kw」

amazonjsだけやtitleだけでは、関係ない部分も置換されてしまう可能性があるので上記設定がおすすめ。

Search_Regex_1

まずは、「amazonjs asin」を「amazon asin」に置換します。

Search_Regex_2

次に「locale=”JP” title」を「kw」に置換します。

たったこれだけ。

超簡単にAmazonJSのリンクをCocoonの商品紹介リンクに変更することが出来ます。

画像データはどうか?

今回この置換をするにあたり気になったのが、AmazonJSで生成した画像だけのデータです。

下記記事で使われているような商品の画像です。

高級中華ウクレレ| Enya (エンヤ)のラインナップを紹介
アロハー。スルメ坊主です。 数多くの中華ウクレレと呼ばれるウクレレがAmazonで販売されています。 今回は、品質が高いと好評の Enya (エンヤ)のウクレレのラインナップを紹介したいと思います。 Enya (エンヤ)のウクレレは中...

画像のリンクを調べてみると全く関係ないことがわかりました。

めっちゃ長いんですが、一度もAmazonJSという文字は出現しません。

試しにAmazonJSのプラグインを停止してみても問題ありませんでした。

AmazonJSで作成した画像データは気にする必要がないようです。

AMPの有効化と注意点

せっかくAmazonJSからCocconのリンクに変更してAMP対応することが出来たので早速変更してみました。

AMPの対応は、「Cocoon設定」のAMPを有効にするをチェックすれば完了です。

AMP有効化

今回AMP対応するにあたって気を付けたほうがいいと思ったのは下記2点。

  1. CSSの追記
  2. 関連コンテンツ広告の再設定

見出しの装飾などの設定をAMPでも反映させるにはスタイルシートに書いてある内容を、再度AMP用のCSSを書いてあげる必要があります。

amp_css

もとからスタイルシートに入っている内容をamp.cssにコピペすればOKです。

また、AMP対応すると今まで表示されていたアドセンスの関連コンテンツ広告がAMPページで表示されなくなってしまいました。

対応方法は簡単。

AMP用の広告設定をしてあげることで解決します。

参考にしたのはこの記事です。

参考Cocoonで『関連コンテンツ』をAMP化ページに対応させる方法

簡単にできるのでぜひ設定しておきましょう。

まとめ

インコ

以上、AmazonJSのリンクをSearch Regexというプラグインを使って簡単にAMPに対応しているCocoonのリンクに変更する方法を紹介させていただきました。

1記事ずつ書き換えるのが億劫で対応出来ていなかった人も、この方法であれば一瞬で完了です。

さらにこの機会に近年成長が著しいヤフーショッピングのリンクも簡単に追加することが出来ました。

AmazonJSをつかっていてAMP対応をしたい人は是非この方法を試してみてはいかがでしょうか。

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
ブログ運営
スポンサーリンク
オススメの記事



イエノナカノヒト

コメント