wp_enqueue_global_styles_css_custom_properties()


WordPressのwp_enqueue_global_styles_css_custom_properties()関数は、テーマのグローバルスタイルに含まれるCSSカスタムプロパティ（CSS変数）をエンキューするために使用されます。この関数は、テーマのスタイルシートやブロックエディターのスタイルを一貫して管理するために役立ちます。

シンタックス

wp_enqueue_global_styles_css_custom_properties();

例1: グローバルスタイルのCSSカスタムプロパティをエンキューする

この例では、テーマのグローバルスタイルに含まれるCSSカスタムプロパティをエンキューします。

add_action('wp_enqueue_scripts', 'enqueue_global_styles'); function enqueue_global_styles() { wp_enqueue_global_styles_css_custom_properties(); }

例2: カスタムテーマでグローバルスタイルを使用する

カスタムテーマでグローバルスタイルのCSSカスタムプロパティをエンキューする例です。

add_action('after_setup_theme', 'setup_theme_global_styles'); function setup_theme_global_styles() { add_theme_support('wp-block-styles'); add_action('wp_enqueue_scripts', 'enqueue_global_styles'); function enqueue_global_styles() { wp_enqueue_global_styles_css_custom_properties(); } }

例3: 子テーマでグローバルスタイルを上書きする

子テーマで親テーマのグローバルスタイルを上書きする例です。

add_action('wp_enqueue_scripts', 'child_theme_global_styles', 20); function child_theme_global_styles() { wp_enqueue_global_styles_css_custom_properties(); }

例4: ブロックエディター用のグローバルスタイルをエンキューする

ブロックエディター用のグローバルスタイルをエンキューする例です。

add_action('enqueue_block_editor_assets', 'enqueue_editor_global_styles'); function enqueue_editor_global_styles() { wp_enqueue_global_styles_css_custom_properties(); }

例5: カスタムCSS変数を追加する

グローバルスタイルにカスタムCSS変数を追加する例です。

add_action('wp_enqueue_scripts', 'add_custom_css_variables'); function add_custom_css_variables() { wp_enqueue_global_styles_css_custom_properties(); wp_add_inline_style('global-styles', ':root { --custom-color: #ff0000; }'); }

例6: グローバルスタイルを条件付きでエンキューする

特定の条件下でのみグローバルスタイルをエンキューする例です。

add_action('wp_enqueue_scripts', 'conditional_global_styles'); function conditional_global_styles() { if (is_front_page()) { wp_enqueue_global_styles_css_custom_properties(); } }

例7: グローバルスタイルを非同期でエンキューする

グローバルスタイルを非同期でエンキューする例です。

add_action('wp_enqueue_scripts', 'async_global_styles'); function async_global_styles() { wp_enqueue_global_styles_css_custom_properties(); wp_style_add_data('global-styles', 'async', true); }

注意点

  • この関数はWordPress 5.9以降で利用可能です。
  • グローバルスタイルはテーマのtheme.jsonファイルで定義されます。
  • カスタムプロパティを追加する場合は、wp_add_inline_style()を使用します。

関連機能：