SimplicityのAMP機能の使い方。カスタマイズ方法など。動作不良時のガイドライン既知の不具合サポート対象外のものホーム設定いろいろカスタマイザー設定SimplicityのAMP機能の使い方。カスタマイズ方法など。テーマ改造シェアするLINE!Simplicity2.3.1からAMPに対応しました。以下では、簡単にSimplicityでのAMP機能の使い方を説明します。言っても、そこまで難しいことをする必要はないかと思います。スポンサーリンクAMP機能を有効にするまずSimplicityで、AMP機能を利用するには、テーマカスタマイザーで機能を有効にする必要があります。カスタマイズ」を選択してください。あとは「AMP」項目にある「AMPの有効化」にチェックを入れてください。Simplicityは、これだけでAMPが利用できるようになります。機能を有効化することによって、投稿ページに対してAMPページが作成されます。固定ページではAMPページは作成されないのでご注意ください。現在のところこの「AMP機能」はβ機能となるため、多少の不具合が出る可能性があるのでご了承ください。SimplicityがAMP対応しているSNS埋め込み、ツールなどAMP機能公開時点で、SimplicityがAMP対応しているもの、以下になります。SNS・サービスの埋め込み現在一応の動作確認ができているのは以下のサービスです。TwitterInstagramYouTubeVineFacebook動画TED動画GoogleマップSpotifyのプレイリストSimplicityでは、上記サービスのデフォルトの埋め込みタグを置換して、AMPタグ化します。一応、iframe自体にも対応はさせているのですが、widthやheight属性などで幅と高さを設定していないと、AMPエラーになると思います。ツール以下のサービスに対応しています。AdSenseAnalyticsでの計測、AdSenseに対応しています。Analyticsについては、Simplicityのテーマカスタマイザーで設定した値が利用されます。Simplicityの初期設定・おすすめの設定Simplicityを利用するための初期設定について解説します。23:02AMPページに対するアドセンス設定については、以下を参照してください。SimplicityのAMPページに表示するアドセンスの設定方法Simplicity2.3.1からAMPに対応しました。00:02ブログパーツ以下のブログパーツのスタイルをSimplicity側で設定しています。JSプラグインアプリーチカイモモAMPの制約により、style属性を全て除去しています。style属性などでスタイルしてあるブログパーツなどの表示が崩れる必要があります。上記のブログパーツの場合、Simplicityが指定したスタイルが適用してあります。カエレバの場合はこんな感じ。上で挙げた、ブログパーツ以外は、表示が崩れる可能性があるので自前で設定する必要があるかもしれません。子テーマでのスタイル設定方法は、次項を参照してください。対応して欲しいブログパーツなどがありましたら、フォーラムの方に「適用して欲しいスタイルシート」をご記入の上書き込んでいただければ、対応しようと思っています(対応できそうなものは)。スタイルはテーマに合わせてこちら側で変更する可能性もありますし、AMPの制約(CSSの総容量は50KBまで)を超えるようになる場合は、採用できない可能性もあるのでご了承ください。AMPスタイルのカスタマイズSimplicityでは、ユーザーが独自にAMPのスタイルをカスタマイズ出来るように、子テーマ側からでもスタイルを変更できる仕組みを用意してあります。子テーマ側から、AMPスタイルを変更するには、子テーマフォルダ直下に「amp.css」を作成してください。作成style.cssfunctions.php...(略)「amp.css」に独自のスタイルを書くことで、AMPページのstyleタグ内で読み込まれ、スタイルが反映されます。20161002」も公開されているので、新しく利用する場合は、こちらの子テーマをダウンロードして利用してください。Simplicity2の子テーマテーマをカスタマイズするなら親テーマの直接編集はお勧めできません。18:02子テーマは、バージョンアップしたからといってアップデートする必要はありません。テンプレートファイルを直接カスタマイズする場合は「single-amp.php」ファイルを編集してください。AMP機能を利用する上での注意点AMPは、とにかく制約の多いWEB上の仕組みです。したことですぐにAMPエラーとなり、GoogleがAMPページとしては認定してくれなくなります。Simplicityでは投稿本文に以下のような処理を行っているので、スタイルが変わってしまったり、動作が変わってしまったりする可能性があります。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エラーは出ると思うので、そこらへんはご了承ください。Validatorなどでチェックして、原因が本文部分に原因がある場合は、エラーメッセージに従って修正してみてください。チェック方法については以下などを参照してみてください。Validator」の使い方)先日、WordpressテーマをAMP対応させてみました。ご存知の通りAMPは、非常に厳しい仕様に準拠する必...nelog.jpGitHubリポジトリ不具合等ありましたらGitHubに、ご連絡いただけると幸いです。Validatorを使うのが一番楽かと思います。使い方は、以下に書かれています。問題を効率的にチェックするにはブラウザで表示を見るには、アドレスバーでURLの最後に「?amp=1」を追加してください。URLの中に?がある場合は、「&amp=1」を追加します。開発ツールで、エラーメッセージも調べるには、「?amp=1#development=1」「&amp=1#development=1」のように追加します。PMちなみに、当サイトの投稿ページだと、以下のようなURLで表示できます。AMいつもお世話になっております。試しにAMP使ってみたのですがに切り替えるとフォローボタンが消えてしまいます。PM今のところ、AMPページでフォローボタンが消えているのは仕様です。Awesomeのようなアイコンフォントが使用できないので、今までのようなアイコンボタン表示が出来ないからです。今のところ表示させるには、single-amp.phpを自前でカスタマイズして、ボタンを追加するしかないです。PMいつもありがとうございます。Simplicity使わせて頂いています。Twitter対応となっているのですが、Twitterのサイトに埋め込むコードをそのまま張り付けると、ampページで画像が表示されません。<blockquote...上記のコードを付け足すと表示されるのですが、毎回投稿ページを編集しようとすると上記コードが消えてしまいます。解決策をご教示くだされば幸いです。PM実際のページのソースコードを見たいので、該当ページのURLを貼り付けていただければ助かります。PMお返事ありがとうございます。下記URL貼り付けましたので、ご確認お願い致します。PM真ん中にレイアウトしようと”tw-align-center”を公式のコードの中に入れた事が原因でした。取り外したらAMPページでも表示されました。あと、次回からはフォーラムの方に質問させて頂きます。私の確認が不足しており、ご迷惑をおかけいたしました。お世話になり、ありがとうございました。PMご報告ありがとうございます!修正させていただきました。