【WordPress】プラグイン無しでAMP（Accelerated Mobile Pages）に対応にする手順

2016/02/14
ライター：鹿

当ブログをSEO界隈で少しずつ話題になっているAMP（Accelerated Mobile Pages Project）に対応しました。今日はWordPressへAMPを実装する個人的な備忘録として共有したいと思います。

Accelerated Mobile Pages プロジェクトについて -- 導入ガイド日本語版を本日公開しました

Accelerated Mobile Pages プロジェクトの導入ガイドの日本語版を公開しました。

developers-jp.googleblog.com

目次で流し読みする･*･:≡(　ε:)

1.AMP（Accelerated Mobile Pages Project）とは
2.WordPerssならプラグインもあるよ
1. 2-1.AMP
2. 2-2.Accelerated Mobile Pages — WordPress Plugins
3.AMPをプラグインを使わず自分で対応したい
1. 3-1.AMPのざっくりとした仕様
2. 3-2.AMP対応・非対応の振り分け方法
4.head / metaタグの設定
5.JS / JSONの設定
6.CSSの設定
7.HTMLの設定
8.デバッグ作業
9.まとめ

AMP（Accelerated Mobile Pages Project）とは

AMP（Accelerated Mobile Pages Project）はモバイルウェブ高速化を目的としたプロジェクトです。GitHubでもガイドラインが公開されています。

「AMP HTML」と呼ばれる独自のテンプレートに沿ってページを作成すると、Google検索結果から記事の表示までを超高速で行う事が可能です。

何はともあれ、まずはこちらを見て下さい。

AMPで作成されたページは検索結果のすぐ下にカルーセルで並び、記事をタップすると一瞬で表示されるようになります。Googleがキャッシュしたページを読み込むことでこの速さを実現しているみたいですね。

更に記事を表示している間にスワイプすると、次の記事へ即座に移動して表示されます。AMPに対応するとまるでアプリのニュースリーダーを読んでいるような快適な操作が実現します。

以下の検索結果画面をモバイル端末（もしくはChromeの開発者ツール）でアクセスするとAMPのデモが体感できます。

コレ以外にもプロジェクトに参加しているGoogleやTwitter、Linked in、Pinterestなどからアクセスした場合でも対応する予定になっています。

WordPerssならプラグインもあるよ

このAMPプロジェクトにはWordPressも参加しており、記事をAMP対応にするプラグインが提供されています。上がWordPressを生み出したAutomattic社が開発したもの、下がMohammed Kaludi, Ahmed Kaludi氏が開発したものです。

プラグインを有効化にして【設定】＞【パーマリンク設定】からそのまま設定を保存することでAMP用のURLが生成されます。

AMP

An easier path to great Page Experience for everyone. Powered by AMP.

wordpress.org

プラグインを有効化するとこんな感じになります。WordPressのテーマカラーのヘッダーにロゴが入り、非常にシンプルな見た目になりました。通常のページURL末尾に「/amp/」もしくは「?amp=1」を追加すると見れます。

Accelerated Mobile Pages — WordPress Plugins

AMP for WP – Accelerated Mobile Pages

AMP for WP is the most recommended AMP plugin by the community. Automatically add Accelerated Mobile Pages (Google AMP Project) functionality on your …

wordpress.org

プラグインを有効化するとこんな感じになります。パープルのヘッダーにグレーの背景でこちらもシンプルな見た目になります。AMPは制約が多いので凝った作りにすることが難しいためです。テーマに組み込んでいた関連記事のショートコードもむき出しになってしまいました。

AMPをプラグインを使わず自分で対応したい

上記のプラグインは完全なAMP対応とは言えずまだまだβ版です。今から数年前にスマホサイト対応でWPtouch Mobile Pluginが流行ったのと同じように、プラグインを使っている人と全く同じデザインになってしまうので「とりあえず対応しました感」があって何か嫌なんですよね。

というわけで今回はWordPressでプラグインを使用せずAMPに対応させた手順をご紹介します。このページもAMPに対応しているので、URL末尾に「?amp=1」を付けてレイアウトの違いを見て下さい。

https://creatorclip.info/2016/02/mobareco-aquos-serie-mini-shv33-review/?amp=1

AMPのざっくりとした仕様

テーマファイルを弄る前にまずはバックアップを必ずとっておきましょう。その間にざっくりとしたAMPの仕様を確認しておいて下さい。

head / metaタグの設定

DOCTYPE宣言の後は<html ?>
canonical urlの設定
amphtmlの設定
viewportの設定
wp_head()・wp_footer()は振り分ける
その他metaタグは今までどおり使用OK

JS / JSONの設定

AMP用JSライブラリの読み込み
schema.orgの設定
上記以外のJSは使用禁止！

CSSの設定

<link>タグ・インラインstyle属性は使用禁止！
Google Fontは<link>タグで読み込みOK。
CSS総容量は50,000Byte＝50KBまで
!important禁止！
CSS読み込みは<style amp-custom>～</style>
amp-boilerplateの読み込み

HTMLの設定

form周りのタグは禁止！
画像を<amp-img>～</amp-img>に置換
Twitter埋め込みを<amp-twitter>～</amp-twitter>に置換
Vine埋め込みを<amp-vine>～</amp-vine>に置換
Instagram埋め込みを<amp-instagram>～</amp-instagram>に置換
YouTube埋め込みを<amp-youtube>～</amp-youtube>に置換
iframeを<amp-iframe>～</amp-iframe>に置換
Google Adsenseを<amp-ad>～</amp-ad>に置換
Google Analyticsを<amp-analytics>～</amp-analytics>に置換

AMPはCSSをインラインで出力、JS使用禁止など制約が厳しく、動的にソースを生成するWordPerssには不向きとも言われていますが、コンテンツの取捨選択と気合があれば以外と対応できます。

AMP対応・非対応の振り分け方法

<?php
    //AMPチェック
    $myAmp = false;
    $string = $post->post_content;
    
    // ampのパラメーターが1かつ記事の中に<script>タグが入っていない
    // かつsingleページのみ$myAmpをtrueにする
    if($_GET['amp'] === '1' && strpos($string,'<script>') === false && is_single()){
        $myAmp = true;
    }
?>

条件分岐をしたいphpファイルの1番上に、上記コードをコピペして入れて下さい。$myAmpという変数を用意してampのパラメーターが1、かつsingleページで<script>タグが入っていない記事のみ$myAmpをtrueにする処理です。

実際に振り分けるにはif文でこのように振り分けます。

<?php if($myAmp): // AMP対応ページの場合 ?>
    AMP対応時のコード
<?php endif; // AMP分岐終了 ?>

<?php if(!$myAmp): // 通常ページの場合 ?>
    通常のコード
<?php endif; // AMP分岐終了 ?>

<?php if($myAmp): // AMP対応ページの場合 ?>
    AMP対応時のコード
<?php else: // 通常ページの場合 ?>
    通常のコード
<?php endif; // AMP分岐終了 ?>

head / metaタグの設定

DOCTYPE宣言の後は<html ?>

<!DOCTYPE html>
<?php if($myAmp): // AMP対応ページの場合 ?>
<html ?>
<head>
<?php else: // 通常ページの場合 ?>
<html lang="ja">
<head prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article#">
<?php endif; // AMP分岐終了 ?>
<meta charset="utf-8">
head内容
</head>
<body>
body内容
</body>
</html>

DOCTYPEは通常のHTML5と同じですが、<html>には稲妻の絵文字（?）を入れます。ソースコードに絵文字なんて…と思いますが、実際class名にも利用できるようなのでおかしいことはないです。絵文字に抵抗がある方はampと入れても問題ないです。でも絵文字のほうが可愛いので私はそっちにしています。

細かいことですが、文字コード宣言の<meta charset="utf-8">は<head>タグ直下に書かないとエラーになります。

canonical urlの設定

AMPでは通常ページとAMP対応ページの2つのコンテンツを生成することになるので、Googleから重複コンテンツとみなされてしまいます。そこでcanonical urlの設定をして2つのページが同一ページである証明をする必要があります。

<?php if($myAmp): // AMP対応ページの場合 ?>
<?php $canonical_url = get_permalink(); ?>
<link rel="canonical" href="<?php echo $canonical_url; ?>" />
<?php endif; // AMP分岐終了 ?>

get_permalink();でパーマリンクを取得して&canonical_urlという変数に格納し、canonicalの値に代入します。

amphtmlの設定

<?php if($myAmp): // AMP対応ページの場合 ?>
<link rel="amphtml" href="<?php echo $canonical_url.'?amp=1'; ?>">
<?php endif; // AMP分岐終了 ?>

続いてamphtmlの設定です。これを指定することによってGoogleにAMPページがありますよと伝える事ができます。hrefの値には&canonical_urlに加えて?amp=1を追加しています。

viewportの設定

スマホサイト対応する上で必須のviewportですが、AMPではこれも決められた値以外だとエラーになるので必要に応じて振り分けたりそのまま差し替えます。

<?php if($myAmp): // AMP対応ページの場合 ?>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<?php else: // 通常ページの場合 ?>
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php endif; // AMP分岐終了 ?>

wp_head()・wp_footer()は振り分ける

<?php if(!$myAmp): // 通常ページの場合 ?>
<?php wp_head(); ?>
<?php endif; // AMP分岐終了 ?>
</body>
</html>

<?php if(!$myAmp): // 通常ページの場合 ?>
<?php wp_footer(); ?>
<?php endif; // AMP分岐終了 ?>
</head>
<body>

プラグインなどの出力で使うwp_head()とwp_footer()は勝手に<script>タグを挿入するので、AMPでは読み込まないほうが無難です。

その他metaタグは今までどおり使用OK

その他のmetaタグに関しては大体対応しています。OGP設定などは振り分けを行わずそのまま使っています。

JS / JSONの設定

お次はJS / JSOB側の設定です。これもheadタグの中に入れていきます。

AMP用JSライブラリの読み込み

AMP用のJSファイルを読み込みます。この中にAMPに関わるコードが書かれているらしいのですが、圧縮されているので何が書かれているかよく分かりません…。おまじないとして読み込んで下さい。

<?php if($myAmp): // AMP対応ページの場合 ?>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<?php endif; // AMP分岐終了 ?>

schema.orgの設定

schema.org（スキーマ）は検索エンジン最適化の一種で、Googleなどにより詳しい情報を伝えるためのマークアップ記法のことです。

レビューサイトなどで★5と評価をすると検索結果に表示されたり(リッチスニペット)と、ただのテキストや画像に「これはレビューの評価ですよ」と意味をもたせることを指します。この他にもパンくずリストを検索結果に表示させたりすることにも使われています。

Googleリッチスニペット対策！初心者向けSchema.org解説！

星やパンくずリストを表示させる具体的な方法については割愛しますが、今回はAMP用のschema.orgを設定していきます。

<?php if($myAmp): // AMP対応ページの場合 ?>
<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "NewsArticle",
    "mainEntityOfPage":{
        "@type":"WebPage",
        "@id":"<?php the_permalink(); ?>" // パーマリンクを取得
    },
    "headline": "<?php the_title();?>", // ページタイトルを取得
    "image": {
        "@type": "ImageObject",
        "url": "<?php // アイキャッチ画像URLを取得
        $image_id = get_post_thumbnail_id();
        $image_url = wp_get_attachment_image_src($image_id, true);
        echo $image_url[0];
        ?>",
        "height": 800,
        "width": 800
    },
    "datePublished": "<?php the_time('Y/m/d') ?>", // 記事投稿時間
    "dateModified": "<?php the_modified_date('Y/m/d') ?>", // 記事更新時間
    "author": {
        "@type": "Person",
        "name": "<?php the_author_meta('nickname'); ?>" // 投稿者ニックネーム
    },
    "publisher": {
        "@type": "Organization",
        "name": "<?php bloginfo('name'); ?>", // サイト名
        "logo": {
            "@type": "ImageObject",
            "url": "<?php bloginfo('template_url'); ?>/img/logo.png", // ロゴ画像
            "width": 130,
            "height": 53
        }
    },
    "description": "<?php echo mb_substr(strip_tags($post-> post_content), 0, 60); ?>…" // 抜粋
}
</script>
<?php endif; // AMP分岐終了 ?>

サムネイル画像のwidthとheightを800に指定しておりますが、なぜか値を変更するとエラーになってしまうのでガイドラインのまま使用しています。ロゴ画像のファイルパスやwidthとheightはサイトに合わせて適宜変更して下さい。

ここまでのheadとmetaタグをまとめるとこのようになります。

<?php
    //AMPチェック
    $myAmp = false;
    $string = $post->post_content;
    
    // ampのパラメーターが1かつ記事の中に<script>タグが入っていない
    // かつsingleページのみ$myAmpをtrueにする
    if($_GET['amp'] === '1' && strpos($string,'<script>') === false && is_single()){
        $myAmp = true;
    }
?>
<?php if($myAmp): // AMP対応ページの場合 ?>
<html ?>
<head>
<?php else: // 通常ページの場合 ?>
<html lang="ja">
<head prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article#">
<?php endif; // AMP分岐終了 ?>
<meta charset="utf-8">
<?php if($myAmp): // AMP対応ページの場合 ?>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<?php $canonical_url = get_permalink(); ?>
<link rel="canonical" href="<?php echo $canonical_url; ?>" />
<link rel="amphtml" href="<?php echo $canonical_url.'?amp=1'; ?>">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "NewsArticle",
    "mainEntityOfPage":{
        "@type":"WebPage",
        "@id":"<?php the_permalink(); ?>" // パーマリンクを取得
    },
    "headline": "<?php the_title();?>", // ページタイトルを取得
    "image": {
        "@type": "ImageObject",
        "url": "<?php // アイキャッチ画像URLを取得
        $image_id = get_post_thumbnail_id();
        $image_url = wp_get_attachment_image_src($image_id, true);
        echo $image_url[0];
        ?>",
        "height": 800,
        "width": 800
    },
    "datePublished": "<?php the_time('Y/m/d') ?>", // 記事投稿時間
    "dateModified": "<?php the_modified_date('Y/m/d') ?>", // 記事更新時間
    "author": {
        "@type": "Person",
        "name": "<?php the_author_meta('nickname'); ?>" // 投稿者ニックネーム
    },
    "publisher": {
        "@type": "Organization",
        "name": "<?php bloginfo('name'); ?>", // サイト名
        "logo": {
            "@type": "ImageObject",
            "url": "<?php bloginfo('template_url'); ?>/img/logo.png", // ロゴ画像
            "width": 130,
            "height": 53
        }
    },
    "description": "<?php echo mb_substr(strip_tags($post-> post_content), 0, 60); ?>…" // 抜粋
}
</script>
<?php else: // 通常ページの場合 ?>
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php endif; // AMP分岐終了 ?>
</head>
<body>
body内容
</body>
</html>

上記以外のJSは使用禁止！

AMPでは上記で記述されたスクリプト以外のJSは使用できません。ページ内でJSを使用している場合は条件分岐で振り分ける必要があります。

<?php if(!$myAmp): // 通常ページの場合 ?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="hogehoge.js"></script>
<script src="fugafuga.js"></script>
<script src="piyopiyo.js"></script>
<?php endif; // AMP分岐終了 ?>

CSSの設定

<link>タグ・インラインstyle属性は使用禁止！

AMPでは読み込んでいるCSSファイルをインラインCSSで読み込みます。<link>タグで読み込んでいるとエラーになるので、置換なりプラグインなどでHTMLのhead内に出力しなければいけません。

私はAutoptimizeというプラグインを使って対応しました。

Autoptimize

Autoptimize は、以下を最適化することでサイトの反応を高速にします。JavaScript、CSS、画像 (遅延読み込みを含む)、HTML、Google フォント、非同期 JavaScript、また邪魔な Emoji の除去など。

ja.wordpress.org

WordPressの管理画面から【設定】＞【Autoptimize】に移動して上部にある「Show advanced settings」と書かれたボタンを押して詳細設定を表示します。

CSS OptionsからInline all CSS?（全てのCSSをインライン化して読み込みますか？）という項目があるのでチェックを入れます。インラインCSSは正直見辛いのであまり好きじゃないのですが、AMPのためなのでシカたないですね。

Inlining all CSS can improve performance for sites with a low pageviews/ visitor-rate, but may slow down performance otherwise.（インラインCSSは小さなファイルには効果的ですがCSSの量が増えるとページの読み込みスピードが落ちることもあります。）

インラインstyleを使って装飾を付けるようなことも禁止です。


<span style="color:red;">この文字は赤色になります</span>

classに置き換えると使用可能なので、1つずつ置き換えましょう。

<span class="red">この文字は赤色になります</span>

置き換え作業が大変な場合はWordPressのテンプレートタグthe_content()を使って一括置換することも可能です。

Google Fontは<link>タグで読み込みOK。

なぜかGoogle Fontは<link>タグを使用してOKというルールになっています。

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:500,300,700,400">

CSS総容量は50,000Byte＝50KBまで

CSSの容量が50,000Byte＝50KBを超えるとエラーになります。私のブログデザインはCSSアニメーションなどでガッツリ組んでいるので、圧縮をしても80,000字を超えてしまいました。オーバーしていた場合、CSSのファイルを削るかamp用のCSSを用意することになるので面倒くさいです。

今さらCSSを削るのも難しいのでCSSを分けて出力することにしました。

<?php if($myAmp): // AMP対応ページの場合 ?>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css">
<?php else: // 通常ページの場合 ?>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css">
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/responsive.css">
<?php endif; // AMP分岐終了 ?>

!important禁止！

CSSでは!importantが使えません。セレクタを駆使してどうにかするしかありません。あとCSS animationとtransition はGPU関連のみらしいです。自分のブログでは該当しなかったのでそのまま使っています。

CSS読み込みは<style amp-custom>～</style>

<style amp-custom>.hoge { color:red; }…</style>

インラインCSSの読み込みは通常<style type="text/css">～</style>で行いますが、AMPでは<style amp-custom>～</style>になります。Autoptimizeの設定からはstyleタグの出力変更ができないのでプラグインの中身を直接触って変更しました。

注意事項: 私の環境では問題なく動いてますが、プログラムには詳しくないため自己責任で行って下さい。ファイルを触る前に必ずバックアップを必ず取ってから作業を行って下さい。

/WordPressインストールディレクトリ/wp-content/plugins/autoptimize/classes/にあるautoptimizeStyles.phpの513行目を編集します。

if ($this->inline == true) {
    foreach($this->csscode as $media => $code) {
        $this->inject_in_html('<style type="text/css" media="'.$media.'">'.$code.'</style>',$replaceTag);
    }
} else {
    以下省略
}

ハイライトされた行を以下のように変更して下さい。

if ($this->inline == true) {
    foreach($this->csscode as $media => $code) {
        // charsetを削除
        $code = str_replace('@charset "utf-8";', " ", $code);

        //AMPチェック
        $myAmp = false;
        $string = $post->post_content;
        if($_GET['amp'] === '1' && strpos($string,'<script>') === false && is_single()){
            $myAmp = true;
        }
        if(!$myAmp) {
            $this->inject_in_html('<style type="text/css" media="'.$media.'">'.$code.'</style>',$replaceTag);
        } else {
            $this->inject_in_html('<style amp-custom>'.$code.'</style>',$replaceTag);
        }
    }
} else {
    以下省略
}

これで通常時とAMP用ページでstyleの出力変更が出来ました。実際は振り分けずにどちらも<style amp-custom>～</style>で読み込むことは可能ですが、念のために振り分けています。

amp-boilerplateの読み込み

ドキュメントに書かれているAMP Boilerplate Codeをコピぺします。amp-customではなくamp-boilerplateなので注意！

ちなみにboilerplateの意味は「決まり文句」らしいです。つまりそういうことです。

<?php if($myAmp): // AMP対応ページの場合 ?>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<?php endif; // AMP分岐終了 ?>

HTMLの設定

form周りのタグは禁止！

form周りのタグは<button>以外禁止です。なので検索フォームやコメント欄などは通常ページのみ表示します。

<?php if(!$myAmp): // 通常ページの場合 ?>
    <form method="get" id="searchform" action="/">
        <input type="text" placeholder="Search" name="s" id="s">
    </form>
<?php endif; // AMP分岐終了 ?>


<?php if(!$myAmp): // 通常ページの場合 ?>
    <?php comments_template(); ?>
<?php endif; // AMP分岐終了 ?>

最後にHTMLで使用している画像やiframe、その他埋め込みコードなどを置換していきます。header.phpとsingle.phpにベースとなるコードを貼り付けて下さい。

header.php

<?php if($myAmp): // AMP対応ページの場合 ?>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<script async custom-element="amp-vine" src="https://cdn.ampproject.org/v0/amp-vine-0.1.js"></script>
<script custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js" async></script>
<script custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js" async></script>
<?php endif; // AMP分岐終了 ?>

single.php

<?php if($myAmp): // AMP対応ページの場合 ?>
<?php
// 自動埋め込み無効
remove_filter( 'the_content', array( $GLOBALS['wp_embed'], 'autoembed' ), 8 );

// コンテンツ取得
$content = apply_filters( 'the_content', get_the_content() );
$content = str_replace( ']]>', ']]&gt;', $content ); ?>
    ■ここに置換するコードをコピペしていく■
<?php echo $content; ?>
<?php else: // 通常ページの場合 ?>
    <?php the_content(); ?>
<?php endif; // AMP分岐終了 ?>

画像を<amp-img>～</amp-img>に置換


<?php
// 画像を<amp-img></amp-img>に置換する
$pattern = '/<img/i';
preg_match($pattern,$content,$matches);
$append = $matches[0];
$append = '<amp-img layout="responsive"';
$content = preg_replace($pattern, $append, $content);
?>

Twitter埋め込みを<amp-twitter>～</amp-twitter>に置換

<?php
// Twitterをamp-twitterに置換する（自動埋め込み）
$pattern = '/<p>https:\/\/twitter.com\/.*\/status\/(.*).*<\/p>/i';
$append = '<p><amp-twitter width=592 height=472 layout="responsive" data-tweetid="$1"></amp-twitter></p>';
$content = preg_replace($pattern, $append, $content);

// Twitterをamp-twitterに置換する（埋め込みコード）
$pattern = '/<blockquote class="twitter-tweet".*>.*<a href="https:\/\/twitter.com\/.*\/status\/(.*).*<\/blockquote>.*<script async src="\/\/platform.twitter.com\/widgets.js" charset="utf-8"><\/script>/i';
$append = '<p><amp-twitter width=592 height=472 layout="responsive" data-tweetid="$1"></amp-twitter></p>';
$content = preg_replace($pattern, $append, $content);
?>

Vine埋め込みを<amp-vine>～</amp-vine>に置換

.vineは各自サイトに合わせて変更して下さい。

<?php
// vineをamp-vineに置換する
$pattern = '/<div class=\'vine\'><iframe width=\'100%\' src=\'https:\/\/vine.co\/v\/(.*)\/embed\/simple\'.*<\/div>/i';
$append = '<div class=\'vine\'><amp-vine data-vineid="$1" width="592" height="592" layout="responsive"></amp-vine></div>';
$content = preg_replace($pattern, $append, $content);
?>

Instagram埋め込みを<amp-instagram>～</amp-instagram>に置換

.instagramは各自サイトに合わせて変更して下さい。

<?php
// Instagramをamp-instagramに置換する
$pattern = '/<div class=\'instagram\'><iframe src=\'\/\/instagram.com\/p\/(.*)\/embed\/\'.*<\/iframe><\/div>/i';
$append = '<div class=\'instagram\'><amp-instagram layout="responsive" data-shortcode="$1" width="592" height="716" ></amp-instagram></div>';
$content = preg_replace($pattern, $append, $content);
?>

YouTube埋め込みを<amp-youtube>～</amp-youtube>に置換

.youtubeは各自サイトに合わせて変更して下さい。

<?php
// YouTubeを置換する（自動埋め込み）
$pattern = '/<div class="youtube">.*https:\/\/youtu.be\/(.*).*<\/div>/i';
$append = '<div class="youtube"><amp-youtube layout="responsive" data-videoid="$1" width="592" height="363"></amp-youtube></div>';
$content = preg_replace($pattern, $append, $content);

// YouTubeを置換する（埋め込みコード）
$pattern = '/<div class="youtube">.*<iframe width="853" height="480" src="https:\/\/www.youtube.com\/embed\/(.*)" frameborder="0" allowfullscreen><\/iframe>.*<\/div>/i';
$append = '<div class="youtube"><amp-youtube layout="responsive" data-videoid="$1" width="592" height="363"></amp-youtube></div>';
$content = preg_replace($pattern, $append, $content);
?>

iframeを<amp-iframe>～</amp-iframe>に置換

iframeは埋め込みコードにも含まれているので、1番最後に置換したほうがいいかもしれないです。ちなみに古き好きframeは使用不可です。

<?php
// iframeをamp-iframeに置換する
$pattern = '/<iframe/i';
$append = '<amp-iframe layout="responsive"';
$content = preg_replace($pattern, $append, $content);
?>

Google Adsenseを<amp-ad>～</amp-ad>に置換

Adsenseに関してはコードを置換するのが難しいので条件分岐で振り分けることにしました。その他の広告については非表示にしています。

<?php if($myAmp): // AMP対応ページの場合 ?>
<amp-ad width="300" height="250" type="adsense"
  data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
  data-ad-slot="oooooooooo">
</amp-ad>
<?php else: // 通常ページの場合 ?>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="oooooooooo"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<?php endif; // AMP分岐終了 ?>

Google Analyticsを<amp-analytics>～</amp-analytics>に置換

<?php if($myAmp): // AMP対応ページの場合 ?>
<amp-pixel src="//ssl.google-analytics.com/collect?v=1&amp;tid=UA-XXXXXXXX-1&amp;t=pageview&amp;cid=$RANDOM&amp;dt=$TITLE&amp;dl=$CANONICAL_URL&amp;z=$RANDOM"></amp-pixel>
<?php else: // 通常ページの場合 ?>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXXX-1', 'サイトURL');
  ga('send', 'pageview');
</script>
<?php endif; // AMP分岐終了 ?>

デバッグ作業

ここまで完了したら後はデバッグ作業です。AMPページを開いてURL末尾に「#development=1」を付けると、開発者ツールのconsoleにエラー内容や解決のヒントが一覧で表示されます。

https://creatorclip.info/2016/02/mobareco-aquos-serie-mini-shv33-review/?amp=1#development=1

問題がない場合は「AMP validation successful.」と表示され、エラーが有る場合「AMP validation had errors.」と表示されるようになっています。エラーが有る場合、GitHubのドキュメントに色々書かれているので、英語を翻訳しながら解決あるのみです。

まとめ

15,000字超えの超長い記事になったのですが、私はこの方法でAMP対応を行いました。自分のブログに合わせた方法なので、サイトによっては使えないかもしれません。そしてまだまだ完全に対応は出来ていません。

最後に参考にした記事をまとめて紹介して終わりにしたいと思います。最後までご覧頂きありがとうございました！

Tag: AMP WordPress モバイル対応レスポンシブWEBデザイン

＼この記事についてシェアしてみよう／

トップページから他の記事を探す