WordPressテーマCocoonのAMPページで最低限のCSSのみを適用させる

　GoogleとTwitterが共同開発しているフレームワークに、AMP(Accelerated Mobile Pages)があります。これは、モバイル端末でWebページを高速に表示するための色々を定めたものです。

　WebページをこのAMPに対応させようとすると、高速表示を実現するための様々な制約を受けることになります。ただし、WordPressのようなCMS (Content Management System: コンテンツ管理システム) を利用していれば、そちらで吸収してくれることが大半であるため、基本的にこの制約を殊更気にする必要はありません。「AMP対応」をうたっているテーマを利用することでだいたい済んでしまうからです。

　僕が本ブログで利用しているWordPressテーマCocoonも、このAMP対応をうたっています。

ページが存在しません | Cocoon
WordPress無料テーマ
wp-cocoon.com

　それで、ブログ開設当初からこのサイトでもAMP対応をONにした状態で利用していたのですが、コンテンツが増えるに従って自分好みにカスタマイズしていたら、Google先生に怒られるようになってしまいました。

　Google Search Consoleというサービスを使うと、自サイトがどのようにGoogleにインデックスされて、どういった検索流入があるかを詳しく見ることができます。その中で「お前このAMPページはおかしいだろ」と怒られてしまったのです。

　レイアウトをカスタマイズするべくCSSをゴリゴリいじってたら、AMPの制約のひとつである「CSSの許容サイズは50KBバイトまで」というルールにひっかかってしまったようです。

　さて困ったぞと。

スポンサーリンク

CSSを適用するとエラーになるし、適用をはずすとレイアウトが崩れてしまう

　Cocoonではこの制約への対処として、子テーマやスキンのスタイルをAMPページに適用させるかどうか選ぶことができるようになっています。

　しかしここでスタイルのチェックを外してしまうと、カスタマイズしたCSSが完全に適用されなくなってレイアウトはガッタガタ。見れたもんじゃなくなってしまいます。

　Cocoonでは「親テーマのスタイル＜子テーマのスタイル＜スキンのスタイル」の順に優先度が設定されているので、使っていないスキンのスタイルをAMP専用にして、AMPページではそちらだけを有効化することで、「AMPページでも最低限のレイアウトを保持させる」という使い分けはできそうです。でも、本来スキンはそういう使い方をするものじゃないはずだから、後で見直した時に混乱しそう。

　半年後の自分が混乱しそうないじり方はやりたくないんですよね…。

　それよりも、「AMPページカスタマイズ用にamp.css、子テーマのスタイルはstyles.css」という2つのファイルが用意されているわけですから、この棲み分け方を調整してなんとかできたらなあ…と。
　今は「AMPページは、個別対応したいスタイルをamp.cssに記述して、styles.cssとamp.cssを両方読み込む」仕様になっています。これを、「AMPページはamp.css、通常のページはstyles.cssを読み込む」にできるとわかりやすい気がする。

　などと思っていたら、同じ様な質問をあげている人がいました。

AMPページで読み込むCSSを選択したい
質問というよりは要望になると思いますのでこちらに失礼します。 1.4.3からAMPページは子テーマのstyle.cssを読み込むようになりました。 子テーマのスタイルシートを読み込まない設定もできますが、その場合、親テーマのstyle.cs...
wp-cocoon.com

　フック関数があるのか。じゃあいい加減慣れてきたからそれで対応することにしよう。

フック関数を用いて不要なCSSを排除する

　まずそもそもの挙動を確認しましょう。AMPページの時に、子テーマのスタイルを適用している部分の処理は親テーマのlib/amp.phpにあります。

///////////////////////////////////////////
//子テーマのスタイル
///////////////////////////////////////////
if ( is_child_theme() && is_amp_child_theme_style_enable() ) {
  //通常のスキンスタイル
  $css_child_url = get_stylesheet_directory_uri().'/style.css';
  $child_css = css_url_to_css_minify_code($css_child_url);
  if ($child_css !== false) {
    $css_all .= apply_filters( 'amp_child_css', $child_css );
  }
  //AMPのスキンスタイル $css_child_url = get_stylesheet_directory_uri().'/amp.css';
  $child_amp_css = css_url_to_css_minify_code($css_child_url);
  if ($child_amp_css !== false) {
    $css_all .= apply_filters( 'amp_child_amp_css', $child_amp_css );
  }
}

　AMPページで子テーマのCSSを適用するフラグが立っている時は、amp_child_cssフック関数でstyles.cssを、amp_child_amp_cssフック関数でamp.cssをそれぞれ読み込んで$css_all文字列に追記していっているようです。

　なので、上の開発元掲示板で書かれているように、amp_child_cssフック関数の中身を空の文字列を返すようにしてやると、AMPページで読み込まれる子テーマのstyles.cssファイルは空っぽということになります。

　というわけで下記をfunctions.phpに追加してやる。空文字列を返すだけのフック関数です。

////////////////////////////////////////////////////////////
// AMPページでは子テーマのCSS読み込みをamp.cssに限定させる
////////////////////////////////////////////////////////////
add_filter( 'amp_child_css', function(){ return ''; });

　一方、その後のamp_child_amp_cssフック関数の方ではamp.cssを普通に読み込んでいます。したがってこのファイルに「AMPページの時に最低限適用させたいスタイル」を記述しておけば、AMPのCSSサイズ制限を回避しながら、最低限の見栄えを保つことができるようになるわけです。

　とりあえず完全にレイアウトが崩れてしまったり、モバイルで表示されるべきではないものが表示されてしまっているといった箇所がいくつかあるので、そうした致命的なところだけ対処しておきました。
　サイズ制限の中で、もう少し調整できそうだったらおいおい詰めていこうかと思います。

コメント

スポンサーリンク