cssにphpの変数（Cocoon設定）を反映する−その①

Cocoon のスキンを作成していると、どうにも Cocoon 設定のオプション値（ユーザーが設定した値）をスタイルシートに反映したくなります。

例えば、 Cocoon 設定 → 全体タブで、サイトフォント項目の文字サイズを 18px に設定します。

続いて、本文タブの本文余白項目で、行の高さを 1.8 に設定してあると仮定します。

その設定に都合の良いスタイルシートを scss で変数化すると、

 $fz: 18px; 
 $lh: 1.8; 
 $lhpx: $fz * $lh;//line-height の px 数
 $ls: $lhpx - $fz;// 行間の px 数

 .blank-box { 
   margin-top: $ls; 
   margin-bottom: $ls; 
   border-width: 2px; 
   padding: $lhpx / 2 - 2px $fz - 2px; 
 }

と記述できます。

このスタイル指定は、上記の仮定では上手うまく機能しますが、スキン利用者が Cocoon 設定を好みの数値に変更すると、この（scss で記述した）スタイル指定は Cocoon 設定に連動しないため、結果は意図したものとは異なる表示になってしまいます。

無論、それを防ぐ方法も Cocoon では準備されているのですが、フォントサイズすら変更できないのをスキンとは呼べないので、対応方法を考えました。

スキン制御の仕様。スキン側から「Cocoon 設定値」を変更する方法 3 通り。

スキン側から「Cocoon 設定」のオプション値を変更する手段の紹介です。スキン側から設定を変更できることで開発の手間を削減することができます。

Cocoon設定の在り処
cssをphpで書き直す
1. 書き方
2. 書き換えのポイント
phpで記述されたcssの読み込み方
1. style.php
2. css-custom.php
カスタマイズ
1. 親テーマはそのままに
2. 子テーマに新規作成
まとめ
1. 思ったよりも使い勝手が良い
  1. インラインで出力される
  2. AMPにも出力される
2. 次回の予定

Cocoon 設定の在り処

Cocoon 設定の在り処ありかを調べてみると、「$_THEME_OPTIONS」という php のグローバル変数に収められている模様です。

そこで、 php の変数を scss へ書き出せないかと色々調べたのですが、意味がありませんでした。

仮に書き出す事が叶かなったとしても、反映されるのは scss なので、スキン利用者が Cocoon 設定を変更する度に、（利用者が） css へコンパイルするのは現実的ではありません。

WordPress に scss のプラグインを導入すれば多少は敷居が低くなりますが、出来る限りプラグインの導入は避けたいのが人情（？）でしょう。

そこで、どうやら Cocoon 設定の値を利用するには、 css を php で書き直す（うへぇ；；）のが一番確実かと思いました。メンドイんですが w

css を php で書き直す

書き方

php に不慣れな私などは苦労しましたが、慣れてしまえば思ったよりもカンタンです。前出の scss を php で書き直すと、

 //scss 
 $fz: 18px; 
 $lh: 1.8; 
 $lhpx: $fz * $lh;//line-height の px 数
 $ls: $lhpx - $fz;// 行間の px 数

 .blank-box { 
   margin-top: $ls; 
   margin-bottom: $ls; 
   border-width: 2px; 
   padding: $lhpx / 2 - 2px $fz - 2px; 
 }

 <?php 
 $fz = 18; 
 $lh = 1.8; 
 $lhpx = floatval($fz * $lh);//line-height の px 数
 $ls = floatval($lhpx - $fz);// 行間の px 数
 ?> 
 .blank-box { 
   margin-top: <?=$ls?>px; 
   margin-bottom: <?=$ls?>px; 
   border-width: 2px; 
   padding: <?=$lhpx / 2 - 2?>px <?=$fz - 2?>px; 
 }

こんな感じになります。

書き換えのポイント

ポイント

変数は<?php...?>で囲む
- <?=$ls?>は<?php echo $ls; ?>の略記になります。
変数への代入は「:」ではなく「=」
計算式はfloatval()で囲む
scss的表記（入れ子など）は使用できない

といった辺りでしょうか。

計算式を floatval() で囲むと、変数が文字型であったり、変数内に単位（px や em）などの文字情報が含まれていて計算が出来ない場合、数値のみに変換してくれます。

php で記述された css の読み込み方

style.php

CSS 内で PHP の変数を使いたい。 - かもメモ

例えば WordPress のプラグインなんかを作っていて、 CSS で変数を使いたいなんて時があります。読み込みを PHP ファイルにする。まずは CSS ファイルの拡張子を .php にして、 CSS を読み込ませていた部分を PHP のファイルに変更します。 HTML ならこんな感じ。 WordPress の wp_enqueue_styl...

この記事を参考に設定してみましたが、上手く読み込めない場合（キャッシュの関係？）があるので、次の方法を採とりました。

css-custom.php

Cocoon の親テーマも、 Cocoon 設定を参照して css を作成しているはず。と思い調べてみると、 tmp/css-custom.php にて生成されているのが分かりました。

そこで、 css-custom.php の処理が行われる際に、スキン内のスタイルシート用 php も併せて処理を行えば、 css の読み込みができそうです。

カスタマイズ

check

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

親テーマはそのままに

tmp/css-custom.php は、 Cocoon の基本となる css を生成する処理ですので、頻繁ひんぱんにアップデートされます。それに手を加えるのはメンテナンス性の低さはもちろん、画面表示がおかしくなってしまうリスクが高いため、こちらには一切触れずにカスタマイズを行います。

子テーマに新規作成

子テーマに tmp フォルダを（functions.php や style.css と同じ階層に）作成し、その中に css-custom.php （親テーマと同名です）を新規ファイルとして作成します。

このファイルを作成することにより、親テーマよりも優先的にこちらの css-custom.php が読み込まれる様になります。

続いて、子テーマの css-custom.php に以下の内容を記述します。

 <?php if ( !defined( 'ABSPATH' ) ) exit; ?> 
 <?php require get_template_directory().'/tmp/css-custom.php'; ?> 
 <?php require get_stylesheet_directory().'/skins/skin-thx/tmp/css_php/_css-custom.php'; ?>

一行目は直接読み込み対策です。 Cocoon 親テーマでも全て（？）の php ファイルに記述されています。