SimplicityのAMP機能の使い方。カスタマイズ方法など。

Simplicity2.3.1からAMPに対応しました。

以下では、簡単にSimplicityでのAMP機能の使い方を説明します。

とは言っても、そこまで難しいことをする必要はないかと思います。

スポンサーリンク

AMP機能を有効にする

まずSimplicityで、AMP機能を利用するには、テーマカスタマイザーで機能を有効にする必要があります。

WordPress管理画面から「外観 → カスタマイズ」を選択してください。

あとは「AMP」項目にある「AMPの有効化」にチェックを入れてください。

Simplicityは、これだけでAMPが利用できるようになります。機能を有効化することによって、投稿ページに対してAMPページが作成されます。固定ページではAMPページは作成されないのでご注意ください。

現在のところこの「AMP機能」はβ機能となるため、多少の不具合が出る可能性があるのでご了承ください。

SimplicityがAMP対応しているSNS埋め込み、ツールなど

AMP機能公開時点で、SimplicityがAMP対応しているもの、以下になります。

SNS・サービスの埋め込み

現在一応の動作確認ができているのは以下のサービスです。

  • Twitter
  • Instagram
  • YouTube
  • Vine
  • Facebook動画
  • TED動画
  • Googleマップ
  • Spotifyのプレイリスト

Simplicityでは、上記サービスのデフォルトの埋め込みタグを置換して、AMPタグ化します。

一応、iframe自体にも対応はさせているのですが、widthやheight属性などで幅と高さを設定していないと、AMPエラーになると思います。

ツール

以下のサービスに対応しています。

  • Google Analytics
  • Google AdSense

Analyticsでの計測、AdSenseに対応しています。

Analyticsについては、Simplicityのテーマカスタマイザーで設定した値が利用されます。

Simplicityを利用するための初期設定について解説します。 とりあえず、【必須】の設定だけ行えばサイトを始めることができ...

AMPページに対するアドセンス設定については、以下を参照してください。

Simplicity2.3.1からAMPに対応しました。 以下では、AMPページで表示するAdSense広告の設定方法を紹介したいと思い...

ブログパーツ

以下のブログパーツのスタイルをSimplicity側で設定しています。

AMPの制約により、style属性を全て除去しています。

ですので、style属性などでスタイルしてあるブログパーツなどの表示が崩れる必要があります。ただ、上記のブログパーツの場合、Simplicityが指定したスタイルが適用してあります。

例えば、カエレバの場合はこんな感じ。

上で挙げた、ブログパーツ以外は、表示が崩れる可能性があるので自前で設定する必要があるかもしれません。子テーマでのスタイル設定方法は、次項を参照してください。

もし、対応して欲しいブログパーツなどがありましたら、フォーラムの方に「適用して欲しいスタイルシート」をご記入の上書き込んでいただければ、対応しようと思っています(対応できそうなものは)。ただ、スタイルはテーマに合わせてこちら側で変更する可能性もありますし、AMPの制約(CSSの総容量は50KBまで)を超えるようになる場合は、採用できない可能性もあるのでご了承ください。

AMPスタイルのカスタマイズ

Simplicityでは、ユーザーが独自にAMPのスタイルをカスタマイズ出来るように、子テーマ側からでもスタイルを変更できる仕組みを用意してあります。

子テーマ側から、AMPスタイルを変更するには、子テーマフォルダ直下に「amp.css」を作成してください。

  • simplicity2-child
    • amp.css ← 作成
    • style.css
    • functions.php
    • …(略)

「amp.css」に独自のスタイルを書くことで、AMPページのstyleタグ内で読み込まれ、スタイルが反映されます。

もう既に、「amp.css」ファイルが同胞された「simplicity2-child 20161002」も公開されているので、新しく利用する場合は、こちらの子テーマをダウンロードして利用してください。

テーマをカスタマイズするなら親テーマの直接編集はお勧めできません。 というのも、ダウンロードページで配布しているテーマファイル...
子テーマは、バージョンアップしたからといってアップデートする必要はありません。

テンプレートファイルを直接カスタマイズする場合は「single-amp.php」ファイルを編集してください。

AMP機能を利用する上での注意点

AMPは、とにかく制約の多いWEB上の仕組みです。

なので、ちょっとしたことですぐにAMPエラーとなり、GoogleがAMPページとしては認定してくれなくなります。

ですので、Simplicityでは投稿本文に以下のような処理を行っているので、スタイルが変わってしまったり、動作が変わってしまったりする可能性があります。

  • インラインのstyle=””で書き込まれているスタイルは取り除いている
  • target=””も取り除いている
  • onclick=””も取り除いている
  • <script>タグも取り除いている
  • <font>タグも取り除いている
  • Font Awesomeなどを使用していても表示されない

上記の処理により、AMPページでは、多少を見た目が変わってしまう可能性があるのでご了承ください。AMPエラーの出ないスタイルを指定するには、インライン属性を使わず、classを指定してamp.cssにスタイル指定してください。

また、投稿本文中に以下のような要素がある場合は、エラーが出る可能性があります。

  • IMGタグに「width=”XX”、height=”XX”」が指定されていない
  • iframeタグに「width=”XX”、height=”XX”」が指定されていない

基本AMPでは、img、iframeタグにはwidth・height属性で幅と高さを指定してやる必要があります。

ただ、ここまでやっても、要素や要素の設定状態によっては、AMPエラーが出ることがあります。

AMPとは、それだけ制約の厳しい機能なので「基本的にAMPエラーは出るもの」とでも思って最初は利用していただけると幸いです。AMPエラーになったからといって、SEO的にマイナスになるということは、ないと思ってるので。多分。

まとめ

こんな感じで、Simplicity2.3.1からβ機能ではありますがAMP機能を実装してみました。

ただ、実装してみると思っていた以上に、制約が厳しくWordpressを対応させるには結構苦労しました。が、テーマ部分は、おそらく対応できたと思います。

けれど、本文部分はユーザーさんが書くものです。コンテンツ内容にAMP制約から外れるものがあれば、AMPエラーは出ると思うので、そこらへんはご了承ください。

Google Search Console上などでエラーが出る場合は、AMP Validatorなどでチェックして、原因が本文部分に原因がある場合は、エラーメッセージに従って修正してみてください。

チェック方法については以下などを参照してみてください。

AMPのバリデーションエラーを手軽にチェックする方法のまとめです。Chrome拡張を使うのが最も簡単かと思います。
スポンサーリンク