2005 10 07_kof2005_xoops

Malaika System

XOOPS Smarty を活用したカスタマイズ

Malaika System 早川知道 (Tom_G3X)

2005.10.29

Malaika System

XOOPS における Smarty について

• Xoops2 より Smarty を導入• テーマ・テンプレートに採用

– プログラム部分とビュー部分の独立– デザインの柔軟性が増す

• PHP コードの変更をしなくても、デザイン変更可能に

• Xoops1 では– XOOPS コアやモジュールの PHP 言語から直接 HTML を出力– デザイン変更は、 PHP コードの変更を伴った

• Xoops2 より– XOOPS コアやモジュールの PHP 言語より、– Smarty というテンプレートエンジンを介して HTML を出力– テンプレートの編集で容易にデザイン変更可能に

　　　　　　　　↓↓

Malaika System

XOOPS 新機能

• Xoops-JP2.0.10 より追加された Smarty 変数– <{$xoops_dirname}>

– 表示中のモジュールのディレクトリ名を返す– <{$xoops_modulename}>

– 表示中のモジュール名を返す– <{$block.weight}>

– ブロックの並び順を返す

• これらの追加で、カスタマイズの可能性が拡大

Malaika System

$xoops_dirname $xoops_modulename

• <{$xoops_dirname}>– 表示中のモジュールのディレクトリ名を返す

• <{$xoops_modulename}>– 表示中のモジュール名を返す

（モジュール管理画面で指定したモジュール名）

Malaika System

旧バージョンとの比較

• 旧バージョンでは、こんな記述が必要だった

• 特別な記述は必要無くなった

<{php}> 　 // 　 -- 記述例 -- （ PHP を記述して、アサインする）global $xoopsModule;if ( is_object($xoopsModule) ) {　　 $this->assign(‘ex_module_name’, $xoopsModule->getVar(‘name’));　　 $this->assign(‘ex_module_dir’, $xoopsModule->getVar(‘dirname’));}<{/php}>

<{ex_module_name}> モジュール名<{ex_module_dir}> モジュール Dir 名

<{xoops_modulename}> モジュール名<{xoops_dirname}> モジュール Dir 名

　　↓↓

Malaika System

例：モジュール毎に画像を変更

• モジュール毎にロゴ画像を変更する

• 例：桜丘病院

<{strip}> <td id=“headerlogo”><a href=“<{$xoops_url}>/”> <{if $xoops_dirname }>　　　 <{* 　モジュール内を表示してる時 *}> 　　 <img src=“<{$xoops_imageurl}>title_<{$xoops_dirname}>.gif“　　　　　　　　　　 alt=“<{$xoops_modulename}>” /> <{else}>　　　 <{* 　 index.php 等の xoops ルートファイルを表示してる時 *}> 　　 <img src="<{$xoops_imageurl}>logo.gif" alt="<{$xoops_slogan}>" /> <{/if}> </a></td> <{/strip}>

http://www.sakuragaoka-hp.jp/

Malaika System

• テーマ記述例 (HEAD 内 ) 例：XOOPSCubeTOKAI

• CSS 記述例 (news.css)

例：モジュール毎にＣＳＳを変更

@import url(style.css); /* style.css を継承する */ /* 以下、相違個所のみ記述 */td#headerbanner {　 background-color:#0e3c23; vertical-align:middle; text-align:center;}

<{if $xoops_dirname }>　　　 <{* 　モジュール内を表示してる時 *}>　　 <link rel="stylesheet" type="text/css" media="screen" 　　　　　　 href="<{$xoops_imageurl}><{$xoops_dirname}>.css" /> <{else}>　　　 <{* 　 index.php 等の xoops ルートファイルを表示してる時 *}>　　 <link rel="stylesheet" type="text/css" media="screen" 　　　　　　 href="<{$xoops_themecss}>" /> <{/if}>

http://www.xc-tokai.com/


Malaika System

例：メインメニューに画像を使う

<table cellspacing=“0”> <tr><td id=“mainmenu”> 　 <a class=“menuTop” href=“<{$xoops_url}>/”> 　 <img src=“<{$xoops_imageurl}>menu_home.gif” alt=“<{$block.lang_home}>” /></a>

　  　 <{foreach item=module from=$block.modules}> 　 <{* メインメニューを表示 *}> 　　 <a class="menuMain" href="<{$xoops_url}>/modules/<{$module.directory}>/"> 　　 <img src="<{$xoops_imageurl}>menu_<{$module.directory}>.gif“　　　　　　　　　　　 alt=“<{$module.name}>” /></a> 　　　 <{foreach item=sublink from=$module.sublinks}> 　 <{* サブメニューを表示 *}> 　　　 <a class="menuSub" href="<{$sublink.url}>"><{$sublink.name}></a> 　　　 <{/foreach}> 　 <{/foreach}> 　 

</td></tr> </table>

• メインメニューに画像を使う

Malaika System

例：メインメニューに画像を使う２

• 表示中のモジュールに合わせてメニューをハイライトする <{foreach item=module from=$block.modules}> 　 <a class=“menuMain” href=“<{$xoops_url}>/modules/<{$module.directory}>/”> 　 <{if $module.directory == $xoops_dirname }>　　　 <{* 現在表示中のモジュールだけ、画像を変更する *}>　　　 <img src="<{$xoops_imageurl}>menu_<{$module.directory}>_active.gif“　　　　　　　　 alt="<{$module.name}>" /></a> 　 <{else}> 　　　 <img src="<{$xoops_imageurl}>menu_<{$module.directory}>.gif“　　　　　　　　 alt="<{$module.name}>" /></a> 　 <{/if}> 　 <{foreach item=sublink from=$module.sublinks}> 　　　 <a class="menuSub" href="<{$sublink.url}>"><{$sublink.name}></a> 　 <{/foreach}> <{/foreach}>

Malaika System

例： CSS で応用する場合

• 画像ではなく CSS の class を変更する例：XOOPSCubeTOKAI

<{foreach item=module from=$block.modules}>　 <{if $module.directory == $xoops_dirname }>　　　 <{* 現在表示中のモジュールだけ、 class を変更する *}>　　　 <a class="menuMainActive" 　　　 href="<{$xoops_url}>/modules/<{$module.directory}>/"><{$module.name}></a>　 <{else}>　　　 <a class="menuMain" 　　　 href="<{$xoops_url}>/modules/<{$module.directory}>/"><{$module.name}></a>　 <{/if}>　 <{foreach item=sublink from=$module.sublinks}>　　　 <a class="menuSub" href="<{$sublink.url}>"><{$sublink.name}></a>　 <{/foreach}> <{/foreach}>

Malaika System

$block.weight

• <{$block.weight}>– ブロックの並び順を返す

Malaika System

例：ブロック表示位置を増やす

• $block.weight を使って、こんなレイアウトも可能に

左右

中央 - 中

中央 - 左中央 - 右

（追加）中央 -中

（追加）中央 -左

（追加）中央 -右

コンテンツ

テーマの作り方次第では、中央下段にブロックエリアを追加する事も可能になる。

どうやってするのか？？

Malaika System

例：ブロック表示位置を増やす ( コード)

• 記述例　（ theme.html ）

<{foreach item=block from=$xoops_ccblocks}> <{if $block.weight < 100 }> <div class=“BlockTitle”><{$block.title}></div> <div class=“BlockContent”><{$block.content}></div> <{/if}><{/foreach}>　　　：　　中略　　　：<{foreach item=block from=$xoops_ccblocks}> <{if $block.weight >= 100 }> <div class=“BlockTitle"><{$block.title}></div> <div class=“BlockContent"><{$block.content}></div> <{/if}><{/foreach}>

Malaika System

例：ブロック表示位置を増やす ( 表示 )

• 並び順の特定の数値を境に表示位置を変える

左右

中央 - 中（ 100未満）

中央 - 左（ 100未満

）

中央 - 右（ 100未満

）

（追加）中央 -中

（ 100以上）

（追加）中央 -左

（ 100以上）

（追加）中央 -右

（ 100以上）

コンテンツこの $block.weight を応用すれば、テーマの作り方次第で、無数にブロック表示位置を増やす事が出来る。

Malaika System

お勧めのテンプレートカスタマイズ

• アカウント情報ページ– メールアドレスのエンコード（ spam メール対策）– ゲストに必要以上の個所を表示しない

• フォーラム記事ページ– 投稿者のＩＰを管理者だけ表示する

• ニュースアーカイブのページ– レイアウトの変更（年度毎に表示させる）

Malaika System

例：メールアドレスのエンコード

• メールアドレスのエンコード　 system_userinfo.html

<tr valign="top">　 <td class="head"><{$lang_email}></td>　 <td class="odd"><{mailto address="$user_email" encode=" javascript"}> </td></tr> </tr> 　 <!– ソースを見るとこんな感じにエンコードされている -->　 <tr valign="top">　　 <td class="head"> メールアドレス </td>　　 <td class="odd"><script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%74%6f%6d%40%6b%61%73%75%67%61%69%2d%6b%6f%6d%61%6b%69%2e%6a%70%22%20%3e%74%6f%6d%40%6b%61%73%75%67%61%69%2d%6b%6f%6d%61%6b%69%2e%6a%70%3c%2f%61%3e%27%29%3b'))</script></td></tr>

Malaika System

例：ゲストに表示させない

• ゲストに必要以上表示させないsystem_userinfo.html<{if $xoops_isuser}><tr valign="top">　　 <td class=“head”><{$lang_location}></td> 　 <{* 居住地 *}>　　 <td class="odd"><{$user_location}></td></tr><tr valign="top">　　 <td class=“head”><{$lang_occupation}></td> 　 <{* 職業 *}>　　 <td class="even"><{$user_occupation}></td></tr><tr valign="top">　　 <td class=“head”><{$lang_interest}></td> 　 <{* 趣味 *}>　　 <td class="odd"><{$user_interest}></td></tr><{/ if}>

Malaika System

例：管理者だけ表示する

• 投稿者のＩＰを管理者だけ表示　 newbb_thread.html

　　中略<{if $topic_post.poster_uid != 0}>　 <td class=“odd”><div class=“comUserRank”> ～中略～　 <div class="comUserStatus"><{$topic_post.poster_status}></div>　　 <{if $xoops_isadmin }>　　　 <div style="color:#ff0000;" >IP : <{$topic_post.post_poster_ip}></div>　　 <{/if}>　 </td><{else}>　 <td class="odd"></td> <{/if}>　　中略

Malaika System

例：アーカイブページのレイアウト変更

• 年度毎表示に変更する　 news_archive.html

• 以下、青字部分を消して、赤字部分を追加する

– カスタマイズ使用例• 使用前 XOOPSCubeJP

• 使用後うえこみ春日井小牧

<{foreach item=year from=$years}>　 <tr class="even"><td><b><{$year.number}>年 </b></td></tr>　 <tr class=“odd”><td><{foreach item=month from=$year.months}>　 <tr class="even"><td>　　 <a href="./archive.php?year=<{$year.number}>&month=<{$month.number}>">　　 <{$month.string}> <{$year.number}></a> </td></tr><{/foreach}></td></tr><{/foreach}>

http://www.xoopscube.jp/modules/news/archive.php

http://www.kasugai-komaki.jp/modules/news/archive.php

Malaika System

　おしまい

ご参考にしていただければ幸いです御清聴ありがとうございました

2005 10 07_kof2005_xoops

Technology