CocoonのウィジェットでAMP用・通常用のコード出力を分ける設定方法

WordPressテーマ「Cocoon」では、モバイルページを高速表示させるための仕組み「AMP(Accelerated Mobile Pages)」に、簡単に対応できるようになっています。

そのAMPでは、通常のHTMLとは異なるタグが使われる場合があります。例えば画像を表示するためのタグ「<img>」は、AMPの場合は「<amp-img>」を使う、という具合です。

CocoonでAMP機能を有効化した場合は、通常のHTMLがAMPページでも問題なく表示できるよう、Cocoon側で自動的に調整をしてくれます（素晴らしい！）。

ですが、外部サービスで提供されているコードを利用する場合、例えばアフィリエイト用の広告タグなどにおいてscriptタグなどを使っている時は、その限りではありません。

本記事ではWordPressのウィジェットを利用して、通常のコードとAMP用のコードを切り替える設定方法をご紹介します。

CocoonでAMP機能の有効化

WordPressテーマCocoonでAMP機能を有効化します。

WordPress管理画面の「Cocoon設定」から「AMP」タブをクリック。「AMP設定」から「AMP機能を有効化する」にチェックを入れ、設定を保存します。

これだけ。超簡単です。その他、「AMPロゴ」や「AMP除外カテゴリー」が設定できます。

「管理者パネルの表示」を有効にしている場合は、ブログの各ページ下部に表示されるツールバーから、AMPページを確認することができます。

または、ブログ記事のURLの後ろに「?amp=1」をつけることでも、AMPページの確認ができます。

いよいよ本題。ブログ記事の通常ページとAMPページで、表示内容を変更します。本記事ではウィジェットで表示内容を切り替える方法をご紹介します。

例として、バリューコマースの画像広告タグをウィジェットに設定する、とします。

バリューコマースでは、画像広告で「広告タグ」と「AMP広告タグ」の2種類が用意されています。

通常の広告タグはJavascriptを用い、

<script language="javascript" （中略）></noscript>

のようなコード（ソース）を利用します。

一方AMP広告タグは、

<amp-ad （中略）></amp-ad>

のように、AMP用のタグ「<amp-ad>」を利用しています。

これらのどちらか一方のみの利用では、

といった状況になります。

これを避けるために、通常ページには広告タグを表示し、AMPページにはAMP用広告タグを表示する、という設定を行う必要があります。

では具体的な設定方法です。今回は「投稿本文下」にウィジェットを設定してみます。

投稿本文下に2つ、テキストウィジェットを配置します。上を通常ページ用、下をAMPページ用とします。

例では通常ページ用がモバイル用になっていますが、カスタムHTMLや他のウィジェットでも構いません。

まずは通常ページ用の設定から。上のテキストウィジェットのテキストに広告タグを入れ、テキストの下にある「表示設定」を開きます。

するとこのような画面が開くので、「ウィジェットの表示」を「チェック・入力したページで非表示」にあわせ、「ページ」タブから「AMPページ」にチェックを入れ、保存します。

これでscriptタグを使った広告タグは、AMPページでは表示されなくなりました。

次に、AMPページで表示するウィジェットを設定します。下の方の「テキスト（モバイル用）」ウィジェットを開きます。なおモバイル用を選んでいるのは、AMPがモバイル環境表示用だからです。

同様に表示設定を開き、「ウィジェットの表示」を「チェック・入力したページで表示」に合わせます。さらにタブ「ページ」から「AMPページ」だけにチェックを入れて保存。

以上の設定で、AMPページ以外は通常のコードが、AMPページではAMPページ用のコードが出力されるようになります。念のため、それぞれの表示を確認しておきましょう。

以上、CocoonのウィジェットでAMP用・通常用のコード出力を分ける設定方法、でした。

ウィジェットの表示切り分け設定を利用することで、プラグインやPHPの変更を行わなくても、AMP用の出力と通常ページ用の出力を切り分けることができます。Cocoon便利。

本ブログはレンタルサーバー「エックスサーバー」にて稼働中です。