【WordPress】AMP対応の自作テーマを作ってみる#1

『特化型雑記ブログはビジネスモデルとして成り立つのか？』の記事でも書いておりますが、AMPに対応したテーマを自作したいと思います。

どうして自作なのかというと、プラグインや他人が作ったテーマを使うよりも管理がしやすく技術の向上にもつながるから！　というのが理由ですね(´ω`)

では早速いってみましょう。

一番最初に個別投稿をAMPに対応させる

AMPに対応させるということで、記事を書いて投稿した時にAMPに対応していないことには何も始まりません(;´Д｀)

よって、メインのページよりも先に記事の投稿だけ出来るように個別投稿ページの投稿部分を完成させる必要があります。

サイドバーとか広告の位置であるだとか、そんなものは全て後回しで構いません。なぜならば、コーディングが終わった後にAMPに対応していません。出来ていませんでは話しにならないからです。

なので、色々検索をかけた結果……下記のサイト様を参考に、single.phpが吐き出すページをAMP対応にしてみました(´ω`)

参考サイト一覧

• 【WordPress】プラグイン無しでAMP（Accelerated Mobile Pages）に対応にする手順
• WordPressの投稿本文をAMP化する方法
• AMPをワードプレスにプラグイン無しで設定する方法

いや、もうぶっちゃけね、超面倒！

WordPress使っている人は素直にAMP対応しているテーマかプラグイン使ってAMP対応したら良いと思うよ本当に。

モバイルのときだけ勝手に飛ばしてくれるわけでもないし（私が確認出来てないだけの可能性あり）、記事を書くのもAMP対応ページとそうでないページが一緒だからJavaScript吐き出すプラグインも使えない。

投稿記事内にAMPに対応していない記述があればエラーでるしで、個人で対応とか正直アホのやることだと思いました(;´Д｀)

Font Awesomeを使用して装飾する

いくつかのサイトを調べて回ったところ、AMPページではウェブフォントが使えない＼(^o^)／ｵﾜﾀ　と記載されている方がいるのですが普通に使うことが可能です。

これが証拠画像となります。

嘘だと思う方は、このページのURL末尾に『?amp=1』を追加してAMP対応ページを表示させてみてください。Font Awesomeを使用しているのがわかると思います。

では何が使えるのかというと、『AMP HTML』のホワイトリストに載っているウェブフォントは使用可能です。

現在ホワイトリスト入りしているウェブフォントは

1. Typography.com
2. Fonts.com
3. Google Fonts
4. Font Awesome

の4つだと思うのですが、これ以降も増えていくと思いますので増えたことがわかれば追記してみようかなと思います(´ω`)

記事が投稿できるようになったらwebサイトの顔であるメインページを構築する

メインページはwebサイトの顔！

ということで、メインページを作っていきます。作っていきますが、普通のブログ風にしたのでは何の面白みもないので少し変わった形にしてみようと思います(´ω`)

上部に各親カテゴリー6個を設置し、その子カテゴリーに属する最新記事を一つずつ表示させるようにし、その下に広告。

新着記事やよく読まれている記事は更にその下に設置する形にしてみました。

この時点での『PageSpeed Insights』によるスコアは『モバイル:92,パソコン:93』ですので、速度的には全く問題ないでしょう(´∀｀*)

個別記事だとモバイルのスコアが”81″しか無いのが気になりますが、修正箇所を見ている限り最終的に90程度までは回復させることができそうな問題ばかりなので今は無視。

AMP対応の方はこの時点で”69”とスコア的には終わっているのですが、表示そのものはwi-fiに接続していないモバイル端末で見ても1秒とかからないので気にする必要はないでしょう。

メインページが出来たら記事を用意する！

現在（2017/05/17）の時点でこのサイトを訪れている人が見ればわかると思いますが、テスト用のページだらけです。

これでは、いけませんね？

というわけで、各ジャンルの記事を最低でも一つずつ用意します。この記事でしたら『web制作』の子カテゴリーにあたるので、この記事が完成したら一つテスト用の記事が減るわけです！

別にすこしずつ作っていくから記事なんか後回しでも……と思うかもしれませんが、ブログの運営をビジネスとして考えるならば『記事こそが商品』になるわけですし、商品を後回しにして開店してるとか頭おかしいでしょう(;´Д｀)

その頭おかしいことしているのが私なわけですが、そのあたりは仕方ありません。

なぜならば、ビジネス運用するけれど『これは雑記ブログなんだよ！』ってことです( ﾟДﾟ)y─┛~~

企業様のサイトを作るならローカルでしっかりテストしてやりますが、ローカルだけじゃわからないこともあるんです。

そういうのは自分でテストしておかないと、いざ企業様のweb制作するとなった時にｹﾞﾌﾝｹﾞﾌﾝ……となってしまいますからね(;´Д｀)

【超重要】記事を投稿したらAMP対応しているか確認する

Google神が公開しているページの中に『AMP Test – Google Search Console』というものがあります。

これは何ぞや？　というと、公開しているサイトがAMPに対応しているかどうかを確かめるためのもの。

これでエラーが出ているとせっかくAMPに対応させていもなんの意味もありません。ですので、エラーが出るようでしたら、エラー元を確認してしっかりと対策を練りましょう。

問題がなければ以下のように表示され、検索時にカルーセル表示されたときの確認もできます。

とりあえずこれでメインページと投稿記事用のページを制作することが出来ました。

まだまだ追加することはたくさんありますが、焦らずにじっくりやっていきましょう(´∀｀*)