これまでの記事では、index.php にHTMLを直接記述して画面を表示してきました。
しかし、ページ数が増えてくると、すべてのファイルに同じヘッダーやフッターを書くのは大変です。
例えばサイト名を変更したい場合、すべてのファイルを修正しなければならなくなります。
そこでWordPressでは、共通部分を別ファイルとして切り出し、必要な場所で呼び出す仕組みが用意されています。
今回はファイル分割の第一歩として、ヘッダーとフッターを別ファイルに分ける方法を確認していきます。
header.phpの記述
実際にheader.phpの最小構成の記述を以下に示します。
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset=”<?php bloginfo(‘charset’); ?>”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title><?php bloginfo(‘name’); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<h1>ヘッダー部分</h1>
</header>
これはindex.phpの先頭に記述されていたものを</header>の部分までファイルとして切り分けた形になっています。<body>の閉じタグである</body>が無いのは、全てindex.phpに集約したときに完成するように考えてあるためです。今回の場合はもう一つのfooter.phpに出てきます。
footer.phpの記述
footer.phpの最小構成の記述は以下の通りです。
<footer>
<h1>フッター部分</h1>
</footer>
<?php wp_footer(); ?>
</body>
</html>
bodyタグを閉じて、最後にhtmlタグを閉じる記述があります。
そして、これらを合わせて呼び出すindex.phpは以下のような記述になります。
index.phpの記述
<?php get_header(); ?>
<main>
</main>
<?php get_footer(); ?>
これだけです。mainタグの間にはページの中身を読み込む記述を書きます。
つまり、headerとfooterに書いていた記述を、そのままphpファイルに移して、get_header(), get_footer()関数で呼び出す記述に置き換えた感じです。
ワードプレスの場合は、テーマの読み込みファイルとして、index.php以外にもpage.phpやsingle.phpなど複数のphpファイルが登場するので、それぞれにheaderとfooterの記述を書いていたら、一か所変更したときに、他のファイルも同様の変更を掛ける必要が出てきます。そんなときに全てgetで呼び出す記述にしておけば、外部ファイル化したheader.phpやfooter.phpを編集するだけで、他の全ページに変更が掛かるので、修正や管理が楽になります。
headerやfooterだけでなく、任意の記述を外部化するtemplate-partという機能もあるので、別の記事で紹介します。
このような共通部分をまとめる機能を使いこなして、ページ管理に役立てて頂ければと思います。
