前回の記事で Cocoon 設定を css に反映する方法を紹介しました。
今回は、 Cocoon 設定をどの様に利用するか、 具体的な記述方法を紹介します。
Cocoon 設定の名前と値の取得方法
最初に Cocoon 設定の 「名前」 と 「値」 の取得方法を紹介します。
Cocoon 設定の名前の調べ方
公式サイトにて、
Cocoon 設定に付けられている名前の調べ方が解説されています。
今回使用する Cocoon 設定の名前
上記の方法で、 今回サンプルとして使用する Cocoon 設定の 「設定名」 は、
と分かりました。
Cocoon 設定の値の求め方
php で Cocoon 設定の値を利用するには、 その値を呼び出す関数が必要になります。
そこで、 どの関数を使用すればよいのかを調べます。
GitHub で検索
Cocoon 公式サイトの GitHub で検索を行います。 サンプルにはサイトフォント → 文字サイズの Cocoon 設定名 「site_font_size」 を使います。
左上の検索窓より 「site_font_size」 で検索を行います。
検索結果から関数を探す
検索結果の中に、 この様に表示されている箇所があります。
Cocoon 設定の値を求める関数
検索結果内の lib/page-settings/all-funcs.php リンクから中を開きます。
こちらで、 Cocoon 設定名 「site_font_size」 の値を取得する関数、 get_site_font_size() が定義されています。
概ね、 get_ 設定名 () の命名ルールで関数化されている様です。
これで、 Cocoon 設定の 「名前」 が分かり、 その 「値」 の求め方が分かりましたので、 具体的な利用方法に移ります。
なお、 php の記述先は前回設定した自作のスタイルシート php ファイルになります。
文字に関するスタイル指定
いま thx.jp にて作成しているスキンは 「文字」 に関係しているカスタマイズがほとんどです。
そして、 多くの方が設定されていると思いますが、 PC サイトとモバイルサイトでは使用するフォントサイズを変更しています。
この対応として、 メディアクエリを作成したり、 calc() と em 単位を用いたりしてレスポンシブルを目指してきましたが、 どちらも css の記述量が増えてしまうため、 css の肥大化に繋がってしまいます。
そもそも、 amp の事を考慮さえしなければ、 css の肥大化はそれほど気にしなくても良いと思いますが、 勉強の意味も込めてコンパクトな css 作成を目指します。
フォントサイズ
is_mobile() 系関数を用いて、 PC サイトとモバイルサイトとで、 表示する 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 準拠の記述が容易に可能です。
処理が複雑になるほど効果を発揮
上記の程度の記述であれば、 「margin: 1em;」 でも可能なのですが、 当サイトの仕様であるグリッド揃えを記述すると、
<?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;
キーカラーの輝度を変更してサブカラーを作成します。
hsl の操作にはこちらを利用します。
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 のポテンシャルを最大限に活かしつつカスタマイズを行っていきたいですね。
コメント