行き着く先はあんこ

WordPressのプラグインを使ってAMP対応するにあたっての備忘録

WordPressのAMP対応

このブログはWordPressを使って管理されているのですが、昨今のGoogleのモバイル表示の猛プッシュとブログデザインのリニューアル意欲の時期が重なったので、このブログをAMPに対応しました。

すでに多くの人がWordPressをAMPに対応する方法をまとめてくれてはいるのですが、自分なりに引っかかった部分もあったので、AMP対応するにあたっての備忘録をまとめておきます。

スポンサーリンク

AMPとは

AMPとは、Accelerated Mobile Pages Projectのことであり、モバイル表示の高速化を目的としています。詳しいことはAMP公式サイトもしくはこのページにて。

AMP対応

WordPressをAMP対応するには大きく分けて2通りの方法があります。1つめはプラグインを使わずに置換や条件分岐でAMPに対応する方法。2つめはAutomattic製プラグイン「AMP」を使う方法です。

前者はプラグインが使えない、使いたくない状況や、出力を完全に制御したい人向けです。後者はお手軽に(お手軽ではなかった)AMP対応したい場合やテンプレートファイルをきれいに見やすくしておきたい人向けです。

自分の場合はサクッとAMP対応したかったのでプラグインを使いAMPの波に乗ることにしました。

下準備

AMPプラグイン

まずは今回使用する「AMP」プラグインについて簡単に説明します。このプラグインは導入するだけでWordPressをAMP化してくれるという非常に素晴らしいプラグインです。AMPページのURLは通常ページURLの後ろに「/amp/」もしくは「/?amp=1」が追加されたものになり、これについてもプラグインが自動で行ってくれます。

ためしにこのページのURLに「/amp/」を付けるとAMPページに移動します。

このようにプラグインを導入するだけでいとも簡単にAMPページを作ることができます。しかし、標準のAMPページはあまりにも殺風景なのでオリジナルデザインにカスタマイズしていきます。

カスタマイズ

「amp」フォルダを作成する

まずは現在使っているテーマディレクトリに「amp」というフォルダを作成します。さらにこの中に以下の4つのテンプレートファイルを作成します。

  1. header.php
  2. single.php
  3. footer.php
  4. style.php

「AMP」プラグインは「amp」フォルダが存在していれば、プラグインのテンプレートではなく「amp」フォルダ内のテンプレートを優先的に認識します。つまり今回作成したファイルが優先的に読み込まれるようになります。

次にこれらのファイルにコードを書いていきます。以下は必要最低限のコードです。一応これだけでも動作しますが、通常のテンプレート同様に編集してオリジナルデザインにしていきます。

header.php

<!DOCTYPE html>
<html ⚡>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<?php do_action( 'amp_post_template_head', $this ); ?>
<style amp-custom>
<?php
 $this->load_parts( array( 'style' ) );
 do_action( 'amp_post_template_css', $this );
?>
</style>
</head>

<body>

single.php

<?php include ( TEMPLATEPATH . '/amp/header.php'); /*「amp」フォルダ内の「header.php」を読み込む */ ?>

<main>
  <article>
    <?php
      echo $this->get( 'post_amp_content' ); //個別投稿の本文を表示する
    ?>
  </article>
</main>

<?php include ( TEMPLATEPATH . '/amp/footer.php'); /*「amp」フォルダー内の「footer.php」を読み込む */ ?>

footer.php

<?php do_action( 'amp_post_template_footer', $this ); ?>

  <footer>
  <p>&copy; <?php echo date( 'Y' ); ?> <?php bloginfo( 'name' ); ?></p>
  </footer>

</body>
</html>

style.php

<?php /* style.cssをコピー */ ?>

style.phpに関しては使用しているstyle.cssを流用すれば幸せになれるかも。

AMPページの条件分岐

テンプレートを編集すると必要になるであろうAMPページを判別するコードです。これは「AMP」プラグインの機能のひとつで、URLのエンドポイントで判別しています。

<?php
$myAmp = false;
if(function_exists('is_amp_endpoint') && is_amp_endpoint()) {
  $myAmp = true; /* ampだとtrue, 非ampだとfalse */
}
?>

上のコードをsingle.phpなどの条件分岐したいテンプレートの上部に追加します。あとは$myAmpを条件としてAMPページの判断が可能になります。

if( $myAmp ) {
  // AMPページの場合
} else {
  // 通常ページの場合
}

これでAMP対応?

ここまでで、編集したオリジナルのテンプレートを読み込ませ、スタイルシートで見た目の調整が終了しました。これにてAMP対応終わり、と思っていたのですが、確認をしていると思い通りに表示できていない部分があったので、その部分を調整していきます。

「AMP」プラグインだけで完全にAMP化するのはまだ早いようです。

禁止要素を削除

AMPではHTML要素の一部が使用禁止になっています。仮に禁止要素が混ざっているとエラーが発生しAMP対応ができません。以下ではAMPで使用が禁止されている要素の代表的なものを削除します。

// いろいろ削除
$content = preg_replace('/<script.+?<\/script>/is', '', $content);
$content = preg_replace('/\s*border=["][^"]*?["]/is', '', $content);
$content = preg_replace('/\s*onclick=["][^"]*?["]/is', '', $content);
$content = preg_replace('/\s*scale=["][^"]*?["]/is', '', $content);
$content = preg_replace('/\s*style=["][^"]*?["]/is', '', $content);
$content = preg_replace('/\s*target=["][^"]*?["]/is', '', $content);

埋め込みSNSのAMP化

「AMP」プラグインはTwitterやYouTubeなどの埋め込み要素もAMP化してくれます。しかし、自分の環境ではTwitterの置換ができておらず、YouTubeに関しては幅が100vw固定?で左右にマージンを取っていたため画面に入り切らないといった問題が発生しました。

これに対処するために、自分でAMP専用タグに置換します。

// Twitterをamp-twitterに置換する(埋め込みコード)
$pattern = '/<blockquote class="twitter-(tweet|video)".*?>.+?<a href="https:\/\/twitter.com\/.*?\/status\/(.*?)">.+?<\/blockquote>/is';
$append = '<p><amp-twitter width=592 height=472 layout="responsive" data-tweetid="$2"></amp-twitter></p>';
$content = preg_replace($pattern, $append, $content);

// YouTubeをamp-youtubeに置換する(埋め込みコード)
$pattern = '/<iframe[^>]+?youtube\.com\/embed\/(.+?)(\?[^>]+?)?"[^<]+?<\/iframe>/i';
$append = '<amp-youtube layout="responsive" data-videoid="$1" width="560" height="315"></amp-youtube>';
$content = preg_replace($pattern, $append, $content);

// ついでにiframeも置換する */
$pattern = '/<iframe/i';
$append = '<amp-iframe layout="responsive"';
$content = preg_replace($pattern, $append, $content);

Twitterの埋め込みは通常の埋め込みと動画の埋め込み?の2種類を確認したので、どちらにも対応できるようにします。YouTubeの置換に関しても全ての埋め込みコードに対応できるはずです。

また、AMPページでTwitterやYouTubeの埋め込みを動作させるには専用のJavaScriptをheader.php内で読み込む必要もあります。

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

ここではTwitterとYouTubeのみ置換しましたが、他にInstagramやFacebookなどの埋め込み要素もAMP内で使うことができます。

画像のAMP化

imgタグも専用のamp-imgタグに置換する必要があります。アスペクト比を保ちながらレスポンシブ表示するためにlayout属性responsiveも指定します。

// width, heightを追加
$pattern = '/<img [^>]*?src="(https?:\/\/[^"]*?\.(jpg|jpeg|png|gif))"/iu';
preg_match_all( $pattern, $content, $imgs);
$count = count($imgs[0]);
for ( $i = 0; $i < $count; $i++ ) {
  $img_url = $imgs[1][$i];
  $img_size = getimagesize($img_url);
  $pattern = $imgs[0][$i];
  $replaced = $pattern . $img_size[3];
  $content = str_replace($pattern, $replaced, $content);
}

//imgをamp-imgに置換
$pattern = '/<img ([^>]+?)\/?>/i';
$append = '<amp-img layout="responsive" $1></amp-img>';
$content = preg_replace($pattern, $append, $content);

基本的にAMPの要素はwidth,hightを指定している必要があり、amp-imgも例外ではありません。

しかしこのブログでは画像のwidth,heightを削除していたため、置換と同時にwidthとheightを指定します。すでにwidth,heightを書いているのであれば上のコードはamp-img置換の部分のみで問題ありません。

また、Picasaなどの画像URLが特殊な場合は以下のようなコードで対応します。問題ないとは思いますが、検索パターン範囲が広いため予期せぬエラーが発生する可能性もあるので動作確認は必須です。

// width, heightを追加 (特殊用)
$pattern = '/<img [^>]*?src="(https?:\/\/[^"]+?)"/iu';
preg_match_all( $pattern, $content, $imgs);
$count = count($imgs[0]);
for ( $i = 0; $i < $count; $i++ ) {
  $img_url = $imgs[1][$i];
  $img_size = getimagesize($img_url);
  $pattern = $imgs[0][$i];
  $replaced = $pattern . $img_size[3];
  $content = str_replace($pattern, $replaced, $content);
}

AMPのメインコンテンツフック

個別記事のメインコンテンツを置換するためのフックです。AMPページでのみ動作します。これまでの置換コードを以下の関数内に追加してfunctions.phpに記入します。

add_action( 'pre_amp_render_post', 'xyz_amp_add_custom_actions' );
function xyz_amp_add_custom_actions() {
  add_filter( 'the_content', 'main_content_for_amp' );
}
function main_content_for_amp ( $content ) {

  // ここに以下紹介する置換コードを記入していく

  return $content;
}

このような感じでメインコンテンツ内の使用禁止タグを削除したり、AMP専用タグに置換したりしていきます。上記のコードのみ追加しても確実にAMP化できるわけではありませんので、適宜コードを追加・修正して各々の環境に合わせてください。

その他

AnalyticsのAMP化

AnalyticsはAMPに対応していますが通常のAnalyticsコードとamp-analyticsのコードは違います。

まずはSNSと同様にhead内で以下のJavaScriptを読み込みます。

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

次に以下のコードをfunctions.phpに追加します。これでAMPページでも統計が取得できるようになりました。トラッキングIDは自分のものに変えることも忘れずに。

// amp Analyst
add_filter( 'amp_post_template_analytics', 'xyz_amp_add_custom_analytics' );
function xyz_amp_add_custom_analytics( $analytics ) {
  if ( ! is_array( $analytics ) ) {
    $analytics = array();
  }

  // https://developers.google.com/analytics/devguides/collection/amp-analytics/
  $analytics['xyz-googleanalytics'] = array(
    'type' => 'googleanalytics',
    'attributes' => array(
      // 'data-credentials' => 'include',
    ),
    'config_data' => array(
      'vars' => array(
        'account' => "UA-XXXXXXXX-X" // トラッキングID
      ),
      'triggers' => array(
        'trackPageview' => array(
          'on' => 'visible',
          'request' => 'pageview',
        ),
      ),
    ),
  );

  return $analytics;
}

AdsenseのAMP化

AdsenseもAMPに対応しています。

まずはheade内で専用JavaScriptを読み込みます。

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

Adsenseを表示するコードは次のようになります。

<amp-ad width=300 height=250
      type="adsense"
      data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
      data-ad-slot="XXXXXXXXXX">
 </amp-ad>

Adsense以外は使ってないのでその他の広告について検証はできてませんが、CriteoやYahooJPなどもAMPに対応しているようです。

Webフォント

制限の多いAMPですが意外にもWebフォントが使えます。通常のHTMLと同じくhead内にlinkタグを追加して使います。

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">

2016年10月現在では使用可能なWebフォントは以下に限られます。

  • Typography.com: https://cloud.typography.com
  • Fonts.com: https://fast.fonts.net
  • Google Fonts: https://fonts.googleapis.com
  • Font Awesome: https://maxcdn.bootstrapcdn.com

Google FontsとFont Awesomeが使えるのは嬉しいところ。

確認作業

最後にAMPに対応できているか確認します。

ChromeのディベロッパーツールでAMPの確認

確認したいAMPページのURLに「#development=1」を付けると、Chromeのディベロッパーツールの「Console」タブにてエラー内容が確認できます。「AMP validation successful.」と表示されていればAMP対応できています。

またSearch ConsoleやGoogleが新たに公開したサイト「AMPテスト」からもAMPの状況を確認できます。

AMPテストサイトで確認

ここでエラーが発生していれば、AMPドキュメント片手にエラー内容とにらめっこです。

さいごに

「AMP」プラグインを使えばサクッとAMP対応できる予定だったのですが、ある程度デザインを編集したため想像以上に手間がかかりました。

このブログに適応させるためにここでまとめた以外にもいくつか工程を経ているので、プラグインを使わない方法とまではいきませんがそれなにり労力が必要でした。もちろん初期の殺風景なデザインでよければワンクリックで対応できるのですが……。

2016年10月21日、日本でもモバイル検索結果にAMPラベルの表示を開始するとGoogle Japan Blogにて発表がありました。AMP対応の時期はもうすでに来ているのかもしれませんね。

参考記事

スポンサーリンク

スポンサーリンク

コメントを残す