あとで読む
画像：Pixabay
WordPressなどのCMSを使っている人は、AMP用のテンプレートを自作するとサイト全体のAMP対応が素早く完了します。
テンプレートを自作できない人も、WordPressにはAMP対応のプラグインが存在しています。AMP対応プラグインを導入すると、全ページのAMP対応ページが自動で作成されますので、このプラグインでAMP対応しているサイトも多いです。
しかし本連載でさんざんお伝えしていますが、サイト全体のAMP化は危険でもあります。
なぜならAMPページにすると、仮にアクセスが増えたとしても、ページが簡素化するため一般的に成約率は落ちるからです。
AMP対応プラグインで作成されるページは、初期状態ではとても簡素なため、より成約率が落ちやすいです。
したがって、AMPページからどれだけ成約率を高められるか、つまり、AMP対応プラグインを使っていかにカスタマイズできるかはとても重要です。
WordPressプラグインのカスタマイズにはPHPの知識が必要なため、もしPHPの知識がないという人は、プラグインを使ったAMP化にはより慎重になってください。
以下、カスタマイズを行う前提でWordPressのAMPプラグインでAMP導入する手順をお伝えします。
WordPressには「AMPプラグイン」という名のプラグインがあります。WordPressを生み出したAutomattic社が開発したものです。
▼AMP — WordPress Plugins
ja.wordpress.org/plugins/amp/
AMPプラグインをインストールして有効化します。
次に[設定]―[パーマリンク設定]へ進んで、[変更を保存]ボタンを押します。すると以下のような状態になります。
つまりAMPページの最低限としては対応完了という状態になります。
しかしお伝えしたように以下の部分は未対応なので、そのままAMPプラグインのテンプレートを使っただけではおそらく成約率は落ちます。
なお、この中でも特に重要なのが下記２つだと思います。
これらの対応に関しては、鈴木謙一さんのブログにWordpressを即時AMP対応させる３つのプラグインが紹介されています。
▼WordPressブログをプラグインを使って30分でAMP化する方法 -海外SEO情報ブログ
www.suzukikenichi.com/blog/how-to-make-your-wordpress-blog-amp-ready/
しかしAMPプラグインの対応は日進月歩で、導入してもうまくアクセス解析できないということもあるので、プラグインに頼るのは極力避けたほうが無難です。
もしプラグインを頼ったときに表示されるAMPページで、エラーに対応できない場合には「AMP化したことでむしろ成約率は落ちる可能性がある」と考えておいた方がよいです。
実際にすべてのプラグインを試してみたところ、Facebook Instant Articles & Google AMP Pages by PageFrogは稼働が不安定で危険だと思います。
したがって、あまり簡単な内容は鵜呑みにせず、ぜひ下記の手法で自力でカスタマイズに挑戦しましょう。
AMPプラグインを初期状態で導入すると、すぐにAMP対応テンプレートが作成され既存サイトとのヒモ付もされます。
AMPページのURLは、既存投稿URLのお尻に/amp/をつけたものになります。
例） /service/myservice/というページの場合、AMPページは/service/myservice/amp/になります。
AMPプラグインをインストールすると、プラグインフォルダの中にAMP用のテンプレートファイルが作成されます。
しかしそのテンプレートファイルを直接カスタマイズすると、AMPプラグインをバージョンアップしたときにテンプレートファイルが上書きされてしまい、また１からカスタマイズをやり直さなくてはいけません。
この問題を避けるために、オリジナルをコピーして修正していく方法を使います。
これは、以下に説明する若干トリッキーな方法を使って実現します。（既に子テーマを使っている人は３から開始してください）
子テーマとは、AMPに関係のないWordPress自体の機能です。
現在適用している親テーマの一部だけを変えたいときなどに重宝する機能です。
子テーマを作成するには、以下３つの作業が必要です。
上記手順の１．子テーマの作成、２．子テーマの有功化の作業になります。
/*
Template:親のテーマ名
Theme Name:今回の子テーマ名
Theme URI:任意のURI
Description:任意の説明
Author:任意
Version:任意
*/上記を作成してアップロードすると、管理画面の外観→テーマから作成した子テーマが選べますので有効可します。
先ほど作成した子テーマフォルダの中に、ampというフォルダを作成しましょう。
４で作成したampフォルダの中に、ampプラグインフォルダの中にあるテンプレートファイル(plugins/amp/templates/)をコピーしてきます。これは、修正したいテンプレートファイルだけで良いです（singleやfooterなど）。
3で用意した子テーマの中のfunction.phpをカスタマイズしていきます。
下記のように記載します。内容は、変更したいテンプレートファイルを子テーマから１つずつ持ってきて親テーマを置き換えています。
<?php
//記事ページの変更
add_filter( 'amp_post_template_file', 'single_amp_set_custom_template', 10, 3 );
function single_amp_set_custom_template( $file, $type, $post ) {
if ( 'single' === $type ) {
$file = dirname( __FILE__ ) . '/amp/single.php';
}
return $file;
}
//フッターの変更
add_filter( 'amp_post_template_file', 'footer_amp_set_custom_template', 10, 3 );
function footer_amp_set_custom_template( $file, $type, $post ) {
if ( 'footer' === $type ) {
$file = dirname( __FILE__ ) . '/amp/footer.php';
}
return $file;
}
//cssの変更
add_filter( 'amp_post_template_file', 'css_amp_set_custom_template', 10, 3 );
function css_amp_set_custom_template( $file, $type, $post ) {
if ( 'style' === $type ) {
$file = dirname( __FILE__ ) . '/amp/style.php';
}
return $file;
}
その他カスタマイズの方法はAMPテンプレートの公式マニュアルが詳しいです。
▼amp-wp/readme.md at master ・ Automattic/amp-wp ・ GitHub
github.com/Automattic/amp-wp/blob/master/readme.md
今回連載3回目、4回目でAMP導入における設定や作業内容についてまとめました。
「WordPressのAMPプラグインを使えばAMP化は簡単」と言われますが、実際には細かいところでうまく動作しなかったり問題が生じたりすることがあります。技術力がある人がいれば作業自体には問題はありませんが、導入作業にかける時間と労力、それに対する効果を考えると、やはりAMP化はよく考えた方がよいと思います。
次回はいよいよ最終回です。最終回はAMPを導入したあとの運用についてまとめます。
「ムダな情報で頭脳を消耗することなく考える時間を確保する」
ウェブのノウハウだけに限らず、広告やマーケティング全般の知識、時には組織論や時事に至るまで、最先端や未来予測などみなさんにとって本当に必要な情報だけをお届けします。
