複数のページに同じ内容をなんども書き込むのは効率も悪いし、メンテナンス性も下がります。
headerやfooterなどはパーツ化してインクルードさせてしまいましょう。
ただ、パーツ化するにあたってページ独自の内容を表示させる必要がある場合があります。
例えばheaderならtitleやdescriptionなどですね。
そこで今回はphpで共通パーツをインクルードしつつ、ページ個別のものだけはページ独自に記述出来るようにします。
共通パーツを用意する
まずは読み込ませる共有パーツを用意。
今回は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">
<!-- ページ独自のdescriptionを読み込ませる -->
<meta name="description" content="<?php echo description; ?>" >
<!-- ページ独自のtitleを読み込ませる -->
<title><?php echo title; ?></title>
<!-- ページ独自のcssを読み込ませる -->
<link rel="stylesheet" href="css/<?php echo cssinc; ?>.css" type="text/css">
</head>
<body>
<header
<div class="container">
<nav>
<h1><img src="images/logo.png"/></h1>
<ul class="nav">
<li><a href="/" class="<?php echo current1; ?>">TOP</a></li>
<li><a href="/hoge2.html" class="<?php echo current2; ?>">2ページ目</a></li>
<li><a href="/hoge3.html" class="<?php echo current3; ?>">3ページ目</a></li>
</ul>
</nav>
</div>
</header>この例だとheaderタグの終わりまで共通パーツとして使用します。
読み込む側のページにphpを記述
次に読み込む側のページにphpでインクルードさせる記述をしていきます。
今回はindex.html（トップページ）の場合です。
index.html
<?php
define("cssinc" ,"index");
define("current1" ,"current");
define("description" ,"このページで使用するディスクリプション");
define("title" ,"このページで使用するタイトル");
require_once($_SERVER['DOCUMENT_ROOT'] . '/header.html');
?>一応、注意点としてHTMLファイルでphpを読めるように.htaccessなどで設定が必要だったりしますのでご注意ください。
例えばこういう記述を.htaccessに追記するのですがサーバーによって異なりますのでご自身のサーバーを確認してください。
AddType x-httpd-php .html .htm解説
ページ独自のCSS
PHP
define("cssinc" ,"index");
HTML
<!-- ページ独自のcssを読み込ませる -->
<link rel="stylesheet" href="css/<?php echo cssinc; ?>.css" type="text/css">上の二つの記述が連動します。
この場合の出力結果は<link rel="stylesheet" href="css/index.css" type="text/css">となります。
ページ独自のCSSを読み込ませる場合に使います。
ナビで現在表示しているページにcurrentというクラスをつける
PHP
define("current1" ,"current");
HTML
<ul class="nav">
<li><a href="/" class="<?php echo current1; ?>">TOP</a></li>
<li><a href="/hoge2.html" class="<?php echo current2; ?>">2ページ目</a></li>
<li><a href="/hoge3.html" class="<?php echo current3; ?>">3ページ目</a></li>
</ul>上の二つの記述が連動します。
この場合の出力結果は
<ul class="nav">
<li><a href="/" class="current">TOP</a></li>
<li><a href="/hoge2.html" class="current2">2ページ目</a></li>
<li><a href="/hoge3.html" class="current3">3ページ目</a></li>
</ul>current1がcurrentに置き替わり、そのほかはcurrent2などと数字がついたまま出力されます。
currentだけにクラスを指定しておけば閲覧ページのみ該当のリンクを色を変えたり出来ます。
descriptionとタイトル
PHP
define("description" ,"このページで使用するディスクリプション");
define("title" ,"このページで使用するタイトル");
HTML
<!-- ページ独自のdescriptionを読み込ませる -->
<meta name="description" content="<?php echo description; ?>" >
<!-- ページ独自のtitleを読み込ませる -->
<title><?php echo title; ?></title>上の二つの記述が連動します。
この場合の出力結果は
<!-- ページ独自のdescriptionを読み込ませる -->
<meta name="description" content="このページで使用するディスクリプション" >
<!-- ページ独自のtitleを読み込ませる -->
<title>このページで使用するタイトル</title>これでページ独自のdescriptionとタイトルを作成出来ます。
もっとスマートなやり方もあると思いますが、一つの案としていかがでしょうか。
