概要
wp_add_inline_style 関数は、WordPress において特定のスタイルシートに対してインラインスタイルを追加するための関数です。この関数は、動的に生成された CSS ルールをスタイルシートに挿入したい場合などに使用されます。たとえば、以下のようなシーンで活用されることがあります。
- テーマやプラグインの設定に基づいて動的にスタイルを変更する。
- ユーザーが選択した設定に基づいたカスタマイズを行う。
- 特定のページや投稿に対してカスタムスタイルを適用する。
- JavaScript の出力と連携してスタイルを変更する。
- ブロックエディター向けのカスタムスタイルを追加する。
- 外部のプラグインが生成するスタイルの変更を行う。
- テーマ開発時のデバッグ情報をインラインで追加する。
- 特定の条件に応じてレスポンシブデザインを適用する。
構文
wp_add_inline_style( $handle, $css );
パラメータ
$handle(string): インラインスタイルを追加するスタイルシートのハンドル名。$css(string): 追加する CSS コード。
戻り値
- (bool): 成功した場合は true、失敗した場合は false が返されます。
関連する関数
使用可能なバージョン
wp_add_inline_style 関数は、WordPress 3.3.0 から使用可能です。
コアファイルのパス
wp-includes/script-loader.php
この関数のアクションでの使用可能性
| アクション | 使用例 |
|---|---|
| mu_plugin_loaded | |
| registered_post_type | |
| plugins_loaded | 〇 |
| wp_roles_init | |
| setup_theme | |
| after_setup_theme | |
| set_current_user | |
| init | |
| register_sidebar | |
| wp_loaded | |
| send_headers | |
| parse_query | |
| pre_get_posts | |
| wp | |
| template_redirect | |
| get_header | |
| wp_head | 〇 |
サンプルコード一覧
サンプルコード 1
function add_custom_inline_styles() {
wp_add_inline_style( 'my-theme-style', 'body { background-color: #f0f0f0; }' );
}
add_action( 'wp_enqueue_scripts', 'add_custom_inline_styles' );
このサンプルは、テーマのスタイルシートに対してボディの背景色を変更するインラインスタイルを追加します。
サンプルコード 2
function custom_button_style() {
$css = '.custom-button { color: #ff0000; background-color: #000; }';
wp_add_inline_style( 'my-button-style', $css );
}
add_action( 'wp_enqueue_scripts', 'custom_button_style' );
このサンプルは、カスタムボタンのスタイルを追加するインラインCSSを定義し、ボタンスタイルに適用します。
サンプルコード 3
function unique_header_styles() {
if ( is_single() ) {
wp_add_inline_style( 'theme-styles', 'h1 { font-size: 2.5em; }' );
}
}
add_action( 'wp_enqueue_scripts', 'unique_header_styles' );
このサンプルは、単体表示の投稿でのみヘッダーのフォントサイズを変更するインラインスタイルを追加します。
サンプルコード 4
function dynamic_widget_styles() {
$user_color = get_option( 'widget_bg_color' );
$css = '.widget { background-color: ' . esc_attr( $user_color ) . '; }';
wp_add_inline_style( 'widget-style', $css );
}
add_action( 'wp_enqueue_scripts', 'dynamic_widget_styles' );
このサンプルは、ユーザーが設定したウィジェットの背景色に基づいてインラインスタイルを追加します。
サンプルコード 5
function custom_gallery_styles() {
if ( is_gallery() ) {
$css = '.gallery { display: flex; }';
wp_add_inline_style( 'gallery-style', $css );
}
}
add_action( 'wp_enqueue_scripts', 'custom_gallery_styles' );
このサンプルは、ギャラリーが表示されるページでギャラリーのスタイルにインラインCSSを追加します。