テンプレートの概要
※[ ]内は各プラグインのID名
テンプレートの変更
- Freo Template Gallery【2014/05/30追加】
freoのテンプレートを紹介するギャラリーサイト - テンプレートを変えてみよう(Freo Template Gallery/freoはじめて物語)【2014/06/28追加】
Freo Template Galleryで紹介されているテンプレートに着せ替える方法
テンプレートの基本
- テンプレートについて(PHP Labo)
作者のないとさんがfreoを作る以前に作成したPHPプログラムでの解説ですが、freoもこれに準じています。 - Smartyの利用(PHP Labo)【2013/09/17追加】
ないとさんによるfreoで使われているPHPのテンプレートエンジンであるSmartyの解説←今はSmarty3向けに記載されている - Smarty2 マニュアル【2016/06/16追加】
- yossy先生のSmarty講座(PHPプロ!)【2016/06/16追加】
- 内部構造の解説(freo.jp)
- freo のデザインカスタマイズ(10press/freo を使おう!)※リンク切れ
freoのデフォルトテンプレートに使用されているIDとclassをざっくりと解説- freo のテンプレート作成【準備】(10press/freo を使おう!)※リンク切れ
- freo のテンプレート作成【手順】(10press/freo を使おう!)※リンク切れ
- 初心者の為のfreoテンプレート編集講座(虹色ミツバチ)
テンプレート編集上の基礎知識から実践までをゆるやかに解説 - 必要な内部情報をどうやって探すのかのメモ([ E P R ])【2015/07/20追加】
Smartyの主な組み込み関数について
- テンプレート内での条件分岐について(Smarty2)
{if},{elseif},{else}についての解説 - テンプレート内での連想配列のループについて(Smarty2)
{foreach},{foreachelse}についての解説 - テンプレート内での数値添字配列のループについて(Smarty2)【2016/06/16追加】
{section},{sectionelse}についての解説 - 他のテンプレートを読み込む(Smarty2)【2016/06/16追加】
{include}についての解説
Smartyの主なカスタム関数について
- テンプレート変数を割り当てる(Smarty2)【2016/06/16追加】
{assign}についての解説 - ローカルシステムやhttp, ftpからファイルを取得しコンテンツを読む(Smarty2)【2016/06/16追加】
{fetch}についての解説 - テンプレート内で計算を実行(Smarty2)【2016/06/16追加】
{math}についての解説
テンプレート編集ツール
- ファイル管理プラグイン[filemanager](freo.jp)⇒サイト管理関連
ブラウザからテンプレート等の編集ができるプラグイン
- 【注意】Windows付属のメモ帳(Notepad)は使用しない(文字コードがUTF-8(BOMあり)になってしまい表示できなくなる)。
- TeraPad(Win)
フリーのテキストエディター。ファイルの右クリックから開くことができる。
第二水準漢字や他国の言語などUnicode文字は対応していないので、テンプレートの編集には使えるがデータベースの編集だときついかも。 - EmEditor(Win)
多機能なテキストエディター。Unicode文字対応。
Professional版はシェアウェア(4000円/年&1年後より2,000円/年または永久ライセンス15,000円)だが、xp以前を使用しているならFree版(無料)でも十分使用できる。 - サクラエディタ(Win)
カスタマイズ性に優れた無料の高機能テキストエディター。Unicode文字対応。 - Notepad++(Win)【2014/11/05追加】
数多くのプログラム言語に対応し、拡張性に優れた高機能な無料テキストエディター。Unicode文字対応。 - Mery(Win)【2016/07/10追加】
プラグインやマクロも利用できる、Unicode対応の高機能かつ多機能なテキストエディター。 - mi(Mac&Win)
MacOSX用のテキストエディター(Win版もあり)。
現在は無料版のみだが、将来的には高機能なシェアウェア版が出る予定。 - CotEditor(Mac)【2016/07/10追加】
エンコーディング判定や和英混ざった文書の描画、縦書き表示など、日本語特有の問題にも対応したOS X 専用プレーンテキストエディタ。 - WinMerge 日本語版(Win)
テキスト内容を比較して表示してくれるツール(テンプレートが更新された場合に使用すると便利)
テンプレートの編集についての注意事項
- テンプレート内に{や}を入れたい場合は、その記述部分を{literal}と{/literal}で囲む。
- テンプレート内にPHPプログラムを記述するには、プログラムを<?phpと?>ではなく、{php}と{/php}で囲む。
- テンプレート内にコメントを記述するには、コメントを{*と*}で囲む(HTMLソースには表示されない)。【2013/09/13追加】
参考:テンプレート内のコメント(Smarty) - テンプレートを編集したのにブラウザで更新しても反映されない場合は、templates_c/内にある、.htaccess以外の拡張子がphpのファイルをすべて削除。サーバによってはFTPから削除できない場合があるので、そのときはremove.phpを利用して削除。
- ブラウザの表示には影響はないが、もしHTMLソース内に
<!--<br />
<b>Warning</b>: htmlspecialchars() expects parameter 1 to be string, array given in <b>http://www.example.com/freo/libs/smarty/plugins/modifier.escape.php</b> on line <b>26</b><br />
<br />
...
-->
<b>Warning</b>: htmlspecialchars() expects parameter 1 to be string, array given in <b>http://www.example.com/freo/libs/smarty/plugins/modifier.escape.php</b> on line <b>26</b><br />
<br />
...
-->
のようなエラーが入っていたら、
<!--{if $xxxxx|smarty:nodefaults}-->
のように|smarty:nodefaultsを追加して回避する。【2015/02/28追加】
テンプレートで使用する変数について
{ }内にある$から始まる文字列を「変数」という。
変数の配列
変数は{$xxx.ID}で特定のIDのものを取得する(連想配列)だけでなく、別の変数を配列のインデックスとして{$xxx[$IDの変数]}で取得することもできる。
例:ユーザーの名前
- 特定のユーザーIDのものを取得 ⇒ {$freo.refer.users.ユーザーID.name}
- ログインユーザーのものを取得 ⇒ {$freo.refer.users[$freo.user.id].name}
{foreach}内での変数
<!--{foreach from=$xxx item='yyy'}-->~<!--{/foreach}-->
⇒繰り返し処理で取得する{$xxx}という配列変数の各要素の値は{$yyy}という変数に格納される。
例:ユーザー一覧でのユーザーの名前
<ul>
<!--{foreach from=$freo.refer.users|smarty:nodefaults item='refer_user'}-->
<li>{$refer_user.name}</li>
<!--{/foreach}-->
</ul>
変数の種類
- 全テンプレート共通の変数(別ページ) {$freo.xxx}
- freoの基本的な情報を取得する(freo.jp)
- テンプレート固有の変数 (別ページ){$xxx}
- トップ(エントリー一覧・カテゴリー別一覧)での変数(別ページ) {$entry.xxx}、{$entry_xxxs[$entry.id]}
- 個別エントリーでの変数(別ページ) {$entry.xxx}、{$entry_xxx}
- ページでの変数(別ページ) {$page.xxx}、{$page_xxx}
- freo変数一覧(虹色ミツバチ/freoTIPS)
freo内で使用できる変数の覚書
- Smartyの予約変数 (別ページ){$smarty.xxx}
- データベース構成の解説(freo.jp)
変数が分からないときに見ると便利な場合あり
freoの変数データを調べる裏技(使用後は直ちに元に戻すこと)
libs/freo/internals/default/default.phpの22行目辺りにあるglobal $freo;の次の行にprint_r('<pre>');print_r($freo);print_r('</pre>');と書いてブラウザからindex.phpにアクセスすると、$freoの中身がすべて表示されるので、ざっと見てみるのが解りやすいかもしれません。
※同様にテンプレート内に
{$xxx|smarty:nodefaults|@debug_print_var}
を追加して調べることも可能【2017/04/15追加】
Smartyの変数の修飾子
変数の後に | で指定するものを「修飾子」という。
標準装備の主な修飾子(freo.jpの変数の修飾子についてに加筆)
- 時刻を整形
{$smarty.now|date_format:"%Y/%m/%d %H:%M:%S"} 例:現在の時刻を整形 - 変数をフォーマットして表示【2013/09/22追加】
{$smarty.now|string_format:"%05d"} 例:「1234.56789」を5桁で0埋めの「01234」に整形 - テキスト内にURLがあれば、自動でリンク(freoオリジナル)
{$xxx|autolink} 例:「http://www.example.com/」が「<a href="http://www.example.com/">http://www.example.com/</a>」に変換される
※メールアドレスも「<a href="mailto:メールアドレス">メールアドレス</a>」に変換される - テキストをテキストで分割(freoオリジナル)
<!--{foreach from=$xxx|explode:"\n" item='value'}-->{$value}<!--{/foreach}--> 例:$xxxの設定に途中で改行(\n)を入れることによって複数の値が設定できる - テキストを特定の長さで切り捨て(半角文字で使用)【2013/09/17追加】
{$xxx|truncate:20:'...'} 例:20文字の場合 - マルチバイトのテキストを特定の長さで切り捨て(freoオリジナル)
{$xxx|mb_truncate:20:'...'} 例:20文字の場合 - 改行文字"\n"をHTMLの<br />タグに変換【2013/09/17追加】
{$xxx|nl2br} 例:「テキスト\n」が「テキスト<br />」に変換される(テキストが改行されて表示) - 連続する改行"\n\n"を段落に変換(freoオリジナル)
{$xxx|nl2p} 例:「テキスト\n\n」が「<p>テキスト</p>」に変換される(テキストが段落として表示) - 正規表現でパターンマッチ(freoオリジナル)
{if $xxx|regex_match:'/^gallery\//'} 例:$xxxに"gallery"が含まれているかチェック
※preg_match()正規表現チェッカー(正規表現を記述する際の動作チェックができるオンラインツール)【2013/09/13追加】 - 正規表現で置換【2013/09/17追加】
{if $xxx|regex_replace:"/[\r\t\n]/":" "} 例:$xxxに復改、タブおよび改行が含まれていたら半角空白に置換 - テキストでHTMLを反映させる
{$xxx|smarty:nodefaults}
※コメント欄など管理者以外が入力内容を書き換えることができる変数には使用しないこと - 変数が空の場合に表示されるデフォルト値を設定【2013/09/15追加】
{$xxx|default:'デフォルト値'} - 変数のエンコードやエスケープを行う【2013/09/15追加】
{$xxx|escape}(& " ' < > をエスケープ)※freoでは標準で設定済なので改めて設定する必要なし
<a href="{$xxx|escape:'url'}"> (URLを特殊なコードに変換)
<a href="mailto:{$xxx|escape:'hex'}">{$xxx|escape:'mail'}</a> (emailを特殊なコードに変換し、emailアドレスを混乱させる) - マークアップタグを取り除く【2013/09/15追加】
{$xxx|strip_tags} 例:「<strong>テキスト</strong>」が「 テキスト 」に変換される(太文字にならない)
※デフォルトではタグの部分が半角空白に置き換えられるので、空白を詰める場合は{$xxx|strip_tags:false}にする。 - スラッシュを含む文字列$xxxから最も上の階層を取り出す 使えるかもしれないsmarty修飾子や関数(freo&WebDiaryProメモ)【2015/01/11追加】
{$xxx|strstr:'/':true}(※PHP5.3以降の場合) - 文字列内の部分文字列が最初に現れる場所を見つける【2016/06/19追加】
{$smarty.server.REQUEST_URI|strpos:'/page/page1' === 0} 例:/page/page1内に適用
foreach関連の修飾子
- リストの表示を逆順にする【2014/12/14追加】
{foreach from=$xxx|smarty:nodefaults|@array_reverse item='yyy'}
※参考 リストの昇降順を逆にする(例ページ一括表示プラグイン)(freo&WebDiaryProメモ) - foreachのループの順番をソートする Smartyの配列をソートするSmartyプラグイン(ウェヴ(web)屋のネタ帳。)を利用
{foreach from=$entries|smarty:nodefaults|@sortby:'#datetime' item='entry'} 例:エントリーを日付順にソート('#datetime'にすれば昇順、'-datetime'にすれば降順になる)
Smarty用プラグイン固有の修飾子【2017/06/24追加】
- 日にちのチェック 新着マーク表示プラグイン(freo.jp)
{if $datetime|recently:7:'day'} 例:$datetimeが現在から7日以内どうかチェック - 日時の数値をセレクトボックス用にフォーマット 日時整形プラグイン(freo.jp)
{$date|date_format:'%Y'|date_select:'year':'西暦':'年':5:2} 例:$dateの年を西暦で現在と前5年、後2年で表示 - IPアドレスに対応するホスト名を取得 ホスト名取得プラグイン(freo.jp)
{$ip|gethostbyaddr} 例:$ipに対するホスト名を表示 - 数値に対してコンマを付加 数値整形プラグイン(freo.jp)
{$number|number_format} 例:「10000」が「10,000」に変換される - URLを解釈して各構成要素を取得 URL解析プラグイン(freo.jp)
{$url|parse_url:'host'} 例:$urlのホストネームを表示 - 本文の画像タグを画像へのテキストリンクに置換 テキストリンクプラグイン(freo.jp)
{$text|text_link:'[画像]'} 例:画像を「[画像]」というテキストリンクに置換(altに値がない場合) - 全角カナと全角英数字を半角カナと半角英数字に置換
携帯表示用に文字を全角から半角にする(ぺんたんinfo)
{$xxx|hchar}
全角カナ・英数を半角カナ・英数にするsmarty用プラグイン (虹色ミツバチ)【2014/05/30追加】
{$xxx|hkana} - 全角カタカナを半角カタカナに置換 携帯表示用に文字を全角から半角にする(ぺんたんinfo)
{$xxx|hkana} - 全角英数字を半角英数字に置換 携帯表示用に文字を全角から半角にする(ぺんたんinfo)
{$xxx|halphanum} - Smartyのプラグイン機能を使ってルビの表示を置換してみる(龍の棲む場所/freoTIPS)【2014/11/30追加】
{$xxx|ruby_replace} - 本文に特定の記号を書くことにより、手軽にマークアップを行う(かつてWeb Diary Professionalなどで使われていた「本文装飾機能(はてな記法もどき)」とほぼ同じ (*1)) テキスト整形プラグイン(PHP Labo)【2015/09/08追加】
{$entry_text.excerpt|smarty:nodefaults|text_format:$entry.id:'h4,h5,h6':'continue'} 例:エントリー本文で使いたい場合
※使用方法は管理登録関連参照。 - CSSで縦書きにした文章中で横組みで表示 縦中横クラス付与smarty用プラグイン(I'll be NET)【2015/11/12追加】
{$xxx|tcy} 例:文中の「!?」と「!!」に[class="tcy"]というクラスを付与 - freo用Smarty脚注プラグイン(Web Liberty&freoカスタマイズ集)【2017/06/24追加】
{$xxx|footnote} 例:各エントリーやページの本文に脚注を入れる場合
※ここに載っていない情報が何かあれば...情報を追加・編集する
※編集は面倒・やり方が分からない場合は、コメント欄に書いていただければ有志の方で編集します。
- 最終更新:2017-09-26 13:27:07