ウェブデザイナーの毎日のお仕事のメモ

作成日:2019.10.02  最終更新日:2019.10.02

WordPress

【wordpressのテーマをつくる】header.php footer.php

wordpressのテーマのheader.phpとfooter.phpは、どのように使うのかのメモです。

超基本の header.php と footer.php の作り方

wordpressのheader.php と footer.php とは、そもそも何かというと、
テーマ内で使用する、テンプレートファイルのことです。

ヘッダーとフッターをモジュールのような感じでテンプレート化して、
サイト共通のパーツとして読み込む、という使い方ができます。

header.php と footer.phpの作り方

まず、下のような内容のファイルを作ったとします。

元になるコード

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>

<header>
	ここにヘッダーの内容を入れる
</header>

<main>
	ここにメインの内容を入れる
</main>

<footer>
	ここにフッターの内容を入れる
</footer>

</body>
</html>

header.php をつくる

元になるコードの上の方を切り取ってきて、header.phpをつくります。
その時大事なことですが、

<?php wp_head(); ?>

というコードを、headタグの閉じタグの前に追記してください。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>

<header>
	ここにヘッダーの内容を入れる
</header>

<main>

footer.phpをつくる

元になるコードの上の方を切り取ってきて、footer.phpをつくります。
その時大事なことですが、

<?php wp_footer(); ?>

いうコードを、bodyタグの閉じタグの前に追記してください。

</main>

<footer>
	ここにフッターの内容を入れる
</footer>

</body>
</html>

これで、header.php と footer.php の完成です。
※かなり簡略化した内容ですが、実際には、headタグ内で、cssを読み込んだり、jsを読み込んだり、色々なコードが含まれた状態になるかと思います。

header.php と footer.php の読み込み方

例えば、固定ページをつくる場合に header.php と footer.php を読み込むときは、

header.phpの読み込みは、 <?php get_header();?>
footer.phpの読み込みは、 <?php get_footer();?> 

と書きます。

以下のようなイメージです。

ヘッダーとフッターは共通でいい場合は、固定ページでも、個別記事ページでも、トップページでも、1つテンプレートファイルをつくればそれを読み込めばいい!ということです。

hedaer.php と footer.php を読み込んで page.php をつくる

1番最初に記述した元になるコードを元に、hedaer.php と footer.php を読み込んで page.php をつくるとすると、以下のようなコードになります。

<?php get_header();?>

	ここにメインの内容を入れる

<?php get_footer();?>

最新記事