デジットさんの生活便利サイトトップへ デジットさんのSmarty実用版(PHP)

トップページ > ホームページ作成 > Smarty実用版

テンプレートエンジンのSmartyの実用版のサンプルです。汎用に使いまわせるように、テンプレートと設定ファイルを使いこなしました。自分用に変更すれば、ホームページ作りが楽になります。

Smarty実用版の構成

Smartyのカスタマイズの方法はお教えしましたが、今回はSmartyの実用版です。
設定ファイルをうまく使って、内容ごとに違う表示ようのCSSファイルを切り替えたり、グループごとのナビゲーションを選べるようにしました。実行ファイルには、自分のファイルのディレクトリの深さとグループ指定をすれば、コンテンツの内容に専念できます。構成ファイルは、次の通りです。

  1. 汎用テンプレートファイル「smpl_smarty_pracical.tpl」
    テンプレートディレクトリ"template_dir"に置きます
  2. 設定ファイル「smpl.conf」
    設定ファイル用ディレクトリ"config_dir"におきます。
  3. 実行ファイル「smpl_smarty_pracical.php」
    今回はルートディレクトリから2階層下のディレクトリに置きました。「digit-01.com/sample/php/smpl_smarty_pracical.php」です。

Smarty実用版のサンプル

汎用テンプレートファイル「smpl_smarty_pracical.tpl」

フッダーやナビゲーション用のデータのなどは「include file」でインクルードしました。HTMLのタグも一緒にインクルードしても良いのですが、タグがないとテンプレートファイルを見ただけでは構成がつかめませんので、主要なタグはできるだけテンプレートファイルに残しました。
{#toplogo#}などの様に、# で囲まれた変数が、設定ファイルから読み込まれます。設定ファイルの変数は、{config_load file="smpl.conf"} で読み込みます。設定ファイルの中の変数はセクション分けできます。今回は、「暮らしgroup_life」を指定してみました。実行ファイルから「$attrbt.cnfg_sctn」に"group_life"を代入し、「section=$attrbt.cnfg_sctn」で設定ファイルの  [group_life]を選択しました。「config_load file」では、global変数部と指定したセクションのデータを読み込めます。このセクションを必要数増やすことで、グループ別の表示が可能になります。 設定ファイルの中でも、変数が指定できます。ただし、その変数を有効にするためには、{eval var=#set_css#}の様に「eval関数」を使い与えられた変数をテンプレートとして評価しなければなりません。
インクルードするファイル名を設定ファイルから読む場合、読み込むファイル名に変数が使われている場合は、{eval var=#pr_top# assign="pr_top"}{include file= "$pr_top"}の様に一度「eval関数」で評価してからテンプレートファイルの変数に渡せば大丈夫です。また、インクルードした内容の特定文字の置き換えをしたい場合などは、{capture name=navi}{include file="$navi"}{/capture}{$smarty.capture.navi|replace:"../":$attrbt.src}のように、captureしてから、replaceすれば可能です。ここでは、読み込んだファイルの相対アドレスの階層の深さを変更しています。
今回は、キャッシュは使いませんでした。キャッシュする場合は、異なるページごとにdisplay() に 異なるcache_id を渡す必要があります。軽いデータの場合は、キャッシュしてもそれほどスピードは上がりそうにありませんし、キャッシュの容量がどんどん増えます。したがって、ページ毎のコンテンツを別テンプレートにして、コンテンツが重たい場合だけキャッシュしようと考えています。

{* Smarty テンプレート デジットさんの生活便利サイト用 *}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
{* 共通 設定ファイル読み込み *}
{config_load file="smpl.conf" section=$attrbt.cnfg_sctn }
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
{eval var=#set_css#}
{eval var=#set_js#}

<title>{#pageTitle#}{$head_item.ttl}{$head_item.subttl}:</title>
<meta name="keywords" content="{$head_item.keyw}">
<meta name="description" content="{$head_item.dscrt}">
</head>
<body>
<div class="contents">
<h1><a href="{$attrbt.src}index.html"><img src="{$attrbt.src}{#toplogo#}" alt="デジットさんの生活便利サイトトップへ" width="120" height="47" border="0"></a><span id="fontlogo1">デジットさんの</span>{$head_item.ttl}<span id="fontlogo2">{$head_item.subttl}</span></h1>
<div class="main">
<h2 id="pankuzu">{eval var=#pankuzu#}{$head_item.ttl}</h2>
<div class="main_1">
<p class="topcom">{$cntnts.top}</p>
{$cntnts.main}
<!-- main_1 位置 PRバナー -->
<div class="main_1_pr">
<p>
{eval var=#pr_top# assign="pr_top"}
{include file= "$pr_top"}

</p>
</div>
</div>
</div>
{* グループごとのナビゲーションリスト *}
<!-- ナビゲーションリスト -->
{eval var=#navi# assign="navi"}
{capture name=navi}
{include file="$navi"}
{/capture}
{$smarty.capture.navi|replace:"../":$attrbt.src}

<div class="side">
<h2>関連ページ</h2>
{* 関連ページごとのナビゲーションリスト *}
{eval var=#relation# assign="relation"}
{capture name=relation}
{include file="$relation"}
{/capture}
{$smarty.capture.relation|replace:"../":$attrbt.src}

</div>
<!-- フッター digit-01用 -->
{eval var=#footer# assign="footer"}
{include file= "$footer"}

</div>
</body>
</html>

設定ファイル「smpl.conf」

全てのページで共通のデータと、グループページごとに共通のデータをここで定義しました。全てのページで共通のデータは、「# global変数」の部分で、グループごとに共通のデータは、「# 暮らしgroup_life変数」にセクション指定[group_life]しました。グループが増えた場合は、セクションを追加していきます。
設定ファイルに定義した変数は、リストにコメントしました。自分用のファイルを用意してください。「pageTitle」のように、同じ変数が指定されている場合は、後から定義した内容が有効になります。ここでは、セクション指定すればセクション内に書かれた内容が有効となります。「full_path」には、例の様にホームディレクトリパスを入れておくと便利です。「pankuzu」には、グループごとの「パンくずリスト」を入れています。変数に代入するデータの行が複数にまたがる場合は、「"""」で囲めば、改行があっても大丈夫です。

# global変数
pageTitle = "デジットさんの生活便利サイト"
full_path = "file:/home/sites/lolipop.jp/users/lolipop.jp-dp********/web"
toplogo = "imgディレクトリ/ロゴ画像ファイル名を入れる"
footer = "{#full_path#}/フッターディレクトリ/フッターファイル名をいれる"
set_css = "<link rel="stylesheet" href="{$attrbt.src}スタイルシートディレクトリ/スタイルシートファイル名" type="text/css">"
set_js = "<script type="text/javascript" src="{$attrbt.src}ジャバスクリプトディレクトリ/ジャバスクリプトファイル名"></script>"

# 暮らしgroup_life変数
[group_life]
pageTitle = "デジットさんの生活便利サイト - 暮らし:"
pankuzu = """<a href="{$attrbt.src}index.html">トップページ</a>&nbsp;&gt;&nbsp;
<a href="{$attrbt.src}group/group_life.html">暮らし</a>&nbsp;&gt;&nbsp;"""
pr_top = "{#full_path#}/広告ディレクトリ/広告用ファイル名"
navi = "{#full_path#}/ナビゲーションディレクトリ/ナビゲーションファイル名"
relation = "{#full_path#}/関連リストディレクトリ/関連リスト名"

設実行ファイル「smpl_smarty_pracical.php」

ポイントは、このファイルの置いてあるディレクトリのルートからの階層(「http://digit-01.com/sample/php/smpl_smarty_pracical.php」なので「$attrbt['src'] = "../../"」)を指定した所と、このファイルのコンテンツがどのグループに属するかで設定ファイルのセクションを指定する「$attrbt['cnfg_sctn'] = "group_life"」のところです。
後は、テンプレートファイルに渡すデータを設定すればOKです。

<?php
//この実行ファイルの属性
$attrbt['src'] = "../../";//ルートからのディレクトリ位置
$attrbt['cnfg_sctn'] = "group_life";//設定ファイルのセクション(グループ)指定
//ヘッド情報
$head_item['ttl'] = "テスト";//タイトル
$head_item['subttl'] = "(サブタイトル)";//サブタイトル
$head_item['keyw'] = "1,2";//キーワード
$head_item['dscrt'] = "コメント";//descriptionコメント
//コンテンツ
$cntnts['top'] = "ここにトップコメントを書きます";
$cntnts['main'] = "メインコンテンツをかきます";
require_once("smarty_setup.php");//Smartyのカスタムセット
$smarty = new Smarty_GuestBook();
$smarty -> assign("attrbt",$attrbt);
$smarty -> assign("head_item",$head_item);
$smarty -> assign("cntnts",$cntnts);
$smarty -> display("sample/php/smpl_smarty_pracical.tpl");
?>

これで、Smartyの汎用に使える実用版が出来ました。動作サンプルは、Smarty実用版サンプルにありますので、確認してくださいね。
レンタルサーバーの「ロリポップ」では、動作確認しております。

ホームページを公開するレンタルサーバーは、 ロリポップ! がお薦め、 PHP5を使うならPHP5から選ぼう。

関連ページ

ホームページ作成

PHP5を使う

アフィリエイトをする

PHPの使い方

デジットさんのホームページ入門に移行中

スポンサード リンク

Amazon.co.jpアソシエイト:
PHP&プログラミング

売れている順 新刊順

:%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%20php :php2_  :10

とことん!ホームページホームページ入門役立つサイトデジットさんのリストラ日記仮福真琴の精神科医はうそだらけ

2005-2010 Copyright © Digit-01 All Rights Reserved.