webra

ウェブ&グラフィック全般。デザイナーの乱れ書き。

Smartyでページをテンプレート化 【ロリポップ編】

   

便利で簡単なPHPって話はよく聞くけど、デザイナーには十分難解なPHP…
今回は趣味のサイトでイチから挑戦してみます。
ちなみに現在のPHP知識は、普段PHPテンプレート化されたhtmlをさわる程度です。

スポンサードリンク

【1】環境を整える

PHPやSmartyをググってみても、書いてあるのはたいてい「まずはApacheをローカルに…」とか「Smartyをダウンロードして…」とかばかり。すでにこの時点でよくわかりません(汗)

ApacheとはサーバソフトウェアでこれをローカルPCにもインストールすると、ローカル環境でもPHPの作業がしやすい…のかな?(間違ってたらすいません…)

今回はややこしい事はなしで全てサーバー上で作業します!

僕が趣味サイトを運営してるロリポップは、簡単にSmartyの設定ができるようです。

http://lolipop.jp/manual/other/smarty/

file1

とりあえずマニュアル通りにHello World!まで到達。

【2】index.htmlをテンプレートファイルに

もともとサーバーにアップしていたindex.htmlをindex.tplに変更して、「templates」ディレクトリ内のテストファイルに上書き保存。テストで使ったSmarty.phpもindex.phpに変更。

file2

index.phpのいらない部分を削除

<?php
/* Smarty クラスを読み込む */
require_once("Smarty/Smarty.class.php");
/* Smarty オブジェクトを生成し、テンプレートディレクトリとコンパイルディレクトリを設定 */
$smarty = new Smarty();
$smarty->template_dir = "./templates";
$smarty->compile_dir  = "./templates_c";
/* テンプレートを出力します。出力するテンプレートファイル名を渡します。 */
$smarty->display("index.tpl");
?>

この時点でいくつかPHPのエラーが出現。ファイル内のjava script部分の所でした。(google Analyticsなど)
Smartyはtplファイル内で{ }が使えないみたいです。なのでjavascriptやcssをファイル内に埋める場合は{literal} {/literal}で囲ってやる必要があるようです。また外部ファイルにすれば問題はなし。

{literal}
<script type="text/javascript">

</script>
{/literal}

無事index.phpが表示できました。 


【3】headerとfooterを作成し読み込む

<html>
<head>
<title>テスト</title>
</head>
<body>
<div id="header">ヘッダー</div>
<div id="contents">内容</div>
<div id="footer">フッター</div>
</dody>
</html> 

上記の様なindex.tplファイルから、header.tplとfooter.tplを作成。

header.tpl

<html>
<head>
<title>テスト</title>
</head>
<body>
<div id="header">ヘッダー</div>

footer.tpl

<div id="footer">フッター</div>
</dody>
</html>

この二つをindex.tplからincludeを使って読み込む。

{include file="header.tpl"}
<div id="contents">内容</div>
{include file="footer.tpl"}

これでヘッダーとフッターの別々のテンプレート化が完了。
includeは他のファイルから読み込むという意味のタグらしいです。


【4】.htaccessを作成してindex.phpを優先表示させる

ここまででテンプレート化したindex.phpは作成できましたが、webページはデフォルトではドメインを入力するとindex.htmlが表示されます。

・「http://www.abcde.jp/」だと「http://www.abcde.jp/index.html」が表示される

.htaccessというファイルを設置してこの優先順位を変更します。

DirectoryIndex index.php index.html

テキストエディタで上記の様に入力してください。半角スペースでファイルを区切って優先順位を変更できます。記述が前にある程、優先されます。

これを.htaccessという名前で保存します。windowsなどでファイルを保存できない場合は、サーバ上で名前を変更してください。

これをindex.phpと同じ階層にアップロード。これで標準でindex.phpが表示されるようになります。

 - PHP, web