YoheiM技術やらずに終われまテン

2011-06-15 [PHP] PHPを利用してHTMLテンプレートにファイルを埋め込む

こんにちは、@yoheiMuneです。

ブログサイト作成で、HTMLテンプレートに各日のブログを差し込む用に、ページを作成してみました。利用した言語はPHPです。その方法を残しておきたいと思います。

f:id:yoheiM:20110615132433j:image


テンプレートと各ブログの内容

テンプレートには、以下のようなファイルを使用します。「コンテンツ埋め込み箇所」は各ブログの内容にすり替え、タイトルやサイドバーテンプレートのままを利用します。

f:id:yoheiM:20110615132434j:image:w360

コンテンツ埋め込み場所には、その内容を記載したHTMLを用います。いかがサンプルファイルです。

<div class="section">
<p>こんにちは、<a href="http://twitter.com/yoheiMune" target="_blank">@yoheiMune</a>です。</p>
<p>今日はライトなネタを。iPhoneで特に使わないけど、みなあまり知らないから自慢できる技を一つ。</p>
<br>
<h4> 白黒を入れ替えて、ネガみたいな画面にする</h4>
<p>この機能は何かのアプリではなく、iPhoneにもともと付いている機能です。使ってみるとこんな感じ。</p>
<p>白黒反転するんです。見た目にインパクトがあるから、皆様興味津々です。</p>
(以下つづく)
</div>


テンプレートへ各ブログHTMLを埋め込む方法

仕組みは凄く単純。テンプレートHTMLの「コンテンツ埋め込み箇所」に、各ブログHTMLファイルの内容を書き出すだけです。この例では、カレントディレクトリからの相対パス:allBlog/sampleBlog.htmlに存在するブログ内容を出力しています。

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>たいとる</title>
</head>
<body>

<div class="header">
	<h1>(タイトル部分)</h1>
</div>

<div class="left" style="float:left; width:20%;">
(左のサイドバーの内容)
</div>

<div class="center" style="float:left; width:60%;">
<?php
// ブログ内容を出力する
readfile(’allBlog/sampleBlog.html’);
?>
</div>

<div class="right" style="float:right; width:20%;">
(右のサイドバーの内容)
</div>
<div style="float:clear;"></div>
</body>
</html>

今回のサンプルには記載しておりませんが、Apacheリライト機能や、リクエストパラメータを利用して、一つのPHPファイルでリクエスト毎に異なるブログを差し込む事も可能です。案外便利(*´∇`*)



最後に

運営しているサイトです。どうぞよろしくお願いします(*´∇`*)

HTML5LearnersHTML5を学び合うFacebookPage

HTML5サンプルページ:作成したサンプルを載せているサイト

yoheim.NET:技術情報を中心に情報発信サイト