WordPress でテーマやプラグインを作っていると、「わずかな CSS や JavaScript のために、わざわざ別ファイルを用意して読み込むのは大げさだ」と感じる場面があります。そんなときに便利なのが wp_add_inline_style() と wp_add_inline_script() です。この記事では、この2つの関数で登録済みのスタイル・スクリプトにインラインのコードを追加する方法を、基本のコードから実践例、つまずきやすい点まで解説します。対象は WordPress テーマ・プラグイン開発の初心者〜中級者の方です。
目次
インラインで追加するとは何か
ここでいう「インライン」とは、外部ファイルを読み込むのではなく、HTML の <style> タグや <script> タグの中に直接コードを書き出すことを指します。wp_add_inline_style() はページの <style> タグとして CSS を、wp_add_inline_script() は <script> タグとして JavaScript を出力します。
この方法が役立つのは、たとえば管理画面で設定したアクセントカラーを CSS 変数として書き出したいときや、外部スクリプトに渡す初期設定を数行だけ出力したいときなど、「ファイルにするほどでもない、けれど動的に生成したいコード」がある場合です。1行のためだけに .css や .js ファイルを作ってサーバーへの HTTP リクエストを増やす、といった無駄を避けられます。
なお、外部ファイルを wp_enqueue_style() / wp_enqueue_script() で読み込む基本については別記事で扱っています。この記事は、そうして登録したスタイル・スクリプトにインラインのコードを付け足すことに絞って説明します。
まず知っておきたい「ハンドル」の考え方
この2つの関数で最も大切なのは、第1引数に渡すのがすでに登録済みのハンドル名だという点です。ハンドルとは、wp_enqueue_style() や wp_enqueue_script()（あるいは wp_register_style() / wp_register_script()）でスタイル・スクリプトを登録するときに付けた識別名のことです。
インラインのコードは、この「親」となるハンドルにひも付けて追加されます。つまり wp_add_inline_style() や wp_add_inline_script() を単独で呼んでも、対応するハンドルが登録されていなければ何も出力されません。まずは親となるスタイル・スクリプトを登録し、その同じハンドル名を指定してインラインコードを追加する、という順番になります。
wp_add_inline_style でインライン CSS を追加する
最小の例を見てみましょう。テーマのメインスタイル（ハンドル名 mytheme-style）を登録し、そこにインライン CSS を追加します。
function mytheme_enqueue_assets() {
// 親となるスタイルを登録・読み込み
wp_enqueue_style(
'mytheme-style',
get_stylesheet_uri()
);
// そのハンドルにインライン CSS を追加
$custom_css = '.site-title { color: #c0392b; }';
wp_add_inline_style( 'mytheme-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );これで、mytheme-style の <link> タグの直後に、次のような <style> タグが出力されます。
<style id="mytheme-style-inline-css">
.site-title { color: #c0392b; }
</style>この仕組みが活きるのは、CSS の値を PHP 側で動的に組み立てたいときです。たとえばテーマカスタマイザーで選んだ色を反映させる、といったケースが典型です。
function mytheme_enqueue_assets() {
wp_enqueue_style(
'mytheme-style',
get_stylesheet_uri()
);
// カスタマイザーの値を取得（未設定なら既定色）
$accent = get_theme_mod( 'accent_color', '#3498db' );
// エスケープしてから CSS を組み立てる
$custom_css = ':root { --accent-color: ' . esc_html( $accent ) . '; }';
wp_add_inline_style( 'mytheme-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );ユーザー入力やオプションの値を CSS に埋め込むときは、上のように esc_html() などでエスケープしてから使うようにします。外部から入る値をそのまま出力すると、</style> を含む文字列を差し込まれて意図しないコードが実行される、といったリスクにつながるためです。
wp_add_inline_script でインライン JS を追加する
JavaScript も考え方は同じです。登録済みのスクリプトのハンドルを指定して、インラインの JS を追加します。
function mytheme_enqueue_scripts() {
// 親となるスクリプトを登録・読み込み
wp_enqueue_script(
'mytheme-script',
get_theme_file_uri( '/js/main.js' ),
array(),
'1.0.0',
true
);
// そのハンドルにインライン JS を追加
$inline_js = 'console.log( "テーマの JS が動いています" );';
wp_add_inline_script( 'mytheme-script', $inline_js );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_scripts' );wp_add_inline_script() には、wp_add_inline_style() にはない第3引数 $position があります。これはインラインコードを、親スクリプトの前に置くか後ろに置くかを指定するもので、'after'（既定）または 'before' を渡します。
| $position の値 | 出力される位置 |
|---|---|
'after'（既定） | 親スクリプトの <script> タグの後ろに出力する |
'before' | 親スクリプトの <script> タグの前に出力する |
'before' は、親スクリプトが読み込まれる前に設定値の変数を定義しておきたいときに使います。たとえば、外部スクリプトが参照する設定オブジェクトを先に用意しておくケースです。
function mytheme_enqueue_scripts() {
wp_enqueue_script(
'mytheme-script',
get_theme_file_uri( '/js/main.js' ),
array(),
'1.0.0',
true
);
// 設定オブジェクトを main.js より前に定義する
$config = array(
'apiUrl' => esc_url_raw( rest_url( 'myplugin/v1/data' ) ),
'perPage' => 10,
);
$before = 'const MYTHEME_CONFIG = ' . wp_json_encode( $config ) . ';';
wp_add_inline_script( 'mytheme-script', $before, 'before' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_scripts' );PHP の配列やオブジェクトを JavaScript に渡すときは、上のように wp_json_encode() で JSON 文字列に変換してから埋め込むのが安全です。手で文字列を連結してオブジェクトを組み立てると、値に含まれる引用符などで簡単に壊れてしまいます。
wp_localize_script との使い分け
「PHP の値を JavaScript に渡す」という目的では、以前から wp_localize_script() がよく使われてきました。この関数は指定した名前のグローバル変数（JavaScript オブジェクト）を出力するもので、内部的にはインラインスクリプトを 'before' の位置に追加する仕組みになっています。
両者の違いを整理すると次のようになります。wp_localize_script() は「データを名前付きオブジェクトとして渡す」ことに特化しており、値はすべて文字列に変換されるという性質があります（数値も文字列になる点に注意）。一方 wp_add_inline_script() は任意の JavaScript コードをそのまま書けるため、より自由度が高いのが特徴です。
| 関数 | 主な用途 |
|---|---|
wp_localize_script() | PHP の値を名前付きオブジェクトとして JS に渡す（値は文字列化される） |
wp_add_inline_script() | 任意の JS コードをインラインで追加する（'before' / 'after' を選べる） |
単純にデータを渡すだけなら wp_localize_script() でも十分ですが、数値や真偽値を型のまま扱いたい、あるいは初期化コードそのものを書き出したい、という場合は wp_add_inline_script() と wp_json_encode() の組み合わせが向いています。wp_localize_script() の詳しい使い方は別記事で解説しています。
インラインコードが出力されないとき
「関数を呼んだのに <style> や <script> が出てこない」という相談は少なくありません。原因はいくつかのパターンに分かれます。
親のハンドルが登録されていない
最も多いのがこれです。wp_add_inline_style() / wp_add_inline_script() は、第1引数のハンドルがその時点で登録済みでないと機能しません。ハンドル名のタイプミスや、wp_enqueue_style() より先にインライン追加を呼んでしまっているケースがないか確認します。まず登録、そのあとにインライン追加、という順序を守るのが確実です。
親スクリプト自体がページに読み込まれていない
インラインコードは親のタグと一緒に出力されるため、条件分岐などで親スクリプトが実際にはエンキューされていないと、当然インラインコードも出ません。たとえば特定のテンプレートでしか読み込まないように書いている場合、その条件を満たしていないページでは表示されません。まずは親のファイルが読み込まれているかを、ブラウザの開発者ツールで確認してみてください。
フックのタイミングがずれている
フロント側のスタイル・スクリプトは wp_enqueue_scripts フックの中で登録・追加するのが基本です。管理画面向けなら admin_enqueue_scripts になります。テーマの読み込み時（init など）に直接呼んでもうまく反映されないことがあるため、適切なエンキュー用フックの中で処理しているかを見直します。
まとめ
wp_add_inline_style() と wp_add_inline_script() は、登録済みのスタイル・スクリプトに少量のインライン CSS / JS を付け足すための関数です。ポイントは、第1引数が登録済みのハンドル名であること、そしてまず親を登録してからインラインコードを追加する順序を守ることです。wp_add_inline_script() では $position に 'before' / 'after' を指定して出力位置を選べ、PHP の値を渡すときは wp_json_encode() でエンコードすると安全に扱えます。単なる値渡しなら wp_localize_script()、任意のコードや型を保った値なら wp_add_inline_script()、と目的に応じて使い分けてみてください。