【freo】【freo講座】【初心者の為のfreoテンプレート編集講座】【基本編(03)】smartyとは/include機能
freoの編集方法のものすごく簡単な説明第3弾です。
freoのテンプレートをエディタで開いてみると、前回学んだ変数をはじめとして、HTMLタグ以外のプログラムっぽいものがいくつも使用されているのがわかります。
そのせいで、なにこれわかんねーよもうやだ泣きたい症状に陥ってしまいます。
かく言う私もなにこれわかんねーよもうやだ泣きたいと思っていました。
ですが、なにが書かれているのか判れば結構簡単です。
頑張ってついてきてください。
smartyについて
freoにはPHPのテンプレートエンジンとしてsmartyが使われています。
なんのことだかさっぱりわかりません。
とりあえず知っておきたいのは、
- freoはsmartyというテンプレートエンジンを利用していること
- それによって、PHP部分とテンプレート部分を分けて使用することができること
です。
また、smartyを利用すると、以下のことが可能になります。
- テンプレート内部で他のテンプレートを読み込むこと
- 変数を使って値を代入すること
- テンプレートの中で簡単な条件分岐や制御文を使うこと
- 配列の繰り返しの利用
- 修飾子の使用
とりあえず、変数を使って値を代入することができることは、前回学んでいます。
あとの4つについては、これから解説するので今はまだわからなくて大丈夫です。
freoを開発されたないとさんのPHPスクリプト配布サイトに詳しい説明がありますのでそちらもぜひご参照ください。
PHP Labo:Smartyの利用
テンプレート内部で他のテンプレートを読み込む
まず、[freo/templates/internals/page/default.html]を開いてください。
1行目に、
と書いてあります。
この文章で、[freo/templates/header.html]を読み込んでいるわけです。
また、最後の行には
と書いてあります。
ここで、[freo/templates/footer.html]を読み込んでいます。
つまり、テンプレート内部で他のテンプレートを読み込むには、
{include file='テンプレートのパス'}
と記述すればOKです。
これを活用すると、サイトをパーツごとに細分化することができる上、編集や修正がしやすくなります。
テンプレートをincludeする機能の便利な使い方
header.htmlやfooter.html以外にも、includeのテクニックを使うと便利になる状況は色々考えられます。
たとえば、サイトのメニュー部分をmenu.htmlという別のテンプレートとして作成し、 [freo/templates]フォルダ(header.html等と同じ階層)に置いて header.htmlでincludeするようにすれば、 メニューだけ編集したいときに便利かもしれません。
また、パンくず表示プラグイン利用部分のテンプレートをpan.htmlという別のテンプレート として作成し、[freo/templates]フォルダ(header.html等と同じ階層)に置いておき、 ページIDがgalleryのページではpan.htmlをincludeし、 それ以外のページではincludeしないようにすることもできます。
ようするに、サイトで良く使うパーツや、よく編集する可能性のあるパーツについては、単独で別のテンプレートを作っておいて、それを都度includeするようにしちゃえば、テンプレートがスッキリしていいんじゃないかなと思うわけです。
ちなみに私は、
- サイトのメニュー部分
- サイトのサブメニュー部分
- サイトのサイドメニュー部分
- エントリーのカレンダー表示部分
- パンくず表示プラグイン利用部分
- 兄妹ページ表示プラグイン利用部分
以上のパーツを別のテンプレートに記述して、それを利用したい部分にincludeしています。
他にも、
- ツイッターフォローミーボタン表示部分
- サイトのトップページなどに置く画像スライダーなどのjquery利用部分
などを別テンプレートにすると便利かもしれないですね。
includeするテンプレートを作成するときの注意点
header.htmlやfooter.htmlなど、includeするテンプレートを作成する時は、それが単独では成立しないテンプレートであり、あくまで読み込まれることを想定して作成することが大事です。
つまりどういうことかというと、ちゃんとタグを閉じておいた方がいいよってことです。
たとえば、
という内容の、[sample1.html]というテンプレートをincludeしたいとします。
[sample.html]は[freo/templates]フォルダに置いて下さい。
includeするテンプレートには、
と書けばOKです。
これがベストな書き方です。
これに対し、
という内容の[sample2.html]というテンプレートだと、少々面倒なことになります。
先ほどのsample1.htmlとなにが違うかというと、</div>が無いんですね。
これを先ほどと同じようにincludeしても、ブラウザ上の表示は崩れるはずです。
ブラウザ上できちんと表示させるには、
</div>
と書かなければなりません。
まあようするに、きちんとincludeされた後、ブラウザ上で表示した時に、きちんと全てのタグが閉じられていれば問題はないわけです。
includeするテンプレート側できちんとフォローしてあげられれば問題はありませんが、慣れていない内は、閉じタグがちゃんとついている状態でテンプレートを作成するべきだと思います。
ワンポイント
実は、デフォルト状態(編集を加えていない状態)のheader.htmlは、<div id="container">の閉じタグがついていません。それでも、ブラウザ上で表示したときは表示が崩れないようにその他のテンプレートでフォローしてくれています。
じゃあ、デフォルト状態(編集を加えていない状態)のheader.htmlの<div id="container">の閉じタグはどこにあるかっていうと、実は、footer.htmlの4行目の</div>がそうです。
サイトの<div>構成を変える場合は注意してください。