簡単!ブログ用AMP対応テーマの作り方 – ワードプレス

今回、当オフィスのブログをAMP化するにあたっては、まず、ワードプレスを使用しております。

ただ、規則が厳格なAMPサイトにおいては、各種ライブラリやスタイルシートを読み込むワードプレスとの相性が悪く、ワードプレスにおけるAMP化は、AMPプラグインやAMP対応テーマを使うしかありません。

しかし、先のとおり私のAMPサイトはワードプレスサイトですがAMPプラグインやAMP対応テーマは使用しておりません。テーマから自作でありまして、かつ、一応AMP対応のテーマとなります。

ご覧の通り、いたって簡潔なテーマとなっております。テンプレートもindex.php、single.php、archive.phpの3つのみ。

index.phpの役割は、ブログ記事を新着順でメディアカードとして表示するテンプレート。

single.phpの役割は個別記事の表示用、archive.phpの役割はカテゴリーや月別の記事一覧表示用です。

実は、AMPプラグインやAMP対応テーマを使わなくとも、今回作成した簡単なブログ程度のものでありましたら、簡単にAMPテーマが作れます。

その理由、

  1. AMPではJavascriptは使えませんが、PHPタグの埋め込みが可能。
  2. AMPテンプレートは命名規則が緩やかで、拡張子も自由につけることができる。

つまり、AMPのルールに則ったヘッダーとフッターのみのテンプレートを作成し、ファイル名をindex.phpとして保存、コンテンツ部分にはthe_title()タグやthe_content()タグ、ワードプレスサブルーチン等を記述できるので、AMPテンプレートがワードプレステンプレートに早変わりなのです。

ただ、気を付けなければならないのは、AMPテンプレートは厳格なルールに基づいていなければならない点。余計なものを読み込ませるわけにはいきません。

ですので、基本的に今回のAMP化テンプレートは、ほぼAMPテンプレートそのままでありまして、ワードプレステーマとしての記述としては、記事タイトルや記事本文、アイキャッチ画像の各種出力タグの使用やWPルーチンの記述程度に留めております。wp_head()などの余計なファイルの読み込みにつながるような関数は一切使っておりません。

あと気を付けないといけないのはブロックエディターですね。ブロックエディタで作成した投稿ページは、単純な「段落」や「見出し」、「画像」を張っただけ程度のものでしたら問題はありませんが、AMPテンプレートでは外部スタイルシートを読み込むことができませんので、ワードプレスデフォルトのブロック用スタイルが読み込めません。なので、複雑にブロックを組み合わて作成したような投稿ページだと表示が崩れますし、それどころかほとんどのブロックは使えません。

また、画像ブロックで挿入した画像も、なるべく小さなサイズを指定しておかないと、AMPテンプレートのビューポートを突き破ってしまいます(AMPテンプレートタグだとresponsive指定ができるんですけどね)。

上記のような問題はありますが、とりあえず、見出しと文章、幅300px程度の小さな画像を並べた簡単な投稿ページであれば今回解説したAMP化方法で問題はありません。

ちなみに今回作成したAMP対応WPテーマのベースは、AMP公式サイトにある「The Scenic」というフリーのAMPテンプレートを使用しました。

「The Scenic」 の紹介ページはこちら

以上、是非お試しください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です