本記事では、WordPressでヘッダー(header)とフッター(footer)を別ファイルに切り分けそれを各ファイルで読み込む方法について解説しています。
- サイト運営に必須のことが学べる
- 基本的な使い方～オリジナルテーマ開発まで学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
サンプルコード
以降の解説では、下記のサンプルコードを使用します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<body>
<header>
<p>Header</p>
</header>
<main>
<p>Main Content</p>
</main>
<footer>
<p>Footer</p>
</footer>
</body>
</html>ヘッダーの分割と読み込み
まず始めに、ヘッダーの分割と分割したヘッダーファイルを読み込む方法について解説します。
分割したヘッダーのコードが記述される空のファイルを作成します。ヘッダーの名前は「header.php」にします。
続いて、ヘッダーとして共通化したいコードを決めます。サンプルコードの場合、「!DOCTYPE html」～「</header>」の内容をヘッダーとして共通化したいので、該当するコードをカットし先ほど作成した空のheader.phpに貼り付けます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>最後に、分割したheader.phpをindex.phpで読み込みます。読み込むためには「get_header()」を使用します。get_header()は、テーマディレクトリにあるheader.phpを読み込むためのテンプレートタグです。
<?php get_header() ?>
<main>
<p>Main Content</p>
</main>
<footer>
<p>Footer</p>
</footer>
</body>
</html>これで、header.phpがindex.phpで読み込みされるようになります。
フッターの分割と読み込み
フッターの分割と分割したフッターファイルを読み込む方法ですが、ヘッダーの時とほぼ同じです。異なる点はファイル名とテンプレートタグだけです。
ヘッダーと同様に、空のファイルを作成します。ファイル名は「footer.php」にします。
続いて、フッターとして共通化したいコードを決めます。サンプルコードの場合、「<footer>」～「</html>」の内容をフッターとして共通化したいので、該当するコードをカットし先ほど作成した空のfooter.phpに貼り付けます。
<footer>
<p>Footer</p>
</footer>
</body>
</html>最後に、分割したfooter.phpをindex.phpで読み込みます。読み込むためには「get_footer()」を使用します。get_footer()は、テーマディレクトリにあるfooter.phpを読み込むためのテンプレートタグです。
<?php get_header() ?>
<main>
<p>Main Content</p>
</main>
<?php get_footer() ?>これで、footer.phpがindex.phpで読み込みされるようになります。
