1. ホーム
  2. WordPress

【WordPress】wp_head と wp_footer の役割と使い方|テーマに必須のフック

Share

自作テーマを作ったらプラグインが効かない、管理バーが表示されない、CSS や JavaScript が読み込まれない——その原因の多くは wp_head()wp_footer() の書き忘れです。この2つは、WordPress が必要な情報を <head> やページの末尾に出力するための、テーマに必須のテンプレートタグです。この記事では、wp_head()wp_footer() が何をしているのか、どこに書くのか、自分で処理を追加する方法、書き忘れたときに起こる不具合まで、初心者の方にも分かるように解説します。

wp_head と wp_footer の役割

wp_head()wp_footer() は、WordPress やプラグイン、テーマが必要な出力を差し込むための「窓口」です。関数自体は単純で、内部でそれぞれ wp_headwp_footer というアクションフックを実行しています。ここに、さまざまな機能が add_action() で出力を登録しているのです。

関数書く場所主に出力されるもの
wp_head()</head> の直前CSS・メタ情報・各種スクリプトの読み込み
wp_footer()</body> の直前フッターのスクリプト・管理バー

たとえば wp_enqueue_style() で登録したスタイルシートや、SEO プラグインが出力する meta タグ、お問い合わせフォームの JavaScript などは、すべてこの2つの窓口を通して出力されます。つまり wp_head() / wp_footer() がないと、これらが一切ページに出てこなくなります。

テンプレートでの書き方

wp_head()header.php</head> の直前、wp_footer()footer.php</body> の直前に書きます。どちらも閉じタグのすぐ前に置くのが決まりです。

header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <?php wp_head(); // </head> の直前に必ず書く ?>
</head>
<body <?php body_class(); ?>>
footer.php
  <footer>
    <p>&copy; My Site</p>
  </footer>

  <?php wp_footer(); // </body> の直前に必ず書く ?>
</body>
</html>

この2行は、テーマを作るうえで省略してはいけない決まりごとです。見た目には何も表示されませんが、裏側で多くの機能が動くための土台になっています。

wp_head に自分で処理を追加する

wp_head() はアクションフックなので、functions.php から add_action() で自分の出力を差し込めます。CSS・JavaScript の読み込みは wp_enqueue_scripts フックを使うのが正攻法ですが、meta タグなど直接 <head> に出したいものは wp_head フックに登録します。

functions.php
<?php
// head 内に独自の meta タグを出力する
function mytheme_add_meta() {
    echo '<meta name="theme-color" content="#ffffff">' . "\n";
}
add_action('wp_head', 'mytheme_add_meta');

同じように、ページの最後に解析タグなどを入れたいときは wp_footer フックを使います。wp_footer に登録した出力は </body> 直前に置かれるため、ページ表示を妨げにくいという利点があります。

functions.php
<?php
function mytheme_footer_script() {
    echo '<script>console.log("footer");</script>' . "\n";
}
add_action('wp_footer', 'mytheme_footer_script');

書き忘れると起こる不具合

プラグインが効かない

多くのプラグインは wp_head / wp_footer を通して CSS や JavaScript を出力します。そのため、これらを書き忘れたテーマではプラグインがまったく動かないように見えます。「プラグインを入れたのに反映されない」というときは、まずテーマにこの2行があるか確認しましょう。

管理バーが表示されない

ログイン中に画面上部へ出る管理バー(ツールバー)は、wp_footer() を通じて出力されます。wp_footer() がないと、ログインしていても管理バーが現れません。「サイト表示に管理バーが出ない」場合は footer.php を見直してください。

CSS や JavaScript が読み込まれない

wp_enqueue_style()wp_enqueue_script() で正しく登録しても、出力先である wp_head() / wp_footer() がなければページに反映されません。スタイルが当たらない・スクリプトが動かないときは、登録方法だけでなく出力する窓口があるかもあわせて確認するのが解決の近道です。

まとめ

wp_head()wp_footer() は、WordPress のテーマに欠かせない出力の窓口です。要点を整理します。

  • wp_head()</head> 直前、wp_footer()</body> 直前に必ず書く。
  • 中身はアクションフック。CSS・スクリプト・メタ情報・管理バーなどが出力される。
  • 自分で出力を足すときは add_action('wp_head', ...) / add_action('wp_footer', ...)
  • 書き忘れるとプラグインが効かない・管理バーが出ない・CSS が読み込まれない。

自作テーマで何かがうまく動かないときは、まず header.phpfooter.php にこの2つがあるかを確認する習慣をつけておくと、原因の切り分けがぐっと早くなります。

参考ページ