WordPressでAMP（Accelerated Mobile Pages）対応

このサイトのようにモバイルを意識して構築した場合に、AMPの必要性は個人的には若干疑問（現状では、表示速度やビジュアル性が低下する場合が多々ある）なんですが、Googleが対応を推奨している以上、AMPを無視するわけにもいきません。

現状、手間をかけてAMP対応はしたくないので、プラグイン「Accelerated Mobile Pages」を使用します。有料の機能/プラグインが必要な部分は通常ページへの案内をしてそちらへのリンクを掲載で対応して、お金も手間も倹約します。（開発者の為に余裕がある方は、有料の機能/プラグインもどんどん使ってあげてください。）

ampプロジェクトのプラグイン「AMP」ではなく「Accelerated Mobile Pages」をインストール

最初、Googleも案内するampプロジェクトの「AMP」をインストールしてみましたが、単独では使用できず追加のプラグインを要求されるし、設定方法も分り難いので、設定が分かり易い「Accelerated Mobile Pages」を使用します。

Accelerated Mobile Pagesの設定は簡単

プラグインをインストールして、有効にした後、AMPforWP OptionsのSettingsとDesignを設定するだけ、沢山設定がありますが、とりあえずわかるところだけでも設定して、＜your url＞/ampを見てみましょう！

Accelerated Mobile Pagesの設定の注意点

Custom CSSに通常ページのCSSを貼り付けるだけで、通常ページに似せたデザインにできますが、使えないCSSがあります。Custom CSSに貼り付けると文法チェックされて、無効なものは赤の△、注意が必要なものが黄色の△で表示されますので、最低限、赤の△は、修正or削除します。

Google Search consoleで「重大な問題のある AMP ページ」と表示されてしまいます。

コメントに禁止CSSと類似の記載があっても「重大な問題のある AMP ページ」となってしまうようなので、コメントはすべて削除しておくと安全かもしれません。

設定後はしばらくは、注意してGoogle Search consoleを見ましょう。もし、「重大な問題のある AMP ページ」と表示されてしまったら、速やかに修正しましょう。

その他、AMPページ作成でのポイント

各ページをAMP対応に変更したい場合は、SettingのPage Builder / Legacy Page Builder (widgets)を有効にすると各ページでAMP専用のページが簡単に作成できるようになります。

モバイルページはAMPを標準としたい場合は、SettingのAdvance Settings / Mobile Redirectionを有効にするとモバイルからのアクセスでは自動的にAMPページが表示されるようになります。ただ、この場合はSEO設定などもちゃんとしておかないとモバイルファーストとなったときにSEO的に不利となると思われます。ちなみに、このRedirection設定をしなくてもGoogle Search consoleはAMPページを認識します。

実は、まだこのサイトも対応中の段階で、ここでの記載は最終的に変更される可能性があります….(^-^;

Accelerated Mobile Pages設定項目について（追加）

SettingsのStructured Dataは設定しましょう。この設定をしてないと構造化データが不完全となってしまいます。

pure.cssでレスポンシブ対応するなら、flexを使いましょう。

pure.cssで素直にレスポンシブ対応Gridだけで構築すると

こんな感じにHTMLに記述された順番にしか並びません。

例えば、BCAの順番に縦に並ぶようにしたい場合、どうしたらよいでしょうか？

pure.cssでpure-gで括るとbox/flexbox/flexの定義がされているので簡単！

以下のような感じで、それぞれのボックスにオーダー番号を付けてあげるだけで、簡単に並び替えが出来ちゃいます。

-webkit-box-ordinal-group:2;
-ms-flex-order:2; 
-webkit-order:2; 
order:2;

で、これを画面サイズごとにCSSに定義していくと画面サイズごとに違った順番で表示の変更も可能となります。

A:1、B：2、C:3

A:3、B:1、C:2

A:2、B:1、C:3

こんな感じにも簡単にできます。

弊社作成中のテーマ「pureframe」では、以下のように使っています。分かってしまえば、簡単ですね。

@media screenでの定義順番は注意が必要で、CSSの基本ルールで最後の定義が有効になりますので適用範囲の「デフォルト、広いー＞狭い」とします。

/*レスポンシブデザイン　表示順番 */
.container-inner > .main-left ,
.container-inner > .main-left-r {
 -webkit-box-ordinal-group:3;
 -ms-flex-order:3;
 -webkit-order:3;
 order:3;
 }
.container-inner > .side-lr ,
.container-inner > .side-l ,
.container-inner > .side-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-right {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
@media screen and (min-width: 35.5em) {
.container-inner > .main-left {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
.container-inner > .side-l {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-left-r {
 -webkit-box-ordinal-group:3;
 -ms-flex-order:3;
 -webkit-order:3;
 order:3;
 }
.container-inner > .side-lr ,
.container-inner > .side-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-right {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
}
@media screen and (min-width: 48em) {
.container-inner > .main-left {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .side-l {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
.container-inner > .main-left-r {
 -webkit-box-ordinal-group:3;
 -ms-flex-order:3;
 -webkit-order:3;
 order:3;
 }
.container-inner > .side-lr ,
.container-inner > .side-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-right {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
}
@media screen and (min-width: 64em) {
.container-inner > .main-left {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-left-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .side-lr ,
.container-inner > .side-l {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
.container-inner > .side-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-right {
 -webkit-box-ordinal-group:3;
 -ms-flex-order:3;
 -webkit-order:3;
 order:3;
 }
}