テーマの設定画面やプラグインの設定画面で行った色などの指定、これをスタイルとして出力する方法には主に以下の2つの方法があります。
- style.phpといったphp形式のファイルをCSSファイルとして出力して適用させる
- wp_add_inline_style()を使ってHTML上にインラインでスタイルコードを出力して適用させる
1は最も一般的に使われる手法ではあるものの、style.phpの冒頭に「これはスタイルとして扱うコードですよ！」という宣言を書きますが、外部からの直接アクセスを拒否する「<?php if( !defined( ‘ABSPATH’ ) ) exit;」という記述と併用できないため、そのファイルへの不正を防止する措置をしないとセキュリティに懸念があります。
テーマファイル内を見て、何の対策もなしにstyle.phpなどPHPファイルからCSSへの変換をしているテーマの利用は厳密には避けた方がいいかも知れません
一方、2は1のセキュリティ上の問題を解消できる反面、HTMLソース上に長いスタイルコードがそのまま出力されるので、パフォーマンスに多少の影響が出たり、HTMLソースが汚くなったりしますので、改行や不要なスペースの削除、不要なコメントの削除などをする必要があります。
本ページでは、これらの問題を解消し、セキュリティを担保しつつ、テーマやプラグインの設定値を反映させた上でCSSを適用させる方法を紹介します。
コードを使用する前に、ここをクリックして注意事項をご確認ください
本ページで掲載しているコードは、以下に了承した上で使用ください
- コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
- コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
- コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
- コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
- 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります（コメント欄等から質問いただいても基本回答は致しません）
- 掲載しているコードの転載を禁じます（SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です）
設定値（変数）の扱い方を変更することが問題解決のキモ
冒頭で紹介したどちらの方法も、PHPで処理したものをどのように出力するのかの違いだけです。つまり、テーマやプラグインの設定値はPHPで取得するしか方法がなく、それを適用させるためには.css形式のファイルのままでは扱えないので、これらの方法を取る必要があるのです。
この問題を解決するには、PHPで取得した値を、サイト全体で使える固定値（プリセット値）として出力し、それをCSSファイルで使用するのが妥当です。
プリセット値？と感じる方もいると思いますが、デベロッパーツールでスタイルの調整をする際に、スタイルコードが書かれているパネルの下の方に赤枠のような値が出力されているのを見たことがあると思います。
「–wp–preset…」といっているものがずらっと表示されますね。これがWordPressが出力するスタイルのプリセット値です（これを「カスタムCSS変数」、CSSの正式用語名では「CSS Custom Properties」と言います）。
これにはWordPress本体が出力しているものと、テーマのtheme.jsonで出力されているものとの大きく2つあるのですが、例えば色であれば以下のように書くことで↑の画像のプリセット値（カスタムCSS変数）でいえば「#7a00df」という色がセットされます。
color : var(--wp-block-synced-color, black);var()で囲んで書かれている変数を入れれば、それに対応する値がセットされるという感じですね（その後の「, black」はプリセット値（カスタムCSS変数）がなかった時の代替色で省略可能です）。
このようにプリセット値としていろいろな設定値を出力しておくようにすれば、PHPからCSSとして出力しなくても、インラインでそのままスタイルコードを出力しなくても、いつものスタイルシートをwp_enqueue_scriptsへフックさせればスタイルが適用されるわけです。
これを踏まえた上で、プリセット値（カスタムCSS変数）を出力するためのコード例を次項で紹介します。
プリセット値（カスタムCSS変数）を出力するためのコード例
以下は例として「色」「画像のURL」「任意の値」をカスタムCSS変数として登録する（出力する）ためのコード例です。
どのコードも仕組みは共通で出力方法や適用場所に違いがあります（各方法で後述します）。
コード中の以下の部分でカスタムCSS変数を指定しています。
//各設定値を変数化（テーマやプラグイン設定から取得する場合はget_option()などを使う）
$system_red = '#ff0000';
$hidden_bg = '#333333';
$alert_yellow = '#ffd700';
$hero_bg_url = 'url("https://example.com/wp-content/uploads/hero-bg.jpg")';
$pattern_bg_url = 'url("https://example.com/wp-content/uploads/pattern-bg.png")';
$max_width_content = '1200px';
$spacing_unit = '1.5rem';
// プリセット値の定義
$custom_settings = array(
'color' => array(
'system-red' => $system_red,
'hidden-bg' => $hidden_bg,
'alert-yellow' => $alert_yellow,
),
'image' => array(
'hero-bg-url' => $hero_bg_url,
'pattern-bg-url' => $pattern_bg_url,
),
'layout' => array(
'max-width-content' => $max_width_content,
'spacing-unit' => $spacing_unit,
)
);コード中に記述していますが、例えば「$system_red = ‘#ff0000′;」と「’system-red’ => $system_red,」が1組となっていて、いくつでも追加や削除ができますし、「$system_red = ‘#ff0000’;」の「’#ff0000’」の部分をget_option(optionテーブル内の値)やget_theme_mod(テーマ設定の値)関数へ変更することで、プラグインの設定値やテーマの設定値を引っ張り出すことができます。
これを前述したように、スタイルシート内のスタイルコードで以下のような記述をすることで適用されるという仕組みです。
color : var(--wp--custom--color--system-red);
background-image : --wp--custom--image--hero-bg-url;幅広い種類のテーマでカスタムCSS変数を出力するためのコード例
WordPressにはtheme.jsonがあるブロックテーマやハイブリッドテーマと、theme.jsonを持たないクラシックテーマがあります。以下のコードはtheme.jsonの有無に関わらず、ほとんどのテーマで利用できます。
function pwcn_custom_preset_value_for_classictheme() {
//各設定値を変数化（テーマやプラグイン設定から取得する場合はget_option()などを使う）
$system_red = '#ff0000';
$hidden_bg = '#333333';
$alert_yellow = '#ffd700';
$hero_bg_url = 'url("https://example.com/wp-content/uploads/hero-bg.jpg")';
$pattern_bg_url = 'url("https://example.com/wp-content/uploads/pattern-bg.png")';
$max_width_content = '1200px';
$spacing_unit = '1.5rem';
// プリセット値の定義
$custom_settings = array(
'color' => array(
'system-red' => $system_red,
'hidden-bg' => $hidden_bg,
'alert-yellow' => $alert_yellow,
),
'image' => array(
'hero-bg-url' => $hero_bg_url,
'pattern-bg-url' => $pattern_bg_url,
),
'layout' => array(
'max-width-content' => $max_width_content,
'spacing-unit' => $spacing_unit,
)
);
// 階層構造をフラットなCSS変数定義の文字列に変換
$css_output = ':root {';
$css_output .= pwcn_prefix_for_custom_preset_value( $custom_settings );
$css_output .= '}';
// テーマのメインスタイルシートにインラインで追記
// 有効化しているテーマでフロントエンドに出力されているCSSのハンドル名を指定
$style_handle = 'my-theme-main-style';
// スタイルシートが登録されているかチェックし、追記を実行
if ( wp_style_is( $style_handle, 'enqueued' ) || wp_style_is( $style_handle, 'done' ) ) {
wp_add_inline_style( $style_handle, $css_output );
} else {
//ハンドル名が存在しない場合の措置
//フロントエンドでは「wp-block-library」を管理画面では「wp-codemirror」をターゲットにする
// ※このハンドル名はWordPressサイトすべてで出力されていない点に注意
wp_add_inline_style( 'wp-block-library', $css_output );
}
}
add_action( 'wp_enqueue_scripts', 'pwcn_custom_preset_value_for_classictheme' );
/* インライン出力するプリセット値に「--wp--custom」という接頭辞を付ける */
function pwcn_prefix_for_custom_preset_value( $array, $prefix = '--wp--custom' ) {
$css = '';
foreach ( $array as $key => $value ) {
$key = sanitize_key( $key ); // キーを安全な文字列に変換
$var_name = "{$prefix}--{$key}";
if ( is_array( $value ) ) {
// 値が配列の場合、再帰的に処理 (階層が続く)
$css .= pwcn_prefix_for_custom_preset_value( $value, $var_name );
} else {
// 値が文字列の場合、変数定義を生成 (最終階層)
$css .= "{$var_name}: {$value};";
}
}
return $css;
}コードコピー後、一応ハンドル名が存在しない場合に備えてブロックエディターを利用しているサイトで出力されている「wp-block-library」へインラインでカスタムCSS変数を出力するようにはしていますが、コード中に書かれている「my-theme-main-style」の部分を、お使いのテーマで出力されているスタイルシートのID（ハンドル名）へ書き換えることで正確に機能します
このコードでは、カスタムCSS変数をテーマのスタイルシートなどへwp_add_inline_style()を使ってHTMLソースへインラインで（直接）出力するようにしていますので、ほぼどんなテーマでも機能します。
カスタムCSS変数が適用されないときは
コード追加後にカスタムCSS変数を使ってスタイルコードを書いたのに適用されない場合は以下を確認ください。
- 「Ctrl」＋「F5」でキャッシュをクリアしてみる
- デベロッパーツールでカスタムCSS変数が出力されているかを確認する（冒頭の画像のような部分で確認）
theme.jsonを持つテーマでカスタムCSS変数を出力するためのコード例
前項の幅広いテーマへのコードでは、柔軟に対応できる反面、カスタムCSS変数のコードがHTMLソース上へずらっと出力されるため、コードが汚くなることがあったり、量が多い場合にはサイトの表示速度に影響が出ることがあります。
もしもtheme.jsonを持つテーマ（ブロックテーマやハイブリッドテーマ）を有効化しているなら、以下のコードを使ってtheme.jsonの一部として認識させることで、前項のコードの問題点を解消できます。
/*** theme.json を持つテーマ向け ***/
function pwcn_custom_preset_value_for_blocktheme( $theme_json ) {
//theme.jsonのデータを取得
$data = $theme_json->get_data();
//各設定値を変数化（テーマやプラグイン設定から取得する場合はget_option()などを使う）
$system_red = '#ff0000';
$hidden_bg = '#333333';
$alert_yellow = '#ffd700';
$hero_bg_url = 'url("https://example.com/wp-content/uploads/hero-bg.jpg")';
$pattern_bg_url = 'url("https://example.com/wp-content/uploads/pattern-bg.png")';
$max_width_content = '1200px';
$spacing_unit = '1.5rem';
// プリセット値の定義
$custom_settings = array(
'color' => array(
'system-red' => $system_red,
'hidden-bg' => $hidden_bg,
'alert-yellow' => $alert_yellow,
),
'image' => array(
'hero-bg-url' => $hero_bg_url,
'pattern-bg-url' => $pattern_bg_url,
),
'layout' => array(
'max-width-content' => $max_width_content,
'spacing-unit' => $spacing_unit,
)
);
// 既存の custom セクションと結合
if ( ! isset( $data['settings']['custom'] ) ) {
$data['settings']['custom'] = array();
}
// PHPで定義した新しいカスタム設定を結合/上書き
$data['settings']['custom'] = array_merge(
$data['settings']['custom'],
$custom_settings
);
// 変更後の新しいオブジェクトを返す
return new WP_Theme_JSON_Data( $data );
}
add_filter( 'wp_theme_json_data_default', 'pwcn_custom_preset_value_for_blocktheme' );管理画面へカスタムCSS変数を出力するためのコード例
前項のいずれのコードも、フロントエンド（表示画面）側にカスタムCSS変数を出力するもので、WordPressの管理画面側には出力されません。
もしも管理画面側のスタイル設定として同じカスタムCSS変数を使いたい場合には以下のコードを使います。
「幅広い種類のテーマでカスタムCSS変数を出力するためのコード例」のコードと併用する場合には、以下のコード中の「/* インライン出力するプリセット値に「–wp–custom」という接頭辞を付ける */」から下のコードは削除してください
/*** カスタム設定をCSS変数として出力、（管理画面向け) ***/
function pwcn_custom_preset_value_for_admin() {
//各設定値を変数化（テーマやプラグイン設定から取得する場合はget_option()などを使う）
$system_red = '#ff0000';
$hidden_bg = '#333333';
$alert_yellow = '#ffd700';
$hero_bg_url = 'url("https://example.com/wp-content/uploads/hero-bg.jpg")';
$pattern_bg_url = 'url("https://example.com/wp-content/uploads/pattern-bg.png")';
$max_width_content = '1200px';
$spacing_unit = '1.5rem';
// プリセット値の定義
$custom_settings = array(
'color' => array(
'system-red' => $system_red,
'hidden-bg' => $hidden_bg,
'alert-yellow' => $alert_yellow,
),
'image' => array(
'hero-bg-url' => $hero_bg_url,
'pattern-bg-url' => $pattern_bg_url,
),
'layout' => array(
'max-width-content' => $max_width_content,
'spacing-unit' => $spacing_unit,
)
);
// 階層構造をフラットなCSS変数定義の文字列に変換
$css_output = ':root {';
$css_output .= pwcn_prefix_for_custom_preset_value( $custom_settings );
$css_output .= '}';
// テーマのメインスタイルシートにインラインで追記
// 有効化しているテーマで管理画面に出力されているCSSのハンドル名を指定
$style_handle = 'my-theme-main-style';
// スタイルシートが登録されているかチェックし、追記を実行
if ( wp_style_is( $style_handle, 'enqueued' ) || wp_style_is( $style_handle, 'done' ) ) {
wp_add_inline_style( $style_handle, $css_output );
} else {
//ハンドル名が存在しない場合の措置
//「wp-codemirror」をターゲットにする
// ※このハンドル名はWordPressサイトすべてで出力されていない点に注意
wp_add_inline_style( 'wp-codemirror', $css_output );
}
}
//add_action( 'admin_enqueue_scripts', 'pwcn_custom_preset_value_for_admin' );
/* インライン出力するプリセット値に「--wp--custom」という接頭辞を付ける */
function pwcn_prefix_for_custom_preset_value( $array, $prefix = '--wp--custom' ) {
$css = '';
foreach ( $array as $key => $value ) {
$key = sanitize_key( $key ); // キーを安全な文字列に変換
$var_name = "{$prefix}--{$key}";
if ( is_array( $value ) ) {
// 値が配列の場合、再帰的に処理 (階層が続く)
$css .= pwcn_prefix_for_custom_preset_value( $value, $var_name );
} else {
// 値が文字列の場合、変数定義を生成 (最終階層)
$css .= "{$var_name}: {$value};";
}
}
return $css;
}すべてを網羅してメンテナンスしやすくした完成コード
ここまではtheme.jsonを持つ場合、持たない場合、管理画面へ適用させる場合と個別にコードを紹介してきましたが、最後にこれらをまとめ、かつ、コード紹介の冒頭に書いた共通のコード部分を別のユーザー定義関数化してメンテナンスしやすくした完成コードを紹介しておきます。
これまでいずれかのコードでテストした方は一旦そのコードは削除してください
/***** テーマオプションなどで設定した値をカスタムCSS変数として出力する *****/
/*** 共通の変換値を各処理に渡す（同一文字列の指定によるミスを減らすため） ***/
function pwcn_custom_preset_value_pattern(){
//各設定値を変数化（テーマやプラグイン設定から取得する場合はget_option()などを使う）
$system_red = '#ff0000';
$hidden_bg = '#333333';
$alert_yellow = '#ffd700';
$hero_bg_url = 'url("https://example.com/wp-content/uploads/hero-bg.jpg")';
$pattern_bg_url = 'url("https://example.com/wp-content/uploads/pattern-bg.png")';
$max_width_content = '1200px';
$spacing_unit = '1.5rem';
// プリセット値を返す
return array(
'color' => array(
'system-red' => $system_red,
'hidden-bg' => $hidden_bg,
'alert-yellow' => $alert_yellow,
),
'image' => array(
'hero-bg-url' => $hero_bg_url,
'pattern-bg-url' => $pattern_bg_url,
),
'layout' => array(
'max-width-content' => $max_width_content,
'spacing-unit' => $spacing_unit,
)
);
}
/*** theme.json を持つテーマ向け ***/
function pwcn_custom_preset_value_for_blocktheme( $theme_json ) {
//theme.jsonのデータを取得
$data = $theme_json->get_data();
// プリセット値の定義（外部の関数から引用）
$custom_settings = pwcn_custom_preset_value_pattern();
// 既存の custom セクションと結合
if ( ! isset( $data['settings']['custom'] ) ) {
$data['settings']['custom'] = array();
}
// PHPで定義した新しいカスタム設定を結合/上書き
$data['settings']['custom'] = array_merge(
$data['settings']['custom'],
$custom_settings
);
// 変更後の新しいオブジェクトを返す
return new WP_Theme_JSON_Data( $data );
}
/*** theme.json が存在しないクラシックテーマ向け ***/
function pwcn_custom_preset_value_for_classictheme() {
// プリセット値の定義（外部の関数から引用）
$custom_settings = pwcn_custom_preset_value_pattern();
// 階層構造をフラットなCSS変数定義の文字列に変換
$css_output = ':root {';
$css_output .= pwcn_prefix_for_custom_preset_value( $custom_settings );
$css_output .= '}';
// テーマのメインスタイルシートにインラインで追記
// 有効化しているテーマでフロントエンドに出力されているCSSのハンドル名を指定
$style_handle = 'my-theme-main-style';
// スタイルシートが登録されているかチェックし、追記を実行
if ( wp_style_is( $style_handle, 'enqueued' ) || wp_style_is( $style_handle, 'done' ) ) {
wp_add_inline_style( $style_handle, $css_output );
} else {
//ハンドル名が存在しない場合の措置
//フロントエンドでは「wp-block-library」を管理画面では「wp-codemirror」をターゲットにする
// ※このハンドル名はWordPressサイトすべてで出力されていない点に注意
wp_add_inline_style( 'wp-block-library', $css_output );
}
}
/*** カスタム設定をCSS変数として出力、（管理画面向け) ***/
function pwcn_custom_preset_value_for_admin() {
// プリセット値の定義（外部の関数から引用）
$custom_settings = pwcn_custom_preset_value_pattern();
// 階層構造をフラットなCSS変数定義の文字列に変換
$css_output = ':root {';
$css_output .= pwcn_prefix_for_custom_preset_value( $custom_settings );
$css_output .= '}';
// テーマのメインスタイルシートにインラインで追記
// 有効化しているテーマで管理画面に出力されているCSSのハンドル名を指定
$style_handle = 'my-theme-main-style';
// スタイルシートが登録されているかチェックし、追記を実行
if ( wp_style_is( $style_handle, 'enqueued' ) || wp_style_is( $style_handle, 'done' ) ) {
wp_add_inline_style( $style_handle, $css_output );
} else {
//ハンドル名が存在しない場合の措置
//「wp-codemirror」をターゲットにする
// ※このハンドル名はWordPressサイトすべてで出力されていない点に注意
wp_add_inline_style( 'wp-codemirror', $css_output );
}
}
/* インライン出力するプリセット値に「--wp--custom」という接頭辞を付ける */
function pwcn_prefix_for_custom_preset_value( $array, $prefix = '--wp--custom' ) {
$css = '';
foreach ( $array as $key => $value ) {
$key = sanitize_key( $key ); // キーを安全な文字列に変換
$var_name = "{$prefix}--{$key}";
if ( is_array( $value ) ) {
// 値が配列の場合、再帰的に処理 (階層が続く)
$css .= pwcn_prefix_for_custom_preset_value( $value, $var_name );
} else {
// 値が文字列の場合、変数定義を生成 (最終階層)
$css .= "{$var_name}: {$value};";
}
}
return $css;
}
/*** 管理画面への出力と、theme.jsonの有無でフロントへの出力を切り替え ***/
function pwcn_add_custom_preset_value_theme_type() {
// theme.json の存在をチェック
// ブロックテーマかどうかを判定する
$is_block_theme = function_exists( 'wp_is_block_theme' ) && wp_is_block_theme();
if ( $is_block_theme ) {
// ブロックテーマの場合
add_filter( 'wp_theme_json_data_default', 'pwcn_custom_preset_value_for_blocktheme' );
} else {
// クラシックテーマの場合
add_action( 'wp_enqueue_scripts', 'pwcn_custom_preset_value_for_classictheme' );
}
//theme.jsonの有無に関わらず管理画面へはプリセット値を出力
if(is_admin()){
add_action( 'admin_enqueue_scripts', 'pwcn_custom_preset_value_for_admin' );
}
}
add_action( 'after_setup_theme', 'pwcn_add_custom_preset_value_theme_type' );これでpwcn_custom_preset_value_pattern()内の変数の指定を変えれば、どの場合でも共通の値が適用されるようになり、不一致やコードの編集間違いによるトラブルを防ぐことができ、かつ、theme.jsonを持つテーマの場合はより最適化した形でプリセット値（カスタムCSS変数）が出力できるようになりますね。
以上、テーマオプションなどで設定した値をCSSファイルで使用できるようにする方法でした。
この方法を使えば冒頭で書いたようなstyle.phpを使用した際のセキュリティリスクの問題や、wp_add_inline_style()を使った場合にソースコードが乱雑に増えてしまう問題も解消されますね。
