wp_add_inline_style() の説明と使用例

WordPress関数wp_add_inline_style()は、登録済みのスタイルシートにインラインスタイルを追加するために使用されます。

構文

wp_add_inline_style( string $handle, string $data );

引数の説明:

$handle (string) — スタイルシートを登録する際に使用したハンドル名。
$data (string) — 追加するインラインスタイルの内容。

例 1: スタイルの追加

登録済みのスタイルシートに背景色を設定するインラインスタイルを追加します。

<?php
wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css' );
wp_add_inline_style( 'my-style', 'body { background-color: #f5f5f5; }' );
?>

例 2: テキストの色を変更

特定のクラスにテキストカラーを設定するインラインスタイルを追加します。

<?php
wp_enqueue_style( 'custom-style', get_stylesheet_uri() );
wp_add_inline_style( 'custom-style', '.custom-class { color: #333333; }' );
?>

例 3: メディアクエリを追加

インラインスタイルにレスポンシブ対応のメディアクエリを追加します。

<?php
wp_enqueue_style( 'responsive-style', get_stylesheet_uri() );
wp_add_inline_style( 'responsive-style', '@media (max-width: 600px) { body { font-size: 14px; } }' );
?>

例 4: 動的なCSSの生成

PHPで生成された動的なスタイルを追加します。

<?php
wp_enqueue_style( 'dynamic-style', get_stylesheet_uri() );
$dynamic_css = sprintf( '.header { background-color: %s; }', esc_attr( get_option( 'header_color', '#ffffff' ) ) );
wp_add_inline_style( 'dynamic-style', $dynamic_css );
?>

例 5: 外部APIデータのスタイルに反映

外部APIから取得したデータをスタイルに反映させます。

<?php
wp_enqueue_style( 'api-style', get_stylesheet_uri() );
$api_color = '#ff5733'; // 外部APIから取得した値を例として使用。
wp_add_inline_style( 'api-style', sprintf( '.api-box { border-color: %s; }', esc_attr( $api_color ) ) );
?>

構文