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 設定の在り処
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-custom.php
Cocoon の親テーマも、 Cocoon 設定を参照して css を作成しているはず。 と思い調べてみると、 tmp/css-custom.php にて生成されているのが分かりました。
そこで、 css-custom.php の処理が行われる際に、 スキン内のスタイルシート用 php も併せて処理を行えば、 css の読み込みができそうです。
カスタマイズ
- カスタマイズは自己責任でお願いします。
- 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 ファイルに記述されています。
二行目で親テーマの css-custom.php を読み込み、 三行目で自作のスタイルシート php ファイルを読み込みます。
こうすると、 親テーマの css-custom.php を読み込みつつ、 安全にカスタマイズが可能です。
まとめ
思ったよりも使い勝手が良い
php での記述という事で、 css の記述よりも、 況してや scss の記述に比べると、 とても手間が掛かります。 しかしながら、 慣れてしまえば Cocoon 設定の利用はもちろん、 scss よりも便利な処理 (WordPress 関数の利用とか) も可能なのでとても良いです。
また、 今回のカスタマイズを行った主眼は Cocoon 設定の利用でしたが、 こんな副産物もありました。
インラインで出力される
親テーマの css と同じくインラインで出力されます。 よって、 親テーマの打ち消しが同じ詳細度で可能です。
以前にちょっと悩んだことがあったので、 気楽に打ち消しが出来るのは不要な詳細度の増加もなく、 スッキリします。
AMP にも出力される
AMP にも出力されるので、 通常用の css との使い分けにも利用できそうです。
逆に言えば、 AMP に出力したくないスタイル指定には使えません。
次回の予定
Cocoon 設定の具体的な使用方法を紹介します。
コメント