2025年07月10日[木曜日]

WordPress標準ヘッダー・フッターでテーマ機能を最大化しよう！

  • 2025/07/09
  • BASICS
  • WordPressの基礎
  • 0comments
  • 22views
  • 約6分で読めます
  • 18

前回の記事では、WordPressの標準メニュー機能を活用して、管理画面からナビゲーションを効率的に管理する方法を学習しました。functions.phpの基本的な使い方から、wp_nav_menu()関数による動的メニュー表示まで、WordPressテーマ開発における重要な基盤を構築しました。

しかし、現在のテーマにはまだ課題があります。WordPressの機能をフル活用するためには、WordPress標準のヘッダー・フッターの読み込み機能が不可欠です。これらの機能が不足していると、編集画面での設定が正しく反映されず、プラグインの機能も制限されてしまいます。

今回の目標

  • WordPress標準ヘッダー・フッターの重要性を理解
  • wp_head()とwp_footer()関数の実装
  • 管理画面の設定がWebページで正しく反映される環境の構築
  • WordPressの機能をフル活用できるテーマへの改良

この記事では、WordPress標準のヘッダー・フッター機能を実装し、WordPressの機能をフル活用できるテーマに改良する方法を学習します。

現状、WordPress標準ヘッダーが有効でないことを実感

まず、現在のテーマでWordPress標準ヘッダーが有効になっていないことを実際に確認してみましょう。

管理画面でサンプルページを編集

  1. WordPressの管理画面にアクセス
  2. 固定ページ → 固定ページ一覧
  3. 既存のページ（例：「会社概要」）を選択して編集
  4. エディタで一部の文章を選択
  5. 中央寄せボタンをクリック
  6. ページを更新

サイトを表示して確認

編集したページをWebブラウザで表示してみましょう。

結果：中央寄せが機能していない

管理画面の編集画面では中央寄せが適用されているように見えますが、実際のWebページでは中央寄せが機能していません。

原因：WordPress標準スタイルが適用されていない

これは、編集画面では適用されているWordPress標準のスタイルが、Webページでは適用されていないためです。

それこそが、WordPress標準ヘッダーが有効になっていない証拠です。

このように管理画面で設定した編集内容やプラグインの機能を有効にするためには、WordPress標準ヘッダーの読み込みが必要になります。

WordPress標準ヘッダーを有効にしよう

WordPress標準ヘッダーを有効にするには、wp_head()関数をheader.phpに追加する必要があります。

wp_head()関数の追加

  1. header.phpファイルを開く
  2. </head>タグの直前に以下のコードを追加
<?php wp_head(); ?>

修正後のheader.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php the_title(); ?></title>
    <?php wp_head(); ?>
</head>
<body>
    <header>
        <h1><?php the_title(); ?></h1>
        <?php wp_nav_menu('header-menu'); ?>
    </header>
    <main>

効果の確認

ファイルを保存して、再度Webページを確認してみましょう。

結果：中央表示が有効になっています

今度は、管理画面で設定した中央寄せが正しく反映されています。これがWordPress標準ヘッダーが有効になった証拠です。

WordPress標準フッターもある

ヘッダー同様、WordPress標準フッターも存在します。

WordPress標準フッターの役割

  • JavaScript の読み込み：WordPressが必要とするJavaScriptファイルの読み込み
  • 管理者ツールバーの機能有効化：ログイン中に表示される管理者ツールバーの機能
  • プラグインの機能支援：プラグインがフッター部分で必要とする処理の実行

WordPress標準フッターを有効にしよう

WordPress標準フッターを有効にするには、wp_footer()関数をfooter.phpに追加する必要があります。

wp_footer()関数の追加

  1. footer.phpファイルを開く
  2. </body>タグの直前に以下のコードを追加：
<?php wp_footer(); ?>

修正後のfooter.php

    </main>
    <footer>
        <p>© 2024 サンプルサイト. All rights reserved.</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

効果の確認

ファイルを保存して、再度Webページを確認してみましょう。

結果：ページ上部に黒い帯の管理者ツールバーが表示されました

これにより、Webページから管理画面へ簡単にアクセスすることができるようになりました。

注意：ログアウトすると、この管理者ツールバーは消えます。

WordPress標準ヘッダーでも追加されないコードがある

「wp_head()を追加すれば、WordPressが必要なものは全部自動で追加してくれるんじゃないの？」

そう思った方も多いのではないでしょうか。確かに、wp_head()関数は多くの重要なコードを自動的に追加してくれますが、実はすべてを網羅しているわけではありません。

手動で追加が必要なコードもある

例えば、現在header.phpに記載している以下のコードは、wp_head()では追加されません。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

WordPress標準ヘッダーの役割を理解しよう

WordPress標準ヘッダー（wp_head()）が自動的に追加するのは、主にWordPressが管理するものです。

  • 管理画面での編集内容を反映するためのスタイル
  • プラグインが必要とするスタイルやスクリプト
  • 管理者ツールバーを表示するためのコード

一方で、Webサイト全般で必要な基本的なコードは、開発者が手動で追加する必要があります。

WordPressのことはWordPressが、それ以外は自分で追加するということです。この区別を理解することで、より適切なテーマ開発ができるようになります。

まとめ

今回習得したスキル

  • wp_head()関数の実装：WordPress標準ヘッダーの有効化
  • wp_footer()関数の実装：WordPress標準フッターの有効化
  • WordPress機能の活用：管理画面の設定が正しく反映される環境の構築
  • WordPress標準機能の理解：自動追加される内容と手動追加が必要な内容の区別

WordPress標準ヘッダー・フッターの重要性

WordPress標準のヘッダー・フッター機能を実装することで

  • 管理画面の設定が正しく反映：編集画面での設定がWebページで有効になる
  • プラグインの機能が有効：プラグインが必要とするリソースが正しく読み込まれる
  • 管理者ツールバーの活用：Webページから管理画面への簡単なアクセス
  • WordPress生態系の活用：WordPressの豊富な機能を最大限に活用可能

を実現することができます。

プロフェッショナルなテーマ開発への重要な一歩

wp_head()とwp_footer()の実装は、WordPressテーマ開発において必須の基盤です。これらの関数なしでは、WordPressの多くの機能が制限され、プロフェッショナルなテーマとしては不完全な状態になってしまいます。

今回の実装により、WordPressの機能をフル活用できるテーマの基盤が完成しました。

WordPress標準ヘッダー・標準フッターは必要以上にコードを出力しています

WordPress標準のヘッダー・フッター機能を有効にすることで、WordPressの機能をフル活用できるようになりましたが、一つ注意すべき点があります。

自動追加されるコードの確認

実際のWebページのソースコードを確認してみましょう。

  1. Webページを表示
  2. CTRL+Uキーを押す

発見：header.phpやpage.phpに記述した以上のコードが自動で追加されています

また、classタグにも様々な記号が付加されています。

標準ヘッダー・フッター追加後と追加前を比較すると一目瞭然です。

いかに多くの機能が標準ヘッダー・フッターによって追加されたかわかります。

標準ヘッダー・フッターを追加後
標準ヘッダー・フッターを追加前

「余計なコード」をきれいにできる

「あれ？なんだか思っていた以上にHTMLソースが複雑になっている…」

そう感じた方もいるかもしれません。確かに、WordPress標準のヘッダー・フッター機能は、便利な反面、必要以上にコードを出力している側面があります。

でも安心してください。この「余計なコード」は、functions.phpによって自動的に付加しないようにすることも可能です。

のちのち、その方法も説明します。

まずは、WordPress標準機能の基本的な使い方をマスターしてから、必要に応じてカスタマイズを検討していきましょう。

次回：スタイルシート読み込みをマスターしよう

これでスタイルシートを読み込む準備ができました。

次回は2種類のスタイルシート読み込み方法を解説します。

  1. header.phpにlinkタグを直書き：従来のHTML方式
  2. wp_enqueue_style で読み込む：WordPress推奨方式

どちらの方法にもメリット・デメリットがあり、状況に応じて使い分けることが重要です。WordPressの機能をフル活用したスタイルシートの読み込み方法を学び、より完成度の高いテーマを構築していきましょう。

重要なポイント

今回実装したwp_head()とwp_footer()は、WordPressテーマ開発において絶対に欠かせない機能です。これらの関数により、WordPressの豊富な機能を活用し、管理画面からの設定が正しく反映される、プロフェッショナルなテーマを構築することができます。

次回のスタイルシート読み込み方法と合わせて、WordPressテーマ開発の基盤となる重要な技術を着実に習得していきましょう。

成果物

この記事で作成した成果物は、以下のページでまとめて確認することができます。

WordPress標準ヘッダー・フッターでテーマ機能を最大化しよう！

この記事の評価をお願いします

評価をすると「既読」となり、まだ読んでいない記事を区別できます。

この投稿をシェアする

コメントを残す

CAPTCHA


WordPressの標準メニュー機能でナビゲーションを効率管理しよう！

WordPressの標準メニュー機能でナビゲーションを効率管理しよう！  BASICS

WordPressテーマ開発における効率的なナビゲーション管理の実装方法を解説します。現在のHTMLでのメニュー記述から脱却し、WordPressの標準メニュー機能を活用することで、技術的知識のない管理者でも管理画面から直感的にメニューを編集できる環境を構築します。

  • 2025/07/09
  • 0comments
  • 46views

STAY CONNECTED

wp-ch Admin

現役のフリーランスエンジニアがWordPressによるWebサイト構築を基礎から実践テクニックまで徹底解説します。

たくさんの方がフォローしてくれています。あなたもぜひ、情報を受け取ってください。

SERIES

CATEGORY

TAGS