2005 09 17_osc2005_xoops

XOOPS Smarty を活用したカスタマイズ Malaika System 早川知道 (Tom_G3X ) 2005.9.17

XOOPS における Smarty について Xoops2 より Smarty を導入テーマ・テンプレートに採用プログラム部分とビュー部分の独立デザインの柔軟性が増す PHP コードの変更をしなくても、デザイン変更可能に Xoops1 では XOOPS コアやモジュールの PHP 言語から直接 HTML を出力デザイン変更は、 PHP コードの変更を伴った Xoops2 より XOOPS コアやモジュールの PHP 言語より、 Smarty というテンプレートエンジンを介して HTML を出力テンプレートの編集で容易にデザイン変更可能に　　　　　　　　 ↓↓

XOOPS 新機能 Xoops-JP2.0.10 より追加された Smarty 変数 <{$xoops_dirname}> 表示中のモジュールのディレクトリ名を返す <{$xoops_modulename}> 表示中のモジュール名を返す <{$block.weight}> ブロックの並び順を返すこれらの追加で、カスタマイズの可能性が拡大

$xoops_dirname $xoops_modulename <{$xoops_dirname}> 表示中のモジュールのディレクトリ名を返す <{$xoops_modulename}> 表示中のモジュール名を返す（モジュール管理画面で指定したモジュール名）

旧バージョンとの比較旧バージョンでは、こんな記述が必要だった特別な記述は必要無くなった <{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 名　　 ↓↓

例：モジュール毎に画像を変更モジュール毎にロゴ画像を変更する例：桜丘病院 <{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}>

テーマ記述例 (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}>

例：メインメニューに画像を使うメインメニューに画像を使う <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>

例：メインメニューに画像を使う２表示中のモジュールに合わせてメニューをハイライトする  <{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}> _a ctive .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}>

例： 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}>

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

例：ブロック表示位置を増やす $block.weight を使って、こんなレイアウトも可能にテーマの作り方次第では、中央下段にブロックエリアを追加する事も可能になる。どうやってするのか？？左右中央 - 中中央 - 左中央 - 右（追加）中央 - 中（追加）中央 - 左（追加）中央 - 右コンテンツ

例：ブロック表示位置を増やす ( コード ) 記述例　（ 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}>

例：ブロック表示位置を増やす ( 表示 ) 並び順の特定の数値を境に表示位置を変えるこの $block.weight を応用すれば、テーマの作り方次第で、無数にブロック表示位置を増やす事が出来る。左右中央 - 中（ 100 未満）中央 - 左（ 100 未満）中央 - 右（ 100 未満）（追加）中央 - 中（ 100 以上）（追加）中央 - 左（ 100 以上）（追加）中央 - 右（ 100 以上）コンテンツ

お勧めのテンプレートカスタマイズアカウント情報ページメールアドレスのエンコード（ spam メール対策）ゲストに必要以上の個所を表示しないフォーラム記事ページ投稿者のＩＰを管理者だけ表示するニュースアーカイブのページレイアウトの変更（年度毎に表示させる）

例：メールアドレスのエンコードメールアドレスのエンコード　 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>

例：ゲストに表示させないゲストに必要以上表示させない 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}>

例：管理者だけ表示する投稿者のＩＰを管理者だけ表示　 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}> 　　中略

例：アーカイブページのレイアウト変更年度毎表示に変更する　 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}>

Smarty プラグイン活用のすすめ Smarty プラグインを活用すれば、複雑な機能も汎用的に活用できるようになる。 Xoops の仕様上の制約を解決出来る。 Xoops 専用 Smarty プラグインも多く開発されている Xoops_block プラグイン TinyD プラグイン …… ..etc

xoops_block プラグイン（紹介） Xoops_block プラグイン　「どこでもブロック」プラグイン ? (^^ ゞテーマ・テンプレートなどの Smarty レベル上であれば、どこでもブロック関数を呼び出して表示できる。テーマの通常のブロック表示エリア以外（ヘッダー・フッターなど）にもブロックを呼び出し表示できる。ブロックのテンプレートに使えば、ニコイチブロックが出来る。コンテンツの中に、ブロックを表示する事も可能になる。ブロック関数を呼出し、 Smarty 変数にアサインしてるだけ自由にレイアウト可能上級者向けではあるが、使いこなせれば超強力　　　　　　　　　　　　　　　　　　　　　　　・・・・・・かも (^^ ゞ

xoops_block プラグイン（使い方 1 ）記述方法１モジュールディレクトリを指定する方法 <{ xoops_block mod=“ モジュールディレクトリ名 ” func=“ ブロック関数名 ” 　　　　　　 opt=“ 関数の引数 ( 必要に応じて ) " assign=" テンプレートアサイン名 "}> <{ xoops_block mod=" news " func=" b_news_top_show " 　　　　　　 opt=“ published,10,50 ” assign=“ newsblock ”}> <{* テンプレートからコピーして、アサイン名だけ変更すれば OK ！ *}> <ul> <{foreach item=news from= $newsblock .stories}> 　 <li><a href="<{$xoops_url}>/modules/news/article.php?storyid=<{$news.id}>"> <{$news.title}></a> (<{$news.date}>)</li> <{/foreach}> </ul>

xoops_block プラグイン（使い方２）記述方法２ブロック関数が記述されたファイルを直接指定する方法 <{ xoops_block file=“ ブロック関数が記述されたファイル ” func=“ ブロック関数名 ” 　　　　　　 opt=“ 関数の引数 ( 必要に応じて ) " assign=" テンプレートアサイン名 "}> <{ xoops_block file =“ modules/news/block/news_top.php " func=" b_news_top_show " 　　　　　　 opt=“ published,10,50 ” assign=“ newsblock ”}> <{* テンプレートからコピーして、アサイン名だけ変更すれば OK ！ *}> <ul> <{foreach item=news from= $newsblock .stories}> 　 <li><a href="<{$xoops_url}>/modules/news/article.php?storyid=<{$news.id}>"> <{$news.title}></a> (<{$news.date}>)</li> <{/foreach}> </ul> [ 裏技 ] ブロック関数の記述ルールに合っていれば、独自関数も使用できる。 <{ xoops_block file =“ myfunction .php " func=“ my_xxxx_show " assign=“ myblock ”}>

xoops_block プラグイン（使用例１）テーマのヘッダーに使用する　例： XOOPSCubeTOKAI メインメニューを表示　 + 　ログインフォームを表示 <{ xoops_block mod=“ system ” func=“ b_system_user_show ” assign=“ loginblock ”}> 　　中略 User:<input type="text" name="uname" size="10" value="<{ $loginblock.unamevalue }>" /> Pass:<input type="password" name="pass" size="10" /> 　　中略 <{ xoops_block mod=“ system ” func=“ b_system_main_show ” assign=“ ex_mainmenu ”}> <{foreach item=module from= $ex_mainmenu. modules }> <a href=“<{$xoops_url}>/modules/<{$module.directory}>/”><{$module.name}></a> | <{/foreach}>

xoops_block プラグイン（使用例２）ブロックの中に別のブロックを表示　例：うえこみ春日井小牧 piCal ミニカレンダーを表示する <{ xoops_block mod=" piCal " func=" pical_mini_calendar_show " assign=" piCal_miniCal "}> <{ $piCal_miniCal.content }>

Xoops_block プラグイン（使用例３）独自の関数を使うニュースの新着記事をトップページに表示 Spotlight ブロックもどきの関数を自作する ( 例： my_newsitem) その独自ファイルを指定して呼び出す ( 例： myfunction.php) <{ xoops_block file=“ myfunction.php " func=" my_newsitem “ opt=" 128 " assign=" mynew "}> <div class="item"><div class="itemHead"><span class="itemTitle"> <a href="<{$xoops_url}>/modules/news/article.php?storyid=<{$mynews.storyid}>"> <{$mynews.title}></a> </span></div> 　　　　以下略

テーマ・テンプイレートにおける問題点あくまで原則だが・・・。コア・モジュールは、 HTML を書かない HTML は、 Smarty 側 ( テーマ・テンプレート ) で受け持つべきそうであれば・・・柔軟なカスタマイズが容易に可能になる利用者にとってもメリットは大きい筈その為のひとつの方法として・・・（あくまで理想として）プログラムとテンプレート ( デザイン ) の分業も良いかもプログラム作者 + テンプレート作者実際には、モジュール等は一人で開発するケースがほどんどで、難しい事も多いのが現実

アカウント情報ページのカスタマイズ「ホームページ」項目でリンクを画像で表示したい Default テンプレートカスタマイズ <td class="head"><{$lang_website}></td> <td class="even"> <{if $user_websiteurl|strip_tags:false != ""}> 　　 <a href="<{$user_websiteurl|strip_tags:false}>" target="_blank"> 　　 <img src="<{$xoops_url}>/images/icons/www.gif" border="0" /></a> <{/if}> </td> 　 <td class="head"><{$lang_website}></td> 　 <td class="even"> <{$user_websiteurl}> </td>

アカウント情報ページの問題点現状のアサイン方法 HTML タグ込みでアサインされている理想的なアサイン方法 URL のみでアサインするべき  カスタマイズが容易になる <{$user_websiteurl}>  <a href=“http : //www.xxx.com/” target=“_blank”> http://www.xxx.com/</a> <td class="even"> <{$user_websiteurl}> </td> <{$user_websiteurl}>  http://www.xxx.com/ <td class="even"> <a href=“ <{$user_websiteurl}>” target=“_blank”> <{$user_websiteurl}></a> </td> <{if $user_websiteurl }> <{* 画像を表示する場合のカスタマイズ例 *}> 　　 <a href=“ <{$user_websiteurl}> ” target=“_blank” > 　　　　 <img src="<{$xoops_url}>/images/icons/www.gif" border="0" /> </a> <{/if}>

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

2005 09 17_osc2005_xoops

More Related Content

Viewers also liked

Similar to 2005 09 17_osc2005_xoops

More from Tom Hayakawa

2005 09 17_osc2005_xoops

Editor's Notes