AMP用と通常用とでcssを使い分ける

以前の記事 AMP ページでもサイトの印象が変わらぬ様 配色や装飾に必要なミニマムな css として amp.css を作成し 50KB 制限に収める手法を試みました ですが Cocoon の仕様では AMP ページでは amp.css style.css の両方を読み込むので却って css が増大してしまいました

回避策として スキンと子テーマとで css を区分してみたのですが スキン内の機能で完結していないため他の手法を考えてみました

check
  • カスタマイズは自己責任でお願いします。
  • wp-cocoon.comサイトのサポート対象外となります。
スポンサーリンク

<style amp-custom> の調整

AMP ページでは <style amp-custom> 内に css が記述されます そこで Cocoon ではどの様な処理で記述しているかを調べてみました

github.com/yhira/cocoon/

Cocoon GitHub ページから <style amp-custom> で検索 すると lib/amp.php にて記述されている事が判明 コードを拝見すると

 /////////////////////////////////////////// 
   // スキンのスタイル
   /////////////////////////////////////////// 
   if ( ($skin_url = get_skin_url()) && is_amp_skin_style_enable() ) {// 設定されたスキンがある場合
     // 通常のスキンスタイル
     $skin_css = css_url_to_css_minify_code($skin_url); 
     if ($skin_css !== false) { 
       $css_all .= apply_filters( 'amp_skin_css', $skin_css ); 
     } 
     //AMP のスキンスタイル
     $amp_css_url = str_replace('style.css', 'amp.css', $skin_url); 
     $amp_css = css_url_to_css_minify_code($amp_css_url); 
     if ($amp_css !== false) { 
       $css_all .= apply_filters( 'amp_skin_amp_css', $amp_css ); 
     } 
   } 

おぉ〜 どうやらココっぽい この辺りをカスタマイズできれば願いが叶うのでは?

lib 内のカスタマイズ

Cocoon lib カスタマイズ でググってみると ありました

手順通りに関数 今回の場合は generate_style_amp_custom_tag() をまるっとスキン内の functions.php にコピーし 該当部分を以下の様に変更しました

 /////////////////////////////////////////// 
   // スキンのスタイル
   /////////////////////////////////////////// 
   if ( ($skin_url = get_skin_url()) && is_amp_skin_style_enable() ) {// 設定されたスキンがある場合
     // 通常のスキンスタイル
     $skin_css = css_url_to_css_minify_code($skin_url); 
 //    if ($skin_css !== false) { 
 //      $css_all .= apply_filters( 'amp_skin_css', $skin_css ); 
 //    } 
     //AMP のスキンスタイル
     $amp_css_url = str_replace('style.css', 'amp.css', $skin_url); 
     $amp_css = css_url_to_css_minify_code($amp_css_url); 
     if ($amp_css !== false) { 
       $css_all .= apply_filters( 'amp_skin_amp_css', $amp_css ); 
     } elseif ($skin_css !== false) { 
       $css_all .= apply_filters( 'amp_skin_css', $skin_css ); 
     } 
   } 

スキン内に amp.css が存在すればそれを使用し 存在しない場合のみ style.css が存在すればそれを を使用します

結果

AMPテストOK

無事に AMP テストをパスする事ができました

この手法を採れば

  • AMP用の最低限なカスタマイズ
  • 通常用の自由なカスタマイズ

と上手く住み分ける事で カスタマイズの幅が広がりそうです

コメント