【制作テクニック】PHPでパーツを共通化しつつ、titleなどページ独自の内容も出力する

【制作テクニック】PHPでパーツを共通化しつつ、titleなどページ独自の内容も出力する

複数のページに同じ内容をなんども書き込むのは効率も悪いし、メンテナンス性も下がります。

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とタイトルを作成出来ます。

もっとスマートなやり方もあると思いますが、一つの案としていかがでしょうか。

 

SPONSORED LINK

CONTACT

ご意見やご感想、お仕事のご依頼など
お気軽にご連絡ください。

CONTACT FORM