2026年7月14日

WordPressのCSSカスタムプロパティ（変数）を使う方法

テーマ・デザイン

はじめに

CSSカスタムプロパティは、スタイルシート内で使用する再利用可能な変数を定義できる強力な機能です。特にWordPressテーマの開発では、複雑なデザイン要素や色調の管理が容易になります。この記事では、どのようにしてWordPressでCSSカスタムプロパティを使用して効率的なテーマ開発を行うことができるかを解説します。

症状・背景

このテーマが必要になる主な場面:

テーマ内の色やフォントサイズを一括管理したい場合
設定画面からCSS変数の値を動的に変更したい場合
既存のCSSコードの維持性と保守性を高めたい場合

手順・設定方法

ステップ1: カスタムプロパティの定義

# functions.phpにカスタムプロパティを初期化する関数を追加します。
add_action( 'wp_enqueue_scripts', function() {
    wp_add_inline_script(
        'theme-style',
        'let $ = jQuery; $(document).ready(function () { let style = document.createElement("style"); document.head.appendChild(style); style.sheet.insertRule(":root{--primary-color:#0073aa;}", 0); });'
    );
} );

ステップ2: カスタムプロパティを使用してCSSの書式を変更

# CSSファイル内でカスタムプロパティを使用します。
body {
	background-color: var(--primary-background-color, #ffffff);
	color: var(--primary-text-color, #000000);
}

ステップ3: テーマ設定ページからのカスタムプロパティの動的変更

# オプションページにカスタムプロパティの値を保存するためのフィールドを追加します。
function custom_css_options() {
    add_settings_field(
        'primary_color',
        'Primary Color',
        function () { echo '<input type="text" name="custom_theme_options[primary-color]" value="' . get_option( 'custom_theme_options' )['primary-color'] . '">'; },
        'theme-settings', 'section-title'
    );
}
add_action('admin_init', 'custom_css_options');

ステップ4: カスタムプロパティを使用した動的なスタイルシート生成

# テーマ設定ページからのカスタムプロパティの値をスタイルシートに反映させます。
function custom_theme_style() {
    $custom_css = '';
    if (get_option('custom_theme_options')['primary-color']) {
        $custom_css .= 'body { background-color: var(--primary-background-color, #' . get_option('custom_theme_options')['primary-color'] . '); }';
    }
    wp_add_inline_script(
        'theme-style',
        'let $ = jQuery; $(document).ready(function () { let style = document.createElement("style"); document.head.appendChild(style); style.sheet.insertRule("' . str_replace("\n", "", $custom_css) . '", 0); });'
    );
}
add_action( 'wp_enqueue_scripts', 'custom_theme_style' );

注意事項

カスタムプロパティの値は必ずCSSの有効な形式で設定すること。
テーマのアップデート時にはカスタマイズしたCSSファイルも更新される可能性があるため、バックアップを取ること。
CSS変数を使用する際は互換性を確認し、古いブラウザへの対応策を検討すること。
カスタムプロパティが使用されている複雑なスタイルシートの保守には注意が必要。

まとめ

1. CSSカスタムプロパティ: テーマ内のスタイルを一貫性と再利用性を高めるために使用します。

2. 動的な変更: オプションページからのカスタムプロパティの値の更新により、ユーザーがテーマの外観を簡単に調整できます。

3. 保守性: CSSの一部をJavaScriptで生成することで、スタイルシートの維持管理が容易になります。

4. 互換性: すべてのブラウザがCSSカスタムプロパティをサポートしているわけではなく、古いブラウザへの対応が必要な場合があります。

5. セキュリティ: カスタムプロパティを使用する際は、ユーザーからの入力を受け取るフィールドに対する適切な検証を行う必要があります。

Post Views: 5