WordPressプラグイン「AMP」のカスタマイズが超簡単だった！

WordPressで提供されているAMP(Accelerated Mobile Pages)対応のプラグイン「AMP」。最初リリースされた頃はホントにカスタマイズできない感じでしたが、最新版0.4.2で確認したところ、思った以上に簡単にカスタマイズできました。

WordPressプラグイン「AMP」のカスタマイズが超簡単だった！
- wordpressのampのカスタマイズ前準備
  - Google Analyticsも入れる
  - 最後にWordpress Popular Posts

WordPressプラグイン「AMP」のカスタマイズが超簡単だった！

当初すごくカスタマイズしづらい感じだったAMP。例えばこのページ。
やっと解った！Apple Watch Series 2単体(とiPhone6S)でのSuica利用方法。 | freeSIM.tokyo

カスタマイズしないとこんなページになります。

色んな方がプラグイン無しでカスタマイズする方法や、プラグイン有りでどうやってカスタマイズするか・・・の説明ページを書かれていますが・・・大変な作業をしなくても、少なくとも0.4.2では簡単です。

AMP — WordPress Plugins

wordpressのampのカスタマイズ前準備

WordPressプラグインampのカスタマイズをするための準備の方法は簡単。
Wordpressのプラグインディレクトリにあるampのtemplatesフォルダをテーマディレクトリにampという名前でコピーするとampページを構成する全てのファイルがコピーされたことになります。
ちょうど子テーマでカスタマイズするのと同じやり方でデザイン変更などが出来ます。

まず、テーマディレクトリにampというディレクトリを作ります。
{Wordpressインストールディレクトリ}/wp-content/plugins/amp/templates/のファイルを全てWordpressテーマディレクトリにコピー。

ターミナルが使える場合は、
cd {テーマディレクトリ} cp -rf {Wordpressインストールディレクトリ}/wp-content/plugins/amp/templates/ amp
でOKです。

ampテーマ(theme)構成ファイル

Ver.0.4.2の場合、コピーされるファイルは、
featured-image.php
header-bar.php
meta-comments-link.php
meta-time.php
style.php
footer.php
meta-author.php
meta-taxonomy.php
single.php
になるはずです。

とりあえず、今のampページに対して、

サイトのカラー・フォントと合わせる
Google Adsenseを上下に掲載する
Google Analyticsのトラッキングコードを入れる
「WordPress Popular Posts」で人気記事の一覧を追加

をやりましょう。

AMPページのサイトとのカラー・フォント合わせ(style.php)

Ampの0.4くらいからWordpress管理メニューの「外観」でAmpの外観を「ちょっとだけ」いじれるようにはなりました。
テキストの色とヘッダの色と、明るいか暗いかのテーマ選択。
実際は既にリンクやヘッダバックグラウンドなどのパラメータは設定されているようで、メニューにないだけのようです。
そんなことならCSSをコントロールするファイルを直接いじっちゃった方がカスタマイズの幅は広がります。
いじる対象のファイルはstyle.phpです。

冒頭がこんな感じ。なんとなくわかると思いますが・・・theme_colorやlink_colorのパラメータをサニタイズして変数に入れて、CSSの該当箇所に当て込んでるんです。

<?php
// Get content width
$content_max_width       = absint( $this->get( 'content_max_width' ) );

// Get template colors
$theme_color             = $this->get_customizer_setting( 'theme_color' );
$text_color              = $this->get_customizer_setting( 'text_color' );
$muted_text_color        = $this->get_customizer_setting( 'muted_text_color' );
$border_color            = $this->get_customizer_setting( 'border_color' );
$link_color              = $this->get_customizer_setting( 'link_color' );
$header_background_color = $this->get_customizer_setting( 'header_background_color' );
$header_color            = $this->get_customizer_setting( 'header_color' );
?>

つまりこの各変数を上書きすれば色はコントロールできます。

こんな感じで変えていけばいいんじゃないでしょうか・・・？

$header_background_color = $this->get_customizer_setting( 'header_background_color' );
$header_background_color = '#fff' ;
$header_color            = $this->get_customizer_setting( 'header_color' );
$header_color = '#39c' ;

あと、ampのフォントはなぜかセリフ体、明朝系になっていますが、これを上書きするには、style.phpの６４行目あたり、
font-family: 'Merriweather', 'Times New Roman', Times, Serif;
これを変えてしまえばOKです。コピーしたファイルなので多少直書きしてもマスターはプラグインディレクトリにあります。

今年のfont-family指定、font-family 2016はこちらだそうです。
2016年最強のFont family設定 – ミルログ
なのでこのサイトオススメのfont-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, sans-serif;に変えておきました。
下の行に追加してもOK。

AMPページの上下にGoogle　Adsenseを追加

WordPressの通常のページと同じく、single.phpをカスタマイズして終わりです。
head内とbody下の２ヶ所追加します。

headの方はJavascriptです。場所は・・・この辺にしましょうか。６行目でmetaのviewportの下。

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

次にAdsenseを貼りたいところに下のコードを入れます。下のタグがAdsenseをAMPで出す為のコード。
width,heightは使いたい広告サイズのものを、data-ad-clientとdata-ad-slotはadsenseタグで同じ名前の物を入れて下さい。

<amp-ad width="336" height="280" type="adsense" data-ad-client="ca-pub-xxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxxx"></amp-ad>

これをsingle.phpの好きな所に張るだけ。後々の事を考えてdivでくくっておいたほうがいいでしょう。

Google Analyticsも入れる

これも同様に代替のAMP用タグを２ヶ所single.phpに入れるだけです。
header要素の中にampのAnalytics用タグを入れます。場所は・・・
この辺にしましょうか。６行目でmetaのviewportの下。

<!doctype html>
<html amp <?php echo AMP_HTML_Utils::build_attributes_string( $this->get( 'html_tag_attributes' ) ); ?>>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    <?php do_action( 'amp_post_template_head', $this ); ?>

あとはbodyの下にUAなどパラメータを入れます。15か16行目あたり。

<amp-analytics type="googleanalytics">
<script type="application/json"> {
	"vars": { "account": "UA-******-**" },
	"triggers": {
		"trackPageview" : {
			"on": "visible",
			"request": "pageview"
		}
	}
}
</script>
</amp-analytics>

最後にWordpress Popular Posts

ホントは関連記事的なものを入れたいのですが、ぱっと分かったのがWordpress Popular Postsの一覧を出すやり方。
これもsingle.phpでいけます。

    <h3>よく読まれている記事</h3>
    <?php if (function_exists('wpp_get_mostpopular')) wpp_get_mostpopular(
        array(
            'stats_views' => false,
        )
    ); ?>

stats_viewsをfalseにしているのはWordpress Popular Postsがデフォルトで各ページのview数を出すからです。
出したい人はwpp_get_mostpopular();でOK。

このあたりを大体終わらせると見栄えはちょっとばかしかわりました。リンク先はAMPです。
やっと解った！Apple Watch Series 2単体(とiPhone6S)でのSuica利用方法。 | freeSIM.tokyo

かなり楽になりました。

ampとして機能するかどうかのチェックツールはこちら。
The AMP Validator