BLOG

【たった1行追加でOK】自作WordPressテーマheader・footer.phpを作ろう

kanri
本記事はこんな方にオススメです
  • 自作(オリジナル)WordPressテーマを作成したいとお考えの方
  • WordPressテーマのheader.phpとfooter.phpについて詳しく知りたい方
  • WordPressを利用している or 利用予定 の方
  • Webデザイナーを目指している方

今回は、自作WordPressテーマ作成に必須のファイル「ヘッダー(header.php)」「フッター(footer.php)」の作り方について解説します。

WordPressにはたくさんの便利なタグが用意されていますが、今回は最低限必要な記述に絞って解説しています。

事前準備として、ヘッダーとフッターを静的(HTML・CSS)にコーディングしておく必要があります。

自作WordPressテーマ作成については、下記記事でまとめてご紹介しています。ぜひあわせてご覧ください!

あわせて読みたい
自作WordPressテーマを作ろう【過去記事まとめ】
自作WordPressテーマを作ろう【過去記事まとめ】

自作WordPressテーマに必須のheader.php、footer.phpとは

その名の通り、header.phpはヘッダーを表示するためのファイル、footer.phpはフッターを表示するためのファイルです。

このheader.phpとfooter.phpは、WordPressテーマに必須です。

自作WordPressテーマ「ヘッダー(header.php)」の作り方

ヘッダーの例

まず、静的にコーディングしたヘッダー部分のコードを、「header.php」としてWordPressテーマフォルダ内に保存します。

※どこまでをヘッダーに含むかは自由ですが、Webサイト上部の全ページ共通部分はヘッダー(header.php)に含めるのが一般的です。

その後、下記のように、一部のコードをWordPress専用コードに書き換えましょう。

【必須】</head>の直前にwp_headを追加

1<?php wp_head(); ?>
2</head>
えりー
えりー

これだけ必須です!

bodyにclassを追加する

各ページのbodyに、ページ毎に異なるclassを追加することができます。

ページ毎にデザインを指定する時に非常に便利なので、ぜひ追加しておきましょう。

変更前

1<body>

変更後

1<body <?php body_class(); ?>>
えりー
えりー

これで、自動でページ毎に違ったclassがつきます。

《(応用)2つ目のheaderを作る方法》

下層ページはヘッダーを変えたい場合などは、ファイル名を「header-●●.php」として保存します。

ヘッダーを呼び出す時は<?php get_header(‘●●‘); ?>とします。

例)header-under.php

呼び出し→<?php get_header(‘under‘); ?>

自作WordPressテーマ「フッター(footer.php)」の作り方

フッターの例

ヘッダーと同じように、静的にコーディングしたフッター部分のコード「footer.php」としてWordPressテーマフォルダ内に保存します。

その後、下記のように、一部のコードをWordPress専用コードに書き換えましょう。

【必須】</body>の直前にwp_footerを追加

1<?php wp_footer(); ?>
2</body>
えりー
えりー

フッターもこれだけ必須です!

ヘッダーとフッターを呼び出す方法

トップページを表示するためのファイル「index.php」を作成して、上記で作成したヘッダー(header.php)とフッター(footer.php)を呼び出してみましょう。

index.phpに下記を記載して、UPします。

1<?php get_header(); ?>
2<!-- ここにコンテンツを記述します -->
3<?php get_footer(); ?>

「get_header」でヘッダー、「get_footer」でフッターを呼び出すことが出来ます。

えりー
えりー

とっても簡単ですね!

コンテンツは、get_headerとget_footerの間(「ここにコンテンツを記述します」と書かれてあるところ)に記述していってください。

まとめ:header.phpとfooter.phpを作成する際のポイント

header.phpとfooter.phpを作成する際のポイントをまとめました。

header.phpにはwp_headを必ず入れる

1<?php wp_head(); ?>
2</head>

footer.phpにはwp_footerを必ず入れる

1<?php wp_footer(); ?>
2</body>

ヘッダー(header.php)とフッター(footer.php)を呼び出す方法

1<?php get_header(); ?>
2<!-- ここにコンテンツを記述します -->
3<?php get_footer(); ?>

空創デザインオフィスでは、ホームページ制作・リニューアル、WordPress導入、自分でホームページを作りたい方へのサポートなども承っております。

下記ボタンよりお気軽にお問い合わせください!(お見積りは無料です)

あわせて読みたい
自作WordPressテーマを作ろう【過去記事まとめ】
自作WordPressテーマを作ろう【過去記事まとめ】
ABOUT ME
えりー
えりー
Web・グラフィックデザイナー / ブロガー
2018年よりフリーランスWeb・グラフィックデザイナー 兼 ブロガーとして活動しています。
都内IT系企業にて研鑽を積んだ後、起業しました。
IT・デザイン業界歴は10年以上。
今までに関わらせていただいたクライアント様は300社以上となります。
ブログでは、自身の経験を元に、Web・グラフィックデザイン制作のことや、就職・転職のこと等の情報を発信しています。
少しでも読者の皆様のお役に立てれば幸いです!
記事URLをコピーしました