wp_head フックの使い方|説明・引数・注意点

説明

wp_head は、head 要素内の出力時に実行されるアクションです。メタタグやタグの出力に使います。

基本構文

do_action( 'wp_head' )

引数

引数はありません。

戻り値

引数はありません。

使い方(サンプル)

add_action( 'wp_head', function() {
	echo '<meta name="theme-color" content="#ffffff">';
} );

注意点

  • テーマに wp_head() が書かれていないと、実行されません。
  • CSS・JSの読み込みは、wp_enqueue_scripts を使います。

実務での使いどころ

  • header.php の </head> の直前に、wp_head() を書き、スクリプトやCSS、メタタグを出力させる。
  • プラグインやSEOのタグを、<head> に出力するとき(add_action( 'wp_head', ... ))。

よくあるミスと対処

  • テーマの header.php に wp_head() がなく、プラグインのタグやCSSが出力されない。
  • <script> や <link> を、wp_head に直接書いている。CSSとJavaScriptは、wp_enqueue_script()・wp_enqueue_style() で読み込む。
  • </head> の後ろに、wp_head() を書いている。

NG例

add_action( 'wp_head', function () {
	echo '<script src="/js/a.js"></script>'; // 依存関係を管理できない
} );

OK例

add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_script( 'my-script', get_theme_file_uri( '/js/a.js' ), array(), '1.0.0', true );
} );

使い分け早見表

フック 出力する場所
wp_head <head> の終わりの直前
wp_body_open <body> の開始の直後
wp_footer </body> の直前

関連項目

wp_enqueue_scripts、wp_head、wp_footer()

公式リファレンス:wp_head | WordPress Developer Resources

コメント

タイトルとURLをコピーしました