PHPでテンプレート
こういうレイアウトのページが500以上は軽くあるであろうサイトを作る。
コンテンツページも多いし、メニューの分類も多い。
共通部分のヘッダー、サイドメニュー、フッターをテンプレート化する。
マークアップ
ファイルの準備
共通部分をテキストファイルとして保存する。
- ヘッダー部分のテキストファイル
header.txt
<div id="header">
<h1 id="pagetop"><a href="../index.html" title="トップページへ">SiteTitle</a></h1>
<!------------ヘッダーリンク-------------------->
<div id="headerlink" class="posrel">
<ul class="posabs">
<li id="shoppingsite"><a href="exlinkpage.html" target="_blank" title="OnlineShop"><span class="alt">OnlineShop</span></a></li>
<li id="englishsite"><a href="exlinkpage.html" target="_blank" title="EnglishSite"><span class="alt">English</span></a></li>
<li id="kidssite"><a href="exlinkpage.html" target="_blank" title="kids"><span class="alt">KIDS</span></a></li>
</ul>
</div>
<!------------検索ボタン-------------------->
<div id="exksb"><div id="kensakubar"><div id="ksbinner">
<div id="serchunit">
<form method="get" action="http://cgi.xxx.co.jp/search/siteSearch.do" id="SearchForm" name="SearchForm">
<span id="xxxweb">
<span onclick="javascript:xxxK();" onkeypress="javascript:xxxK();" id="xxxk"><input class="alt" type="radio" id="selectxxxk" name="kensakubar_radio" checked="checked" onclick="javascript:this.form.action='http://cgi.xxx.co.jp/search/siteSearch.do'" /><label for="selectxxxk" accesskey="t"><span class="alt">このサイト内から検索</span></label></span>
<span onclick="javascript:webK();" onkeypress="javascript:webK();" id="webk"><input class="alt" type="radio" id="selectwebk" name="kensakubar_radio" onclick="javascript:this.form.action='http://cgi.xxx.co.jp/search/internetSearch.do'" /><label for="selectwebk" accesskey="w"><span class="alt">WEB全体から検索</span></label></span>
</span>
<input type="text" size="29" name="q" id="q" class="kensakubarlooks msize" /><label for="q" accesskey="s" class="alt">検索語入力フォーム</label><input value="検索" type="image" src="images/searchbtn.gif" name"searchbutton" id="searchbutton" alt="検索" /><label for="searchbutton" accesskey="k" class="alt">検索ボタン</label>
</form>
</div>
</div></div></div>
<!------------ヘッダーリンクここまで-------------------->
</div>
<!------------ヘッダーここまで--------------------> - ナビ部分のテキストファイル
sidenavi.txt
<div id="container">
<!-------------サイドメニュー----------------------->
<div id="sidenavi">
<ul id="collection">
<li id="link"><a href="linkpage.html">リンク集</a></li>
<li id="abc"><a href="linkpage.html">マメ知識</a></li>
</ul>
<ul id="contents">
<li>入門
<ol>
<li><a href="linkpage.html">書を読もう</a></li>
<li><a href="linkpage.html">読もう</a></li>
<li><a href="linkpage.html"講座</a></li>
<li><a href="linkpage.html">入門講座</a></li>
<li><a href="linkpage.html">講座</a></li>
</ol>
</li>
<li>カレンダー
<ol>
<li><a href="linkpage.html">カレンダー</a></li>
<li><a href="linkpage.html">カレンダー</a></li>
</ol>
</li>
<li>時
<ol>
<li><a href="linkpage.html">「今日」を読む</a></li>
<li><a href="linkpage.html">「時」の歩み</a></li>
</ol>
</li>
<li>会
<ol>
<li><a href="linkpage.html">会をたずねて</a></li>
<li><a href="linkpage.html">日本物語</a></li>
<li><a href="linkpage.html">歴史</a></li>
<li><a href="linkpage.html">地をたずねて</a></li>
</ol>
</li>
<li>お薦め
<ol>
<li><a href="linkpage.html">お薦めシネマ</a></li>
<li><a href="linkpage.html">新刊のご案内</a></li>
<li><a href="linkpage.html">私の薦めるこの一冊</a></li>
</ol>
</li>
<li>お知らせ
<ol>
<li><a href="linkpage.html">イベント・勉強会</a></li>
<li><a href="linkpage.html">会のお知らせ</a></li>
</ol>
</li>
<li>
<ol>
<li><a href="linkpage.html">こんなとこ行った！</a></li>
<li><a href="exlinkpage.html" target="_blank">つぶやき</a></li>
</ol>
</li>
<li>生活を考えている方へ
<ol>
<li><a href="linkpage.html">会ニュース</a></li>
<li><a href="linkpage.html">新世紀</a></li>
<li><a href="linkpage.html">一日</a></li>
<li><a href="linkpage.html">支部のご案内</a></li>
<li><a href="linkpage.html">どうして？</a></li>
</ol>
</li>
</ul>
<ul id="contactus">
<li id="about"><a href=linkpage.html">「会」について</a></li>
<li id="form"><a href=linkpage.html">お問い合わせ</a></li>
</ul>
</div> <!----sidenaviのクローズ---------------->
<!-------------サイドメニューここまで---------------->
<!------------メインエリア-------------------------->
<div id="mainarea">
<!-------パンくず------------> - コンテンツファイル
- フッター部分のテキストファイル
footer.txt
<p class="jump"><a href="#pagetop">▲ページのトップへ</a></p>
</div> <!--mainareaのクローズ-->
</div> <!--containerのクローズ-->
<div id="footer">
<div id="notification">
<p>※引用は、xxxx発行『xxxxxx』を使用しています。</p>
<p>※このサイトに掲載の画像・文章の無断転載はご遠慮ください。</p>
</div>
<p id="copyright">Copyright ©2007 xxxxxx</p>
</div>
</div> <!--wholeのクローズ-->
</body>
</html>
PHP
共通部分を読み込むPHPファイルを作る
<?php
include("ファイル名.拡張子");
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>サイト名 | 「今日」を読む</title>
<link rel="stylesheet" type="text/css" media="all" href="../base.css" />
<link rel="stylesheet" type="text/css" media="all" href="../common.css" />
<link rel="stylesheet" type="text/css" media="all" href="today.css" />
</head>
<body>
<div id="whole">
<?php
include("../header.txt");
include("../sidenavi.txt");
?>
<p class="crumbs">
<a href="../index.html">home</a> ＞ 「今日」を読む</p>
<!-------パンくずここまで------------>
<div id="mainarticle">
<h2>「今日」を読む</h2>
<p id="backnumber"><a href="backnumber.php"><span>バックナンバー</span></a></p>
<h3>○○○記事タイトル○○○</h3>
【ここにコンテンツを入れる】
</div> <!--mainarticleのクローズ-->
<?php
include("../lower.txt");
?>
テキストファイルの整理
headerとsidenaviはソースの流れでは続いているものなので、upper.txtなどとしてひとつのテキストファイルにする。
さらに、ひとつ下の階層において、下記部分が共通なため、head.txtとしてテキストファイルで保存する。
head.txt
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>サイト名 | 「今日」を読む</title>
<link rel="stylesheet" type="text/css" media="all" href="../base.css" />
<link rel="stylesheet" type="text/css" media="all" href="../common.css" />
<link rel="stylesheet" type="text/css" media="all" href="today.css" />
</head>
<body>
<div id="whole">
最終的なテンプレート
template.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>サイト名 | 「今日」を読む</title>
<link rel="stylesheet" type="text/css" media="all" href="../base.css" />
<link rel="stylesheet" type="text/css" media="all" href="../common.css" />
<link rel="stylesheet" type="text/css" media="all" href="today.css" />
</head>
<body>
<div id="whole">
<?php
include("head.txt");
include("../upper.txt");
?>
<p class="crumbs">
<a href="../index.html">home</a> ＞ 「今日」を読む</p>
<!-------パンくずここまで------------>
<div id="mainarticle">
<h2>「今日」を読む</h2>
<p id="backnumber"><a href="backnumber.php"><span>バックナンバー</span></a></p>
<h3>○○○記事タイトル○○○</h3>
【ここにコンテンツを入れる】
</div> <!--mainarticleのクローズ-->
<?php
include("../lower.txt");
?>
