LoginSignup
15
13

More than 5 years have passed since last update.

XOOPS+Smartyテンプレートテクニック 13個詰め合わせ

Posted at

XOOPS Themes and Templates Advent Calendar 2012

前日: カスタムブロック管理画面に[更新して編集継続]ボタンを追加する

XOOPSで使えるSmartyのテクニックを紹介します!

1. コピペを減らす

同じテンプレートの中で、同じHTMLをコピペしていませんか?そのHTMLを修正しないといけなくなったとき、全て修正しないといけません。コピペを減らすことは修正コストを下げます。Smartyでは、<{capture}> を使うことでコピペを減らすことができます。

<{capture assign="recommend_mark"}>
    <span class="recommend">
        <span><img src="<{$xoops_url}>/images/recommend.png" />おすすめ!</span>
    </span>
<{/capture}>

<{$recommend_mark}>
<{$recommend_mark}>
<{$recommend_mark}>

こうなる↓

    <span class="recommend">
        <span><img src="<{$xoops_url}>/images/recommend.png" />おすすめ!</span>
    </span>
    <span class="recommend">
        <span><img src="<{$xoops_url}>/images/recommend.png" />おすすめ!</span>
    </span>
    <span class="recommend">
        <span><img src="<{$xoops_url}>/images/recommend.png" />おすすめ!</span>
    </span>

2. HTMLの量を減らす

テンプレートのタブやインデントは、見やすさのために重要です。一方、ブラウザにとってHTMLのタブやスペースは必須ではありません。スペースやタブを減らせばHTMLの容量が小さくなります。そうなると、サーバがブラウザに送信するパケットも小さくなるので、通信コストが低下します。Smartyでは、<{strip}> を使うと不要な空白を取り除いてくれます。

<{strip}>
<div>
    <div>
        <div>
            <div></div>
        </div>
    </div>
</div>
<{/strip}>

こうなる↓

<div><div><div><div></div></div></div></div>

3. 奇数行・偶数行でスタイルを変える

表形式の表示では、奇数行、偶数行でデザインを変えることがよくあります。この場合、Smartyの <{cycle}> を使うと便利です。

<style>
.odd { background: blue; }
.even { background: green; }
</style>
<div class="<{cycle values="odd,even"}>">1</div>
<div class="<{cycle values="odd,even"}>">2</div>
<div class="<{cycle values="odd,even"}>">3</div>
<div class="<{cycle values="odd,even"}>">4</div>
<div class="<{cycle values="odd,even"}>">5</div>

こうなる↓

<style>
.odd { background: blue; }
.even { background: green; }
</style>
<div class="odd">1</div>
<div class="even">2</div>
<div class="odd">3</div>
<div class="even">4</div>
<div class="odd">5</div>

4. 数字を3桁毎にカンマで区切る

金額などの数値を表示するときに、3桁ごとにカンマを入れたいことがあります。そのような場合は、| number_format を数字の後ろにくっ付けるだけです。

<{$money}>
<{$money|number_format}>円

こうなる↓

98000
98,000円

5. 本名またはユーザ名を自動で出す

ユーザの本名を出したいことがあります。しかし、ユーザによっては本名を登録していないかも知れません。そのようなユーザの場合には、ユーザ名を出したいです。Smartyで条件分岐すればいいでしょうか?いいえ、| xoops_user:user_nameを使ったほうがスマートです。

<{$uid|xoops_user:user_name}>さん

アカウントに name(本名) がセットされていれば name の値が出ます

uname: taro
name: 田中太郎

田中太郎さん

アカウントに name がセットされていれば uname(アカウント名) が出ます

uname: taro
name:

taroさん

6. 日時をフォーマットする

タイムスタンプを日付として出す必要がある場合は、xoops_formattimestamp を使うといいでしょう。

timestamp: <{$timestamp}>
s: <{$timestamp|xoops_formattimestamp:s}>
m: <{$timestamp|xoops_formattimestamp:m}>
l: <{$timestamp|xoops_formattimestamp:l}>
カスタム: <{$timestamp|xoops_formattimestamp:"Y-m-d"}>

こうなる↓

timestamp: 999994149
s: 2001/9/9
m: 2001/9/9 9:09
l: 2001/9/9 9:09:09
カスタム: 2001-09-09

7. PHPの定数を表示する

Smartyでは、PHPの定数は assign しなくても使うことができます。言語定数や、その他設定値などは、<{$smarty.const.定数名}> で簡単に取得できます。

XOOPS_URL定数の中身を表示:
<{$smarty.const.XOOPS_URL}>
↑実際は、<{$xoops_url}>のほうが便利

8. 配列を表示する

デバッグ中に配列の中身を表示したいときは、<{foreach}> で回さないといけないでしょうか?そんなことはありません。<{$array|@var_dump}> のように、@ をつければ配列も modifier に渡すことができます。

$array = array(1, 2, 3)
<{$array|@var_dump}>

9. 文字を指定の文字幅まで切り詰める

長い文字列を切り詰めたいときには、| mb_strimwidth を使うのが手っ取り早い解決方法です。|mb_strimwidth:0:最大で表示したい幅:"…" のように指定します。

<{$message}>
<{$message|mb_strimwidth:0:30:"…"}>
あなたにた香の高等のために、私と今が面倒かもたらかとあるから主義し事まし。
あなたにた香の高等のために、…

10. 特定のモジュールのときにだけ表示する

<{if $xoops_modulename == "bulletin"}>
(bulletinモジュールのときだけ表示)
<{/if}>

11. uidからアバターを表示する

ユーザアバターを表示するときには | xoops_user_avatarize が便利です。

<img src="<{$uid|xoops_user_avatarize}>" />

12. メールアドレスをスパムから保護する

メールアドレスをウェブに載せるときは、そのまま表示するとスパマーのメールアドレス収集プログラムに拾われてしまうのではないかという心配があります。Smartyの <{mailto}> はメールアドレスをプログラムに読ませにくくして、メールアドレスを保護する力があります。鉄壁な防御にはなりませんが、リスクは多少低減します。

<div id="contact">
<{mailto address=$email encode="javascript"}>にお問い合わせあれ!
</div>

13. 管理者のとき、ログインユーザのときだけ表示する

管理者のアクセスかどうかは $xoops_isadmin で判定できます。

<{if $xoops_isadmin}>
    <a href="<{$xoops_url}>/admin.php">管理画面に直行♪</a>
<{/if}>

ログインユーザかどうかは $xoops_isuser で判定できます。

<{if $xoops_isuser}>
  (ログインユーザのときにだけ表示する)
<{/if}>
15
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
13