WordPressをAMPに対応させる方法とそのカスタマイズ

  1. 公開日:2016/12/09
  2. 更新日:
  3. WordPress
  4. 0
3
SHARES
B!

2016年2月から導入されたGoogle検索結果に適用されるAMP(Accelerated Mobile Pages)プロジェクト。スマートフォンなどのモバイルデバイスにおける検索結果表示を高速化するためのプロジェクトです。しかし、このプロジェクト開始当初は柔軟なカスタマイズが不可能であり、逆にユーザビリティの低下に繋がる可能性があるように感じられたため、弊サイトでの導入は見送ってきました。徐々にプロジェクトが成熟し始め、ある程度のカスタマイズも出来るようになったため、弊サイトでもAMPを遂に導入しました。

今回は、弊サイトでAMPを導入したその方法と、Google AnalyticsやGoogle Adsenseの導入、Font AwesomeなどのWebフォントの導入、カスタマイズCSSの構築方法についてご紹介します。WordPressの場合、WordPressの開発元であるAutomattic社が 開発するプラグインを導入するだけなので、AMP対応するだけならとても簡単です。リソースをかけることなく対応することができますよ。

WordPressをAMPに対応しカスタマイズする

WordPressをAMPに対応させるだけなら非常に簡単です。WordPressの開発元であるAutomattic社が提供する「AMP」プラグインを導入するだけだからです。ただし、そのままではGoogle AnalyticsやGoogle Adsenseを使用することはできませんので、ある程度のカスタマイズが必要です。

AMPプラグインのインストール

まずは、WordPressのダッシュボードにログインし、Automattic社の「AMP」プラグインをインストール、有効化します。

プラグインを有効化するだけでAMPへの対応は完了です。URLの末尾にampを付与してアクセスします。以下に例を示します。

http://macbook-pro:8080/iphone-gmail-client-utlimate-guide-5302/amp/

ただし、プラグイン有効化直後の状態では何もカスタマイズされていないため、WordPressで構築されたすべてのWebページについて、まったく同じスタイルが適用されたページが表示されることになります。

例えば、本文は明朝体で統一されています。

tableタグに対するスタイルは何も適用されていないため、スマートフォンでは視認性に欠けます。

iTunesのアフィリエイトリンクについても、スタイルが何も適用されていないため、かろうじてリンクであることはわかりますが、非常に読みづらいです。

AMPのカスタマイズ

では、AMPの表示をカスタマイズしていきましょう。カスタマイズ方法は、「AMP」プラグインの開発元であるAutomattic社のGitHubに公開されています。

https://github.com/Automattic/amp-wp

「AMP」プラグインに同梱されているテンプレートを上書きすると、プラグインアップデートの都度、テンプレートを書き直さなくてはなりません。そのため、記事ページのテンプレートをコピーしておきます。「AMP」プラグインインストールディレクトリ配下のsingle.phpをコピーします。

<WordPress Install Directory>/wp-content/plugins/amp/templates/single.php
<WordPress Install Directory>/wp-content/themes/<Your Theme>/include/amp/single.php

続いて、functions.phpの最後に以下を追記します。single.phpのパスは、環境に応じて適宜変更してください。今回は、上記のパスにコピーされていることを前提としています。

続いて、AMPに適用するカスタマイズCSSを作成します。AMPでは外部スタイルシートやスクリプトを読み込むことができません。すべてインラインで記述する必要がありますが、スタイルシートの記述方法にも作法があります。「AMP」プラグインを使用する場合は、functions.phpの末尾に以下を追記します。以下の関数の中に、カスタマイズしたいCSSをそのまま追記してください。

例えば、BootstrapなどのCSSフレームワークを使用している場合、AMP表示に必要なCSSのみを抽出します。と言っても、どの部分を抽出すれば良いのか、すぐには分かりませんよね。必要なCSSのみを抽出するためには、Google Chromeのデベロッパーコンソールが便利です。

例えば、Google Chromeの場合、オリジナルのWebページを開いて、CSSを抽出したい要素を選択して、右クリックし「検証」をクリックします。

すると、デベロッパーコンソールが起動します。「Elements」タブに、現在選択している要素と、その要素に適用されているスタイルが右側に表示されます。ここに表示されているスタイルをそのままコピーして使用することができます。冗長なスタイルシートはすべて省いてしまいましょう。Webクリエイターは要チェック!CSS作業をバツグンに効率化してくれる無料のツール&アプリ17選|SeleQt【セレキュト】で紹介されているCSSのツールを使用すると、より効率的に使用するスタイルを抽出できるかもしれませんね。

Font Awesomeを使用する

弊サイトでは、Font AwesomeによるWebフォントを使用しています。通常は、CDN(コンテンツ・デリバリー・ネットワーク)で配信されているCSSファイルを読み込むだけなのですが、AMPでは外部スタイルシートを読み込むことができません。そこで、前述のカスタマイズCSSに追加する必要があります。

http://fontawesome.io/

まずは、上記リンクからFont Awesomeの本体をダウンロードします。本体の中の「Fonts」フォルダを開いて、以下のファイルのみWordPressのテーマフォルダにコピーしておきます。今回は、以下のフォルダにコピーしました。

<WordPress Install Directory>/wp-content/themes/<Your Theme>/include/fonts/fontawesome-webfont.eot
<WordPress Install Directory>/wp-content/themes/<Your Theme>/include/fonts/fontawesome-webfont.svg
<WordPress Install Directory>/wp-content/themes/<Your Theme>/include/fonts/fontawesome-webfont.ttf
<WordPress Install Directory>/wp-content/themes/<Your Theme>/include/fonts/fontawesome-webfont.woff
<WordPress Install Directory>/wp-content/themes/<Your Theme>/include/fonts/fontawesome-webfont.woff2
<WordPress Install Directory>/wp-content/themes/<Your Theme>/include/fonts/FontAwesome.otf

続いて、以下のコードを先ほどのカスタマイズCSSに追記します。

fa-twittercontentプロパティに設定しているUnicodeは、Font AwesomeのWebページで確認することができます。

例えば、TwitterのアイコンのUnicodeは、上記の画像の通り、f099であることがわかります。

Google Analytics

続いて、AMPページにGoogle Analyticsを導入します。以下のコードをfunctions.phpの末尾に追記します。

accountに設定するトラッキングIDは、Google Analyticsにログインして確認します。ログイン後、「管理」→「プロパティ」→「プロパティ設定」から「トラッキングID」を確認することができます。

Google Adsense

最後にGoogle Adsenseを導入します。Google Adsenseは、「AMP」プラグインで標準で対応していないため、手動で設定する必要があります。コピーしたテンプレートファイル(single.php)の<head>に以下のコードを追記します。

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

続いて、以下のAMPのGoogle Adsense専用タグを、コピーしたテンプレートファイルに追記します。設置するGoogle AdsenseのGoogleが推奨する広告枠には2種類あります。それは、「スクロールせずに見える範囲」と「スクロールしなければ見えない位置」の2種類です。

「スクロールせずに見える範囲」とは、例えばページのヘッダー箇所に表示する広告です。スマートフォンで表示した際に、ユーザーがスクロールすることなく見える範囲に表示される広告を表示したい場合には、以下を追記します。

<amp-ad
  layout="fixed-height"
  height=100
  type="adsense"
  data-ad-client="ca-pub-xxxx"
  data-ad-slot="yyyy">
</amp-ad>

「スクロールしなければ見えない位置」とは、例えば記事の末尾に表示される広告です。ユーザーが記事を読み終えた後に表示したい広告がある場合には、表示したい位置に以下を追記します。

<amp-ad
  layout="responsive"
  width=300
  height=250
  type="adsense"
  data-ad-client="ca-pub-xxxx"
  data-ad-slot="zzzz">
</amp-ad>

data-ad-clientdata-ad-slotに設定する値は、Google Adsenseで確認します。

Google Adsenseにログインしたら「広告の設定」をクリックします。

設置したい広告の「コードを取得」をクリックします。AMPに表示する広告のサイズは「レスポンシブ」である必要があります。これについては後述します。

表示されるコードの中から、data-ad-clientdata-ad-slotの値を取得します。data-ad-clientの値はすべての広告で共通です。

広告サイズは「レスポンシブ」である必要があると述べましたが、広告ユニットを作成する際に、広告サイズを「レスポンシブ」としてください。作成済みの広告ユニットが「レスポンシブ」であるかどうかを確認するためには、広告ユニットのタイトルをクリックします。

表示を確認する

ここまでカスタマイズしたところで、実際の表示を確認してみます。通常のURLの末尾にampを付与します。

http://macbook-pro:8080/iphone-gmail-client-utlimate-guide-5302/amp/

PCやスマートフォンのブラウザから上記のURLにアクセスします。

Google Adsenseが表示されました。また、各種ソーシャルボタンが表示されていることがわかります。このソーシャルボタンで使用しているWebフォントにはFont Awesomeを使用しています。

何処と無くぎこちなかった本文のフォントについては、すべてゴシック系で統一されました。

また、テーブルも表示サイズに応じてスクロールするレスポンシブな表示に切り替わりました。

iTunesのアフィリエイトリンクについても、スタイルシートが適用され表示がわかりやすくなりました。

Google Chromeのデベロッパーコンソールで確認する

最後に、GoogleがAMPページをキャッシュするためには、AMPのフォーマットが正常であることを確認する必要があります。ここでエラーが表示された場合、GoogleはAMPページをキャッシュすることができず検索結果にも表示されません。

Google Chromeを開き、AMPページのURL(つまり、末尾にampを付与したページ)の末尾に#development=1を付与して開きます。

http://macbook-pro:8080/iphone-gmail-client-utlimate-guide-5302/amp/#development=1

例えば、上記のような感じです。

Google Chromeのデベロッパーコンソールを開き、「AMP validation successful」と表示されていることを確認してください。Safariでは確認できません。必ずGoogle Chromeで確認してください。

まとめ

以上、駆け足でWordPressをAMP対応させる方法と、そのカスタマイズについて簡単にご紹介しました。今後のプラグインのアップデート等で状況が変わる可能性もあるため、その際は、追ってご紹介したいと思います。AMPに関するご質問、ご指摘等ありましたら、@ottanxyzやコメント欄で受け付けています。

この記事が気に入ったらいいねしよう!
こちらの記事も読まれています
ご意見ボード
匿名で管理人に送信されます。※送信専用です。返信はできません。
ご指摘・ご意見
Top