ワードプレスのwp_add_inline_style関数の使用方法・解説

概要

wp_add_inline_style 関数は、WordPress において特定のスタイルシートに対してインラインスタイルを追加するための関数です。この関数は、動的に生成された CSS ルールをスタイルシートに挿入したい場合などに使用されます。たとえば、以下のようなシーンで活用されることがあります。

1. テーマやプラグインの設定に基づいて動的にスタイルを変更する。
2. ユーザーが選択した設定に基づいたカスタマイズを行う。
3. 特定のページや投稿に対してカスタムスタイルを適用する。
4. JavaScript の出力と連携してスタイルを変更する。
5. ブロックエディター向けのカスタムスタイルを追加する。
6. 外部のプラグインが生成するスタイルの変更を行う。
7. テーマ開発時のデバッグ情報をインラインで追加する。
8. 特定の条件に応じてレスポンシブデザインを適用する。

構文

wp_add_inline_style( $handle, $css );

パラメータ

• $handle (string): インラインスタイルを追加するスタイルシートのハンドル名。
• $css (string): 追加する CSS コード。

戻り値

• (bool): 成功した場合は true、失敗した場合は false が返されます。

関連する関数

• wp_enqueue_style
• wp_dequeue_style

使用可能なバージョン

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を追加します。