お問い合わせ
お問い合わせ
ホーム > WordPress > テーマ開発 > WordPressテーマに欠かせない！wp_footer()とwp_head()の役割と使い方

WordPressテーマに欠かせない！wp_footer()とwp_head()の役割と使い方

WordPress
wp_head()とwp_footer()の使い方を解説するWordPressテーマ開発向けアイキャッチ画像
WordPressテーマ開発に必須のwp_head()とwp_footer()の使い方をわかりやすく解説

WordPressでオリジナルテーマやカスタマイズテーマを作成するときに必ず登場する関数が wp_head() と wp_footer()。
一見地味ですが、WordPressサイトの正常な動作やプラグイン連携に欠かせない重要な役割を持っています。

この記事では、それぞれの関数の役割や具体的な使い方について、初心者にもわかりやすく解説します！

wp_head()とは？

✅ 主な役割

wp_head() は、HTMLの <head> タグの直前に、WordPressやプラグイン、テーマが必要とするCSSやJavaScript、メタタグなどを自動的に出力するための関数です。

🧠 具体的に出力されるものの例

  • WordPressのバージョン情報
  • GutenbergやブロックエディタのCSS
  • プラグインの追加CSS/JS（例：SEO、キャッシュ系）
  • OGPやcanonicalタグなどのメタ情報
  • フォントの読み込み

🛠️ 使い方

header.php の <head> タグ内、ほぼ最後に次のように記述します：

<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
  <?php wp_head(); ?>
</head>

<?php wp_head(); ?> を忘れると、プラグインやエディタのスタイルが正しく反映されなくなり、表示崩れや動作不良が起こる可能性があります。

wp_footer()とは？

✅ 主な役割

wp_footer() は、</body> タグの直前で、追加のJavaScriptコードやスクリプトを出力するための関数です。

🧠 出力されるものの例

  • プラグインが挿入するトラッキングタグ（例：Google Analytics）
  • jQueryなどの読み込み
  • Lazy Load、広告コード、チャットツールなどのJS
  • Ajax処理用の変数や関数

🛠️ 使い方

footer.php の </body> タグの直前に次のように記述します：

<?php wp_footer(); ?>
</body>
</html>

こちらも書き忘れると、Google Analyticsや広告などの計測タグが動かなくなったり、JavaScriptが正しく実行されなくなります。

🔍 なぜこれらが「必須」なのか？

WordPressや多くのプラグインは、wp_head() や wp_footer() にフックして機能を追加しています。
これらが記述されていないと、以下のような不具合が発生する可能性があります：

  • サイトデザインが崩れる
  • プラグインが正しく動作しない
  • SEOやSNS連携（OGP）が効かない
  • アナリティクスが正確に計測されない

✅ チェックポイント：自作テーマでは特に注意！

WordPress公式テーマや有名なテーマではこれらの関数は必ず含まれていますが、自作テーマやミニマルテーマではつい省略してしまうことがあります。

最低限、以下の2つは必ず入れておきましょう：

  • wp_head() … </head> 直前
  • wp_footer() … </body> 直前

まとめ

関数名使う場所主な役割
wp_head()<head>内CSS・メタタグ・プラグイン追加処理
wp_footer()</body>の直前JavaScript・トラッキングコードなど

WordPressの正しい動作とプラグイン連携のために、どちらも欠かせない関数です。
テーマ作成時は必ず記述するようにしましょう！

🔗 参考サイト（英語）

📝 関連記事