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 設定の在り処ありかを調べてみると $_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 の読み込みができそうです

カスタマイズ

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 ファイルに記述されています

二行目で親テーマの css-custom.php を読み込み 三行目で自作のスタイルシート php ファイルを読み込みます

こうすると 親テーマの css-custom.php を読み込みつつ 安全にカスタマイズが可能です

まとめ

思ったよりも使い勝手が良い

php での記述という事で css の記述よりも してや scss の記述に比べると とても手間が掛かります しかしながら 慣れてしまえば Cocoon 設定の利用はもちろん scss よりも便利な処理 WordPress 関数の利用とか も可能なのでとても良いです

また 今回のカスタマイズを行った主眼は Cocoon 設定の利用でしたが こんな副産物もありました

インラインで出力される

親テーマの css と同じくインラインで出力されます よって 親テーマの打ち消しが同じ詳細度で可能です

以前にちょっと悩んだことがあったので 気楽に打ち消しが出来るのは不要な詳細度の増加もなく スッキリします

AMP にも出力される

AMP にも出力されるので 通常用の css との使い分けにも利用できそうです

逆に言えば AMP に出力したくないスタイル指定には使えません

次回の予定

Cocoon 設定の具体的な使用方法を紹介します

コメント