WordPress functions.php

試しに CSS を当てたいときや、ちょっとした直しのときは、wp_head のフックで echo するのがいちばん手軽です。

/**
 * <head> の中に、試しの style と script を書き足す（いちばん手軽な書き方）
 */
add_action( 'wp_head', function () {
	echo '<style id="my-head-style">body{background:#fff;}</style>' . "\n";
} );

いつも使うものは、WordPress の決まりの書き方にしておくと、ほかのプラグインとぶつかりにくく、並び順も WordPress が決めてくれます。

/**
 * WordPress の決まりの書き方で、<head> に style と script を足す
 */
// CSS：中身だけのスタイルを登録して、そこに足す
add_action( 'wp_enqueue_scripts', function () {
	wp_register_style( 'my-inline', false );
	wp_enqueue_style( 'my-inline' );
	wp_add_inline_style( 'my-inline', 'body{background:#fff;}' );
} );

// JavaScript：script タグを WordPress に書き出してもらう
add_action( 'wp_head', function () {
	wp_print_inline_script_tag( "console.log('head に追加');", array( 'id' => 'my-inline-script' ) );
} );

確かめた結果

このサイトの作業環境（WordPress 7.1）で、3 つの書き方を一度に試しました。

試しに入れたコードは、確かめたあと消しました。

条件の関数と組み合わせると、決まったページだけに足せます。前は URL に「/amp」が入っているかで AMP のページを見分けていましたが、AMP のプラグインを使っているなら、プラグインの amp_is_request() で見分けるほうが確かです。

/**
 * 決まったページのときだけ、<head> に足す
 */
add_action( 'wp_head', function () {
	// トップページのときだけ
	if ( is_front_page() ) {
		echo '<style>.my-top-only{display:block;}</style>' . "\n";
	}

	// AMP のプラグインを使っていて、AMP のページのときだけ
	if ( function_exists( 'amp_is_request' ) && amp_is_request() ) {
		echo '<style>.file_name{display:none;}</style>' . "\n";
	}
} );

• wp_head（アクション）
• wp_add_inline_style()
• wp_print_inline_script_tag()