WordPress　AMPプラグインのカスタマイズ

昨年末くらいからモバイルが爆速になるとちらほらと話題になってきたAMP(Accelerated Mobile Pages)ですが、Googleがいよいよ検索に取り入れるようで、Search ConsoleにもAMPのインデックス状況やエラーが表示されるようになりました。
いよいよ2月23日から検索での表示が開始されるようです。

当サイトもせっかくなので、AMPプラグインを使用して対応させてみました。
最新バージョンは0.42で、構造化データのエラー等はなくなっており、フィルターやアクションフックが充実しており、カスタマイズするのにプラグインを直接編集する必要はなくなりました。
今回軽くカスタマイズもしてみたので、使用方法やカスタマイズの方法をまとめてみます。

AMPプラグインの使用方法

AMPプラグインは特に設定等はなく、基本的にはインストールして、有効化するだけです。
ただし新しいURLを使用可能にするため、有効化後、設定->パーマリンク設定へ一度行って、設定を保存をする必要があります。
(既存の設定を変更する必要はありません。）

有効化すると、記事のURLの最後に/ampをつけたURLにampページが作成されるようになります。
versionが0.4になって、プラグインのディレクトリが変更されているため、アップデートした後は以下のようなエラーがでて、プラグインが停止してしまいます。

プラグイン amp-wp/amp.php はエラーにより停止しました。エラー: プラグインファイルが存在しません。

再度プラグインページから有効化する必要があります。

AMPプラグインのカスタマイズ

CSSの追加

amp_post_template_cssアクションフックを使用すれば、CSSを追加することができます。

add_action( 'amp_post_template_css', 'xyz_amp_my_additional_css_styles' );

function xyz_amp_my_additional_css_styles( $amp_template ) {
    // only CSS here please...
    ?>
    .amp-wp-byline amp-img {
        border-radius: 0; /* we don't want round avatars! */
    }
    .my-custom-class {
        color: blue;
    }
    <?php
}

Schema.orgによるマークアップの変更

Schema.orgによる構造化データを変更したい場合は、amp_post_template_metadataフィルターフックを使用して、連想配列$metadataを変更してやります。
以下の例では、typeをデフォルトのBlogPostingからNewsArticleに変更し、logoの画像も変更しています(デフォルトではサイトアイコン)。

add_filter( 'amp_post_template_metadata', 'xyz_amp_modify_json_metadata', 10, 2 );

function xyz_amp_modify_json_metadata( $metadata, $post ) {
    $metadata['@type'] = 'NewsArticle';

    $metadata['publisher']['logo'] = array(
        '@type' => 'ImageObject',
        'url' => get_template_directory_uri() . '/images/my-amp-metadata-logo.png',
        'height' => 60,
        'width' => 600,
    );
    return $metadata;
}

Google Analyticsの導入

2016/3/10追記:
ampプラグインでamp_post_template_analyticsフィルターフックを使用して、アクセス解析のコードを挿入できるようになりました。
Google Analyticsのコードを挿入するには以下のようにします。accountのところを変えてください。

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-XXXXX-Y"
            ),
            'triggers' => array(
                'trackPageview' => array(
                    'on' => 'visible',
                    'request' => 'pageview',
                ),
            ),
        ),
    );
    return $analytics;
}

Google Analytics以外も対応しているようですが、あんまり聞いたことのあるようなところはありませんでした。
このフィルターフックで以下のjavascriptとトラッキングコードが挿入されます。
トラッキングコードは</body>の直前に入るようです。

Google Analyticsがampに公式に対応しました。
現在はamp-pixelではなく、amp-analyticsを使用して読み込みます。
まずamp拡張用のJavaScriptをamp本体のJavaScriptより前に読み込みます。
ampプラグインではamp_post_template_headアクションで読み込まれるので、その前に記述します。

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20async%20custom-element%3D%22amp-analytics%22%20%E3%80%80%E3%80%80%E3%80%80%E3%80%80%E3%80%80src%3D%22https%3A%2F%2Fcdn.ampproject.org%2Fv0%2Famp-analytics-0.1.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<?php do_action( 'amp_post_template_head', $this ); ?>

次に、amp-analyticsタグをbody内に記述します。
accountのところを、自分のトラッキングIDで置き換えてください。
公式では通常とは別のプロパティを使用することが勧められています。
追記:コメントを入れているとエラーが出るようなので、削除しました。

<amp-analytics type="googleanalytics" id="analytics1">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22application%2Fjson%22%3E%0A%7B%0A%20%20%22vars%22%3A%20%7B%0A%20%20%20%20%22account%22%3A%20%22UA-XXXXX-Y%22%0A%20%20%7D%2C%0A%20%20%22triggers%22%3A%20%7B%0A%20%20%20%20%22trackPageview%22%3A%20%7B%0A%20%20%20%20%20%20%22on%22%3A%20%22visible%22%2C%0A%20%20%20%20%20%20%22request%22%3A%20%22pageview%22%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</amp-analytics>

Google Analyticsは以下のようにamp-pixelを使用して読み込みます。
tidの部分にトラッキングIDを入れます。

 <amp-pixel src="https://ssl.google-analytics.com/collect?v=1&tid=UA-xxxxxx-x&t=pageview&cid=$RANDOM&dt=$TITLE&dl=$CANONICAL_URL&z=$RANDOM"> </amp-pixel> 

テンプレートの差し替え

AMPプラグインは簡単なカスタマイズならフィルターフックを使ってカスタマイズできますが、一番自由度が高いのはテンプレートの差し替えです。

テーマのディレクトリにテンプレートファイルをコピー

まずはテーマのディレクトリにAMPプラグインのテンプレートをコピーしてきます。

AMPプラグインのテンプレートはプラグインのtemplatesというディレクトリに入っているファイルです。
現在はsingle.php, style.php, meta-author.php, meta-taxonomy.php, meta-time.phpがあります。

single.phpがメインのテンプレートファイル、style.phpはスタイルシート、meta-*は投稿者、カテゴリー、投稿日の表示用です。

既存のファイル名とかぶってしまっているので、私はテーマのディレクトリにampというディレクトリを作成してそこにコピーしました。

function.phpの編集

テーマのfunction.phpに以下を追加します。

function amp_template($file, $type, $post) {
	if ( 'single' === $type ) {
		$file = get_template_directory().'/amp/single.php';
	}
	if ( 'style' === $type ) {
		$file = get_template_directory().'/amp/style.php';
	}
	if ( 'meta-author' === $type ) {
			$file = get_template_directory().'/amp/meta-author.php';
	}
	if ( 'meta-taxonomy' === $type ) {
			$file = get_template_directory().'/amp/meta-taxonomy.php';
	}
	if ( 'meta-time' === $type ) {
			$file = get_template_directory().'/amp/meta-time.php';
	}
	return $file;
}
add_filter('amp_post_template_file','amp_template', 10, 3 );

これで、テーマディレクトリのテンプレートが読み込まれるようになるので、あとはこれを編集していきます。

スタイルシートの変更

スタイルシートはstyle.phpの内容を変更することで変更できます。

metaテンプレートを読み込まない

投稿者、公開日、カテゴリーなどはmeta-*として別途、single.phpの以下で読み込まれています。

<?php $this->load_parts( apply_filters( 'amp_post_template_meta_parts', array( 'meta-author', 'meta-time', 'meta-taxonomy' ) ) ); ?>

例えば、meta-authorが不必要な場合は、arrayの中から’meta-author’を消します。
全く必要ない場合は、この行を削除してもかまいません。
ちなみに以下のように、amp_post_template_meta_partsフィルターフックを使用しても読み込まないようにできます。

add_filter( 'amp_post_template_meta_parts', 'xyz_amp_remove_author_meta' );

function xyz_amp_remove_author_meta( $meta_parts ) {
    foreach ( array_keys( $meta_parts, 'meta-author', true ) as $key ) {
        unset( $meta_parts[ $key ] );
    }
    return $meta_parts;
}

Adsenseの挿入

Adsenseは以下のようにamp-adを使用して読み込みます。
data-ad-clientとdata-ad-slotを変更してください。
width,heightは表示させたい広告の大きさに調整してください。

<amp-ad width="320" height="100" type="adsense" data-ad-client="ca-pub-xxxxxxxxxx" data-ad-slot="xxxxxxxxx">
</amp-ad>