• 虹色ミツバチ
  • freoカスタマイズメモ、テンプレート・プラグイン配布/officeTIPS
検索プラグイン
虹色ミツバチ

> Entry >freo>freo講座>初心者の為のfreoテンプレート編集講座> 【基本編(04)】条件分岐の基本

【freo】【freo講座】【初心者の為のfreoテンプレート編集講座】【基本編(04)】条件分岐の基本

freoの編集方法のものすごく簡単な説明第4弾です。

smartyを利用したテンプレートでは、簡単な条件分岐や制御文を利用できます。
この条件分岐を使いこなすと、複雑そうに見えるテンプレートが非常にシンプルになり、理解も飛躍的に進みます。

条件分岐の基礎知識

freoはsmartyを利用しているので、テンプレートの中で簡単な条件分岐を利用することができます。
条件分岐で利用するのは、smartyの関数で、{if} {elseif} {else} {/if}です。

最初に覚えておかなければいけないことは、

<!--{if 条件式1}-->
   条件式1だった場合の表示
<!--{elseif 条件式2}-->
   条件式2だった場合の表示
<!--{else}-->
   条件式1でも条件式2でもなかった場合の表示
<!--{/if}-->

このルールです。
これは、

<!--{もし条件式1だったらここから}-->
   条件式1だった場合の表示
<!--{条件式1にあてはまらず条件式2だったら}-->
   条件式2だった場合の表示
<!--{上記のどの条件にもあてはまらなかったら}-->
   条件式1でも条件式2でもなかった場合の表示
<!--{もし条件式1だったらここまで}-->

という意味です。

忘れてはいけないのは、条件式に合致する場合に表示させたいものは、<!--{if}--><!--{/if}-->の間に挟まなくてはならないということです。
必ず、<!--{if}--><!--{/if}-->からはみ出さないようにしてください。

いい例(1):

<!--{if}--><p>これを表示します</p><!--{/if}-->

悪い例(1):

<!--{if}--><p>これを表示します<!--{/if}--></p>

※</p>が<!--{/if}-->からはみ出ています

いい例(2):

   <!--{if 条件式1}-->
      条件式1に合致する場合表示したいもの
      <!--{if 条件式2}-->
         条件式2に合致する場合表示したいもの
      <!--{/if}-->
   <!--{/if}-->

悪い例(2)

   <!--{if 条件式1}-->
      条件式1に合致する場合表示したいもの
      <!--{if 条件式2}-->
   <!--{/if}-->
         条件式2に合致する場合表示したいもの
      <!--{/if}-->

※条件式1の<--{/if}-->が条件式2の<--{/if}-->よりも前にきてしまっています。

↑こんな感じです。

<!--{if}-->~<!--{/if}-->をブロックとして考えよう

テンプレートの読み方で大変重要なのが、<!--{if}-->~<!--{/if}-->をブロックとして考えることです。
そうすれば、テンプレートの内容がわかるようになってきます。

まずは小さいところから始めましょう。
[freo/templates/internals/page/default.html]をエディタで開いて下さい。
20~22行目に、

<!--{if $page_text.excerpt}-->
  {$page_text.excerpt|smarty:nodefaults}
<!--{/if}-->

と書かれています。これは、

<!--{もしページに本文があったらここから}-->
  {ページ本文を|タグはタグとして変換して表示する}
<!--{もしページに本文があったらここまで}-->

という意味です。

{$page_text.excerpt}がページ本文を表す変数です。
{$page_text.excerpt|smarty:nodefault}の「|smarty:nodefault」の部分は修飾子というのですが、ここでは説明は割愛します。

とりあえず、<!--{if $page_text.excerpt}-->~<!--{/if}-->が一つのブロックです。
このように、<!--{if 条件式}-->~<!--{/if}-->のブロックを探してみましょう。

すぐ下の行、23行目~31行目もひとつのブロックです。
これは、<!--{if 条件式}-->~<!--{/if}-->が2つあるので、ちょっとわかりづらいかもしれないですね。

<!--{if $page_text.more}-->
  <!--{if $freo.query.continue}-->
  <div id="continue">
     {$page_text.more|smarty:nodefaults}
  </div>
  <!--{else}-->
  <p><a href="{$freo.core.http_file}/page/{$page.id}?continue=1#continue">続きを読む</a></p>
  <!--{/if}-->
<!--{/if}-->

と書かれているわけですが、これは、

<!--{もし改ページの文章があったらここから}-->
  <!--{もし「続きを読む」ページだったらここから}-->
  <div id="continue">
     {改ページの本文|タグをタグに変換して表示}
  </div>
  <!--{そうじゃなければ}-->
  <p><「続きを読む」ページへのリンクここから>続きを読む<「続きを読む」ページへのリンクここまで></p>
  <!--{もし「続きを読む」ページだったらここまで}-->
<!--{もし改ページの文章があったらここまで}-->

という意味です。
<!--{if}-->~<!--{/if}-->のカタマリの中にもう一つの<!--{if}-->~<!--{/if}-->のカタマリがあるということがわかります。

実際に<!--{if}-->~<!--{/if}-->のブロックを探してみよう

まずは準備として、[freo/templates/internals/page/default.html]を複製し、[lesson.html]などにリネームしておいてください。
実際は、この新たに作成した[lesson.html]を使用するのがいいと思います。

1行目に、

<!--{if $freo.query.id}-->

と書いてあります。これは、

<!--{もしページIDがあったら}-->

という意味になります。
2行目以降に、ページIDがあった場合になにを表示するのかがつらつらと書かれているわけです。

さて、上でご説明したとおり、<!--{if}-->があるということは、必ず<!--{/if}-->があります。
そして、条件式に合致する場合に表示させたいものは、<!--{if}-->~<!--{/if}-->に挟まなければなりません。
<!--{if $freo.query.id}-->とペアになる<!--{/if}-->がどこかにあるはずなのですが、それを探すため、他の邪魔な<!--{if}-->~<!--{/if}-->のブロックを削除していきましょう。
もしくは、削除すると行数がわからなくなってしまうので、スペースなどを代わりに入れて、行数はそのままにしておいてもOKです。
あくまで、テンプレートを読む練習のためです。

一応答え合わせの為、私がみつけたブロックを書いておきます。

行数 条件式 条件式の意味
4行目~10行目 if $page.restriction == 'user' and !$page_security もしページ制限がユーザー限定で閲覧制限がかかっていたら
11行目~19行目 if $page.file and $page.image もし添付ファイルとページイメージがあったら
20行目~22行目 if $page_text.excerpt もしページ本文があったら
23行目~31行目 if $page_text.more もし改ページ本文があったら
32行目~43行目 if $page.restriction == 'password' and ~ もしパスワード制限がかかってたらうんたらかんたら
44行目~46行目 if $page_tags もしタグがついていたら
47行目~56行目 if $page_associate.option もしオプションがついていたら
57行目~64行目 if $plugin_page_childs|smarty:nodefaults もし子ページがあったら
65行目~74行目 if $plugin_page_parent and ~ もし親ページがあって前のページか後のページがあったら
75行目~79行目 if $freo.user.authority == 'root' or ~ もしログイン状態が投稿者または管理者だったら
80行目~109行目 if $page.trackback != 'closed' もしトラックバックが受付中だったら
110行目~207行目 if $page.comment != 'closed' もしコメントが受付中だったら

上記のブロックを削除すると、208行目にあった<!--{else}-->が出てきます。
この<!--{else}-->は、実は<!--{if $freo.query.id}-->に対する<!--{else}-->です。
今まで削除してきたブロックは、<!--{if $freo.query.id}-->~<!--{else}-->~<!--{/if}-->という大きなブロックの内の、小さなブロックに過ぎなかったというわけです。

さて、<!--{if $freo.query.id}-->~<!--{else}-->の間のブロックは掃除が終わっていると思いますが、今度は<!--{else}-->~<!--{/if}-->の間のブロックを削除していきましょう。
ここは、これまでやってきたことを参考に、ご自分で削除してみて下さい。

最終的に、<!--{if $freo.query.id}-->に対する<!--{/if}-->は、デフォルト状態で言うと246行目の<!--{/if}-->、つまり、[freo/templates/internals/page/default.html]の最後の<!--{/if}-->だったということがわかります。

[freo/templates/internals/page/default.html]から余計なものを全て外してしまうと、このテンプレートは、

<!--{if $freo.query.id}-->
   もしページIDがあった場合の表示
<!--{else}-->
   もしページIDがなかった場合の表示
<!--{/if}-->

ということなります。

この、ページIDがあった場合の表示と、ページIDがなかった場合の表示に、それぞれまた条件分岐を使っていろいろ書かれているから分かりにくくなっていますが、ここだけ見れば、非常にシンプルなテンプレートだったということが分かります。

ページ移動

関連記事

ページ上部へ