cssにphpの変数(Cocoon設定)を反映する−その②

前回の記事で Cocoon 設定を css に反映する方法を紹介しました

今回は Cocoon 設定をどの様に利用するか 具体的な記述方法を紹介します

スポンサーリンク

Cocoon 設定の名前と値の取得方法

最初に Cocoon 設定の 名前 の取得方法を紹介します

Cocoon 設定の名前の調べ方

公式サイトにて

今回使用する Cocoon 設定の名前

上記の方法で 今回サンプルとして使用する Cocoon 設定の 設定名

Cocoon 設定の 設定名

PC の文字サイズ site_font_size
モバイルの文字サイズ mobile_site_font_size
サイトキーカラー site_key_color
トップへ戻るボタンの色 go_to_top_background_color

と分かりました

Cocoon 設定の値の求め方

php Cocoon 設定の値を利用するには その値を呼び出す関数が必要になります

そこで どの関数を使用すればよいのかを調べます

GitHub で検索

Cocoon 公式サイトの GitHub で検索を行います サンプルにはサイトフォント 文字サイズの Cocoon 設定名 site_font_size を使います

左上の検索窓より site_font_size で検索を行います

「site_font_size」で検索
site_font_size で検索

検索結果から関数を探す

検索結果の中に この様に表示されている箇所があります

検索結果の一部
検索結果の一部

Cocoon 設定の値を求める関数

検索結果内の lib/page-settings/all-funcs.php リンクから中を開きます

get_site_font_size()
get_site_font_size()

こちらで Cocoon 設定名 site_font_size の値を取得する関数 get_site_font_size() が定義されています

概ねおおむ get_ 設定名 () の命名ルールで関数化されている様です

これで Cocoon 設定の 名前 が分かり その の求め方が分かりましたので 具体的な利用方法に移ります

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

なお php の記述先は前回設定した自作のスタイルシート php ファイルになります

文字に関するスタイル指定

いま thx.jp にて作成しているスキンは 文字 に関係しているカスタマイズがほとんどです

そして 多くの方が設定されていると思いますが PC サイトとモバイルサイトでは使用するフォントサイズを変更しています

この対応として メディアクエリを作成したり calc() em 単位を用いたりしてレスポンシブルを目指してきましたが どちらも css の記述量が増えてしまうため css の肥大化に繋がってしまいます

そもそも amp の事を考慮さえしなければ css の肥大化はそれほど気にしなくても良いと思いますが 勉強の意味も込めてコンパクトな css 作成を目指します

フォントサイズ

要注意

is_mobile() 系関数を使用することにより Cocoon が採用している 100 %レスポンシブスタイルからはれてしまいます

今回のサンプルテストでは同一 URL font-size の変更のみ行います

Cocoon 設定の値を変数化

 // フォントサイズ
 if (get_site_font_size()){ 
   $thx_fz_px = get_site_font_size(); 
   $thx_fz = floatval($thx_fz_px); 
 } 
 // モバイルフォントサイズ
 if (get_mobile_site_font_size()){ 
   $thx_mb_fz_px = get_mobile_site_font_size(); 
   $thx_mb_fz = floatval($thx_mb_fz_px); 
 } 

Cocoon 設定の 全体タブ サイトフォント項目 文字サイズ の値を取り出し 変数化します

同様に 全体タブ モバイルサイトフォント項目 の値を取り出し 変数化します

is_mobile() font-size を変更

 // スマホ判別
 if (is_mobile()) { 
   $thx_fz = $thx_mb_fz; 
   $thx_fz_px = $thx_mb_fz_px; 
 } 

is_mobile() 関数を利用して モバイルからアクセスされた場合は font-size を変更します

php でスタイル指定

この処理により

 .box { 
   margin: $thx_fz_px; 
 } 

といった font-size 準拠の記述が容易に可能です

処理が複雑になるほど効果を発揮

 <?php  
 // 行の高さ
 if (get_entry_content_line_hight()){ 
   $thx_lh = floatval(get_entry_content_line_hight()); 
 } 

 // グリッド揃え用行間の設定
 if ( !function_exists( 'get_grid_line_space' ) ): 
 function get_grid_line_space($fz, $lh){ 
   $gls = round(($lh - 1) * $fz / 2) * 2; 
   return floatval($gls); 
 } 
 endif; 

 // グリッド揃え用 line-height の設定
 if ( !function_exists( 'get_grid_line_height' ) ): 
 function get_grid_line_height($fz, $lh){ 
   $gls = get_grid_line_space($fz, $lh); 
   $glh = $fz + $gls; 
   return floatval($glh); 
 } 
 endif; 

 // スマホ判別
 if (is_mobile()) { 
   $thx_fz = $thx_mb_fz; 
   $thx_fz_px = $thx_mb_fz_px; 
 } 
 $thx_gls = floatval(get_grid_line_space($thx_fz, $thx_lh)); 
 $thx_gls_px = $thx_gls.'px'; 
 $thx_glh = floatval(get_grid_line_height($thx_fz, $thx_lh)); 
 $thx_glh_px = $thx_glh.'px'; 

 // フォントのコンデンス率
 $thx_font_condense = 1.0; 
 $thx_fw = $thx_fz * $thx_font_condense; 
 $thx_fw_px = $thx_fw.'px'; 
 ?> 

 <?php $thx_bw = 0;// 案内ボックス
 $cocoon_box = array( 
   'primary', 
   'secondary', 
   'success', 
   'info', 
   'warning', 
   'danger', 
   'light', 
   'dark' 
 ); 
 ?> 
 <?php foreach ($cocoon_box as $name): ?> 
   .<?=$name?>-box { 
     <?php if ($thx_bw != 0) { 
       echo "border-width: ".$thx_bw."px;"; 
     } ?> 
     padding: <?=$thx_glh / 2 - $thx_bw?>px <?=$thx_fw - $thx_bw?>px; 
   } 
 <?php endforeach; ?> 

この様な記述になるので これらを全て em calc() で記述するのは至難の業です ;;

色に関するスタイル指定

キーカラー

Cocoon 設定の値を変数化

 // キーカラー
 if (get_site_key_color()){ 
   $thx_key = get_site_key_color(); 
 } else { 
   $thx_key = '#808080'; 
 } 

Cocoon 設定の 全体タブ キーカラー項目 サイトキーカラー の値を取り出し 変数化します

未設定の場合

サイトキーカラーが未設定の場合はカラーコード #808080 とします

サブカラー

Cocoon 設定の値を変数化

 // ボタン色
 if (get_go_to_top_background_color()){ 
   $thx_sub = get_go_to_top_background_color(); 
 } else { 
   $thx_sub_hsla = generate_sub_color($thx_key_hsla); 
   $thx_sub = hsla_to_css_code($thx_sub_hsla); 
 } 

 if (!$thx_sub_hsla) { 
   $thx_sub_hsla = colorcode_to_hsla($thx_sub); 
 } 

Cocoon 設定の ボタンタブ ボタン色項目 背景色 の値を取り出し 変数化します

未設定の場合

背景色が未設定の場合はキーカラーを元に色を設定します

当サイトではこの色をサブカラーとしております

generate_sub_color()
 // キーカラーからサブカラーを作成
 if ( !function_exists( 'generate_sub_color' ) ): 
 function generate_sub_color($hsl){ 
   if ($hsl['l'] > 0.45) { 
     $hsl['l'] -= 0.25; 
   } else { 
     $hsl['s'] += 0.25; 
     $hsl['l'] += 0.25; 
   }; 
   return $hsl; 
 } 
 endif; 

php でスタイル指定

見出しのスタイル指定

 // キーカラー
 if (get_site_key_color()){ 
   $thx_key = get_site_key_color(); 
 } else { 
   $thx_key = '#808080'; 
 } 

 $thx_key_hsla = colorcode_to_hsla($thx_key); 

 $thx_key_080 = hsla_to_css_code($thx_key_hsla,'80%'); 
 $thx_key_060 = hsla_to_css_code($thx_key_hsla,'60%'); 

 .article h3 { 
   background: linear-gradient(90deg, <?php echo $thx_key_080; ?>, #fff); 
 } 
 .article h4, 
 .article h5, 
 .article h6 { 
   border-color: <?php echo $thx_key_060; ?>; 
 } 

php でのスタイル指定はこの様になります

hsl 形式に変更した色情報の 輝度のみ変更した新しい色を css 形式に変換して変数化します

余談ですが 色の輝度や不透明度を変更したい場合に hsl はとても便利です

グリッドのスタイル指定

 // ボタン色
 if (get_go_to_top_background_color()){ 
   $thx_sub = get_go_to_top_background_color(); 
 } elseif (get_site_key_sub_color()) { 
   $thx_sub = get_site_key_sub_color(); 
 } else { 
   $thx_sub_hsla = generate_sub_color($thx_key_hsla); 
   //$thx_sub_hsla = generate_counter_color($thx_key_hsla); 
   $thx_sub = hsla_to_css_code($thx_sub_hsla); 
 } 

 if (!$thx_sub_hsla) { 
   $thx_sub_hsla = colorcode_to_hsla($thx_sub); 
 } 

 $thx_sub_090 = hsla_to_css_code($thx_sub_hsla,'90%'); 
 $thx_sub__000 = hsla_to_css_code($thx_sub_hsla, 1.0, 0.0); 

 // グリッド
 <?php $grid_color = $thx_sub_090; ?> 
 <?php $transparent = $thx_sub__000; ?> 

 .thx-set-grid { 
   line-height: <?=$thx_glh_px?>; 
   background-image: 
   linear-gradient( 
     to bottom, 
     <?=$grid_color?> 0%, 
     <?=$transparent?> 1.5px, 
     <?=$transparent?> <?=$thx_fz - 1.5?>px, 
     <?=$grid_color?> <?=$thx_fz?>px, 
     <?=$white?> 0%  ), 
   linear-gradient( 
   to right, 
     <?=$transparent?> 0%, 
     <?=$grid_color?> 0%, 
     <?=$transparent?> 1px, 
     <?=$transparent?> <?=$thx_fw - 1?>px, 
     <?=$grid_color?> 0%  ); 
   background-size: 
     <?=$thx_fw_px?> 
     <?=$thx_glh_px?> 
   ; 
 } 


まとめ

そもそも このグリッド表示を Cocoon 設定の値でコントロールしたいと思ったのがキッカケでした

今後も Cocoon 設定の値を上手く利用しながらスタイル指定を行いたいです

また 今回の取り組みを行う中で改めて Cocoon の素晴らしさが分かりました

カスタマイズを行う際 つい css を追加するクセがあったのですが その前に Cocoon 設定でコントロール出来るのであれば そちらを利用した方が親テーマの css に記述されるので 結果 css の打ち消しも必要なく スッキリとしたスタイルシートになると知りました

今後は Cocoon のポテンシャルを最大限に活かしつつカスタマイズを行っていきたいですね

コメント