WordPressテックラボ

JSやCSSファイルをインラインで出力(functions.php)

表示速度を考えると、読み込むファイル数は最小限にしたいところです。
通常はCSSやJavaScriptを外部ファイルとして読み込みますが、functions.phpを使ってインラインに出力することもできます。

WordPressにはwp_add_inline_style()という関数が用意されていて、これでインラインにスタイルシートを出力することができます。

構文:
wp_add_inline_style( $handle, $data )
wp_add_inline_style()関数の引数
引数 内容
$handle スタイルのハンドル名を指定。
$data スタイルの値を指定。

wp_add_inline_style()関数の戻り値は、正常にスタイルが追加された場合はtrue、追加できなかった場合はfalseが返されます。

それでは、CSSファイルをインライン出力してみましょう。
これから紹介するコードでwp_enqueue_style()やwp_enqueue_script()を使いますが、詳しくは下記を参考にしてください。

wp_add_inline_style()の第一引数はハンドル名です。このハンドル名にはすでに使われているハンドルを指定する必要があります。
まだ使っているハンドルがない場合、wp_register_style()でハンドルを登録し、wp_enqueue_style()でCSSスタイルファイルをキューに追加します。

// CSSスタイルファイルをキューに追加
wp_register_style( 'style', false );
wp_enqueue_style( 'style' );

次にfile_get_contents()関数でファイルを読み込み、その内容をwp_add_inline_style()に渡します。ここでは、WordPressがデフォルトで読み込むstyle.cssを対象にしています。

// style.cssファイルを読み込み
$css = file_get_contents( get_stylesheet_uri(), true );
// インラインにCSSの内容を出力
wp_add_inline_style( 'style', $css );

コードの全体は下記のようになります。このコードはfunctions.phpに追加してください。

/**
 * CSSをインラインで追加
*/
function output_inline_style() {
	// CSSスタイルファイルをキューに追加
	wp_register_style( 'style', false );
	wp_enqueue_style( 'style' );
	// style.cssファイルを読み込み
	$css = file_get_contents( get_stylesheet_uri(), true );
	// インラインにCSSの内容を出力
	wp_add_inline_style( 'style', $css );
}
add_action( 'wp_enqueue_scripts', 'output_inline_style' );

先程使った関数にはスクリプト用のものもあり、wp_register_script()、wp_enqueue_script()、wp_add_inline_script()関数を使ってJavaScriptをインラインに読み込むことができます。
ただ、この方法はサイトで1つのJavaScriptしか読み込まず、それをBODYタグ前に置きたいときには使えません。そのような場合は、次のように直接SCRIPTタグを出力してしまいましょう。

/**
 * JSファイルをインラインで追加
*/
function output_inline_script() {
	$js = file_get_contents( get_template_directory_uri().'/js/main-dist.js', true );
	if( $js !== null ){
		echo '';
	}
}
add_action( 'wp_footer' , 'output_inline_script' );

関連記事