購入者ログイン購入者ログイン2016年11月7日WordPressのAMP対応はプラグインを入れるだけじゃダメ!中島たくみちWordPressWordPressサイトのAMP対応をやってみました。AMPというのはスマホ用にページを高速に表示するための規格のことです。仕様に従ったHTMLを用意する必要があります。サイトをAMPに対応させたからと言って検索順位が上がるわけではありません。Googleのモバイル版の検索結果ページにカルーセル表示されることがあります。上記の記事にかかれているように、タイミングによってはビッグワードで表示されることもあるとか。WordPressをAMPに対応させるWordPressのサイトの場合はどうすればいいのかというと、AMPに対応させるためのプラグインをAutomattic社が公開しています。このプラグインをインストールして有効化するれば、とりあえずAMP対応は完了です。記事本文以外の要素が思いっきり削られてしまいます。何かビジネス用のサイトを運営しているのであれば、プラグインを入れるだけでOK...とはいきません!そこで今回、WordPressのAMP対応のためにやったことを紹介したいと思います。1.表示チェックAMPプラグインを有効化したら、きちんとAMP用のページが表示されるかどうかを確認しましょう。投稿のURLの後ろに?amp=1もしくは/amp/をつけるとAMP用のページが表示されます。http://example.com/post1/?amp=1http://example.com/post1/amp/デフォルトだと、以下のような青色のヘッダーのページになります。2.念のためにエラーチェックまずはデベロッパーツールなどでエラーが出ていないかを確認します。Chromeの場合は、AMP用のページを表示している画面で、適当なところを右クリックして「検証」をクリックするとデベロッパーツールが起動します。「console」で上記のように表示されていて、エラーが出ていないことを確認します。Consoleでもエラーがないか見ておきましょう。Pages」で、正常に登録されているかが確認できます。配色をカスタマイズ多くの人が気になるのがAMP用のページのデザインではないでしょうか。ヘッダーの色をサイトのテーマカラーに合わせたいものです。実は、AMPプラグインにはWordPressのダッシュボードから配色を変更する機能があります。ダッシュボードの左側のメニューの「外観」>「AMP」をクリックするとカスタマイズ画面が開きます。このように、ヘッダーの文字色と背景色をプレビューしながら変更することが出来ます。カラースキームがLightとDarkの2種類があります。Analyticsのコードを埋め込むアクセス解析用のコードの埋め込みもやり直さないといけません。ここから先はちょっと面倒です。Analytics用のコードを埋め込む方法としては、AMPプラグインのテンプレートファイルに埋め込むWordPressのフックを使って埋め込むの2種類があります。今回はテンプレートファイルには触らずに、フィルターフックを使うことにしました。コードを記述する場所ですが、一般的には使用しているWordPressテーマのfunction.phpということになります。使っているテーマが更新された場合は変更した内容が上書きされてしまうのであまりよろしくありません。(自作のテーマを使ってる場合は問題ありません)ですので、子テーマを作ってそちらのfunction.phpを編集するのが正しい運用だと思います。Functionsというプラグインを使って、コードを追加しました。$analytics;}アカウントの部分は編集して下さい。5.日本語フォントを正しく指定するデフォルトだと日本語のフォントが指定されていないので、明朝体での表示されてしまいます。これも、先程と同様にフックを使ってCSSを追加することで解決できます。<?php}フォントの設定はモダン日本語フォント指定を参考にさせていただきました。6.記事下にバナー画像を追加する最後に、記事本文のすぐ下にバナー画像を追加してみます。アクセスが増えても、CTAが無ければあまり意味がありませんので...。以下のようにフックを使って、記事本文の後ろにHTMLを付け加えています。$content;}imgタグではなくてきちんと、amp-imgタグを使っています。普通にimgタグを使っても自動的に変換されると思いますが一応。余談ですが、AdSenseの広告を埋め込むのはもうちょっと面倒そうです。まとめこんな感じでAMP対応をしました。微妙に英語の表記が残ってたりしますが、とりあえず個人的に必要だと思った手順は以上のとおりです。AMPを試してみたいというだけなら、プラグインを入れるだけでもOKです。設定しようと思うとそこそこ大変ですね。AMPプラグインに機能追加されてもっと簡単に設定できるようになったら、今回紹介した内容は意味がなくなるなーと思いつつ、現状ではこんな感じです。コンテンツ販売やマーケティングのためのツールを開発しています。この記事が気に入ったらいいね!をクリックFacebookページで情報を発信しています。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。