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

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

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

check

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

<style amp-custom>の調整
1. github.com/yhira/cocoon/
2. lib内のカスタマイズ
結果

<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 ); 
     } 
   }