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

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

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

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

AMP機能を有効にする

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

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

外観からテーマカスタマイザーの設定をする_thumb_thumb

あとは「AMP」項目にある「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のテーマカスタマイザーで設定した値が利用されます。

WordpressテーマSimplicityを利用するために、まず行う設定について解説します。 追記:以下の記事も書きました。...

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

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

ブログパーツ

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

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

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

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

カエレバのAMPスタイル

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

もし、対応して欲しいブログパーツなどがありましたら、フォーラムの方に「適用して欲しいスタイルシート」をご記入の上書き込んでいただければ、対応しようと思っています(対応できそうなものは)。ただ、スタイルはテーマに合わせてこちら側で変更する可能性もありますし、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などでチェックして、原因が本文部分に原因がある場合は、エラーメッセージに従って修正してみてください。

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

先日、WordpressテーマをAMP対応させてみました。 ご存知の通りAMPは、非常に厳しい仕様に準拠する必要があります。 テーマの編集過程でも、ちょっとしたことでもすぐにAMPエラーが出てしまいました。ですので頻繁に「このページ
スポンサーリンク
アドセンス(大)

コメント

  1. オサレ より:

    オツカレ様です
    プラグインなしでAMP対応ですか!!?

    PCでAMPページを見るにはどうすれば良いのでしょうか?

  2. わいひら わいひら より:

    この記事の最後の行で書かれているChrome拡張のAMP Validatorを使うのが一番楽かと思います。
    使い方は、以下に書かれています。
    Google ウェブマスター向け公式ブログ: Accelerated Mobile Pages の問題を効率的にチェックするには

    ブラウザで表示を見るには、アドレスバーでURLの最後に「?amp=1」を追加してください。既に、URLの中に?がある場合は、「&amp=1」を追加します。
    開発ツールで、エラーメッセージも調べるには、「?amp=1#development=1」「&amp=1#development=1」のように追加します。

  3. わいひら わいひら より:

    ちなみに、当サイトの投稿ページだと、以下のようなURLで表示できます。
    https://wp-simplicity.com/simplicity-amp/?amp=1
    https://wp-simplicity.com/simplicity2-3-1/?amp=1#development=1

  4. いつもお世話になっております。
    試しにAMP使ってみたのですがに切り替えるとフォローボタンが消えてしまいます。
    こちらのページでも試したのですがやはりフォローボタンは消えているようです、表示する方法はありますでしょうか?

    • わいひら わいひら より:

      今のところ、AMPページでフォローボタンが消えているのは仕様です。
      というのも、AMPページでは、Font Awesomeのようなアイコンフォントが使用できないので、今までのようなアイコンボタン表示が出来ないからです。
      今のところ表示させるには、single-amp.phpを自前でカスタマイズして、ボタンを追加するしかないです。

  5. Simplicity愛用者 より:

    いつもありがとうございます。Simplicity使わせて頂いています。
    Twitter対応となっているのですが、Twitterのサイトに埋め込むコードをそのまま張り付けると、ampページで画像が表示されません。

    <blockquote…

    上記のコードを付け足すと表示されるのですが、毎回投稿ページを編集しようとすると上記コードが消えてしまいます。
    解決策をご教示くだされば幸いです。
    宜しくお願い致します。

  6. Simplicity愛用者 より:

    お返事ありがとうございます。
    下記URL貼り付けましたので、ご確認お願い致します。。
    http://kaigaidramalove.info/2017/05/26/better_call_saul_s03e07/

    • わいひら わいひら より:

      通常、Twitter公式の埋め込みは、以下のようになっていますが、どのように埋め込みをされているのでしょうか?

      <blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">Q&amp;A: Mark Proksch on why Pryce never seems to learn his lesson. <a href="https://twitter.com/hashtag/BetterCallSaul?src=hash">#BetterCallSaul</a> <a href="https://t.co/Lb1vOdAaYm">https://t.co/Lb1vOdAaYm</a> <a href="https://t.co/6EhmaCJgwY">pic.twitter.com/6EhmaCJgwY</a></p>&mdash; Better Call Saul (@BetterCallSaul) <a href="https://twitter.com/BetterCallSaul/status/867747186599239680">2017年5月25日</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
      • Simplicity愛用者 より:

        真ん中にレイアウトしようと”tw-align-center”を公式のコードの中に入れた事が原因でした。取り外したらAMPページでも表示されました。

        あと、次回からはフォーラムの方に質問させて頂きます。色々と私の確認が不足しており、ご迷惑をおかけいたしました。

        お世話になり、ありがとうございました。