wpのようにヘッダーフッターを共通化してサイトを作成する方法
更新日：2022年2月9日
WP（ワードプレス）はヘッダーとフッターをそれぞれheader.php、footer.phpとして、
各ファイルではheader.php、footer.phpを読み込んでサイトを表示させる仕組みを取っています。
何故ならほとんどのサイトではヘッダーとフッターは共通で、ヘッダーフッターに挟まれたコンテンツ部分だけをページ毎に変更しているからです。
ってな訳で今回はWPではないサイトをWPのような作りで運用する制作方法をご紹介します。
具体的にはヘッダーフッターを共通化する方法になります。
header.php、footer.php、index.phpの順に作成していきましょう。
それぞれのサイトの設計によって構造は変わりますので、必要最低限の記述のみをしています。まずトップページが完成しているのなら、そのソースコードをheader.php、footer.php、index.phpの3分割にしていくことになります。
例では以下のような階層になっています。
index.php
_incフォルダ
┗header.php
┗footer.php
index.phpのある階層に_incというフォルダがあり、そのフォルダ内にheader.phpとfooter.phpがあります。
header.php
<!doctype html> <html> <head><?php echo $title; ?> </head> <body>
ご自身のサイトによるのであくまで例になりますが、肝となるの部分は以下3点です。
- タイトルタグの中は<?php echo $title; ?>とする
- メタディスクリプションタグのcontentの中は<?php echo $description; ?>とする
- CSSやJSの読み込み、aタグ等相対パスを書く場合は頭に<?php echo $path; ?>とする
footer.php
</body> </html>
こちらも同様に、CSSやJSの読み込み、aタグ等相対パスを書く場合は頭にとするのが肝となります。
index.php
<?php
$title = 'タイトルを記述';//ページごとに変更
$description = '説明文を記述';//ページごとに変更
$path = "./";//トップディレクトリのindex.phpの階層を指定すればOK
?>
<?php include $path . ('_inc/header.php'); ?>
<div class="wrapper">
<!-- ここにヘッダーフッター以外のコンテンツを記述 -->
</div>
<?php include $path . ('_inc/footer.php'); ?>
$title、$description、$pathはそのページの内容に合わせて変更します。
ページごとに違うタイトル、ディスクリプション、パスをここに記述してあげることで、設定することが出来ます。
<?php include $path . ('_inc/header.php'); ?>
<?php include $path . ('_inc/footer.php'); ?>
ではヘッダーとフッターを読み込んでおり、includeの後に$pathを付け加えることで、階層が違うファイルの場合に起きるリンク切れを防ぐ役割をしています。
これにて仕組み作りが完成しました！
完成データのダウンロードしたい方はこちらから！
あとはご自身の環境に合わせてあてはめていって下さい。
