本記事では、WordPressでヘッダー(header)とフッター(footer)を別ファイルに切り分けそれを各ファイルで読み込む方法について解説しています。
WordPressの学習におすすめ参考書
1冊ですべて身につくWordPress入門講座
| 著者 | Mana |
|---|---|
| 発売日 | 2022/3/22 |
| ページ数 | 344ページ |
| Kindle版 | ○ |
| レビュー (Amazon) | (217件) |
【中・上級者向け】オリジナルテーマの作り方が学べるおすすめ参考書
WordPressオリジナルテーマ制作入門
| 著者 | 清水 由規 / 清水 久美子 / 鈴木 力哉 / 西岡 由美 |
|---|---|
| 発売日 | 2022/1/13 |
| ページ数 | 416ページ |
| Kindle版 | ○ |
| レビュー (Amazon) | (53件) |
サンプルコード
以降の解説では、下記のサンプルコードを使用します。
<!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で読み込みされるようになります。
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 
