条件に応じてCSS変数の値をPHPでカスタマイズする方法

条件に応じてCSS変数の値をPHPでカスタマイズする方法

CSS
上級者向け
PHPカスタマイズ
yStandard

yStandardではいろいろな色や文字サイズ等をCSSのカスタムプロパティ（CSS変数）で管理しています。

初期値となる値はCSS側で定義していますが、カスタマイザーの設定などで変更出来る部分についてはPHPでCSS変数の値を上書きする形で出力されます。

そのPHPから出力されるCSS変数の設定をカスタマイズする方法についての紹介です。

このページは上級者向けマニュアルです。

自作のプラグインや子テーマを使ってPHPでカスタマイズする内容が含まれます。

WordPress勉強中の方は知らない単語や関数などを調べながらカスタマイズにチャレンジしてみてください。

CSS変数を追加・変更するカスタマイズサンプル

上書き用のCSS変数はys_css_varsフィルターフックを使うことで追加・変更ができます。

以下はカスタム投稿タイプ「manual」の詳細ページの時にヘッダーの背景色を変更するカスタマイズサンプルです。

// 投稿タイプ「manual」の詳細ページでヘッダー背景色を変える.
function my_css_vars( $vars ) {
	// 条件は適宜書き換えてください.
	if ( is_singular( 'manual' ) ) {
		// CSS変数先頭の「--」は出力時に追加されるので不要です.
		$vars[ 'header-bg' ] = 'rgba(255,255,255,0.3)';
	}
  
	return $vars;
}
// 優先順位は100以上を推奨.
// 10番台はyStandard本体で使用、20~99は関連プラグインで使用予定.
add_filter( 'ys_css_vars', 'my_css_vars', 100 );

条件などは適宜変更してみてください。