新着記事プロフィールmenu難しいことは知らなくていい、WordPressのAMP導入・カスタマイズの方法2017.10.23Wordpressこんにちは。みなさま、ご自身のWordpressブログや、クライアントワークで、「AMP」は導入しましたでしょうか。僕はつい先日、テック系のオウンドメディアの構築に携わり、「AMPとか入れてや」ということで、「なんとなく知ってたけど、AMPって詳しくはなんぞや」というところから調べてみましたが、いかんせん仕事が詰まる...こういうとき、灯台下暗し。ミッションは「AMPを導入(あと、見た目をカスタマイズ)」することですね。本記事では、AMPとは?は軽めに触れておいて、そそくさとWordpressのAMP導入とカスタマイズの方法をご紹介いたします!詳しいことは割愛しますので、学びを深めたい方は改めて別の記事をご参照ください。記事の対象は、wordpress初級〜中級ぐらいの方。AMPを有効化するだけなら初心者の方でもイッパツなんですよ。Pages」の略称で、Googleが実装した、ユーザーにコンテンツを最速で届けるための規格です。人がサイトの閲覧を諦める、という調査結果も決して大げさな話ではありません。Pages(AMP)プロジェクトを開始しました。引用:https://webmaster-ja.googleblog.com/2016/09/8-tips-to-amplify-your-clients.htmlhtmlタグや、CSSの記法、更にはJSの規制が厳しく決められてます。あれはいいけど、これはダメ、などがあってとても厄介です。タグの制限などについては以下のリンクに詳しく書かれています。blog.jxck.ioAMPはコンテンツを配信する「記事ページ」を対象としていて、サイトのトップページやSNSなどには大きな効果はないとのことです。「TOPページをAMPにすれば早くなるじゃん?」というのは不可能ですのでご注意を。(2017年10月現在)AMPといえば、モバイル端末で検索した際の、検索結果一覧のカルーセルスライダー表示をぱっと思い浮かべる方も多いと思いますが、これもAMPを導入すればカルーセルスライダーに必ず表示されるわけではありません。条件を満たした場合のみ、この場所に表示されます。q-Az記事をみると、記述の条件をクリアした上で、ニュース性のある記事で3日以内の投稿、かつ、ビッグワードである必要がある、との見解だそうです。WordPressブログにAMPを適用するでは、実践に移ります。プラグインを使います。出てきますが、以下のアイコンのものをインストールしてください。適用するだけで、完了です。記事に対しAMP専用のアドレス(記事URL〜〜/amp/)でAMP用に組み替えられたページが生成されます。これだけでもOKです。アクセスして表示を確かめてみましょう。テスト環境ですが、当ブログのレスポンシブ表示時が左、AMPプラグイン適用後が右になります。意外と忘れがちなのですが、AMPのデバッグ方法を書いておきます。コンソールで見るブラウザのコンソールで確認する手段です。URLの「記事URL〜〜/amp/」最後に「記事URL〜〜/amp/#development=1」とつけます。するとコンソールに以下のような記述が出ます。元のページが見れていれば、よほど何かが無い限り、正常に機能することでしょう。Webアプリでバリデーションする記事URLをコピーして、以下のリンクにて確認できます。PASS」と緑色の文字で出てきます。Validatorリファレンスを読む結構リファレンスも充実しています。エラーの内容などはここを参照してください。AMPリリース前には確認しておきましょう。カスタマイズに移ります。AMPプラグインのカスタマイズ色々と方法があるようですが、今回はテンプレートフォルダを作る方法をご紹介します。これが個人的には管理しやすいような気がします。AMPテンプレートフォルダを作るプラグインディレクトリwp-content/plugins/amp/templatesここにあるファイルが、見た目をダサくしている原因です。AMPプラグインフォルダのtemplatesの中身をコピーします。テーマフォルダに移動し、任意のディレクトリ名(「_amp」としました)を作ってペースト。AMPディレクトリをWordpressテーマディレクトリにちなみに/templatesディレクトリにあったファイルは、ざっくりと、以下のような役割です。featured-image.phpfigureタグで囲まれたメインヴィジュアル。