XOOPS Smarty を活用したカスタマイズ Malaika System   早川知道 (Tom_G3X ) 2005.10.29
XOOPS における Smarty について <ul><li>Xoops2 より Smarty を導入 </li></ul><ul><ul><ul><li>テーマ・テンプレートに採用 </li></ul></ul></ul><ul><ul><l...
XOOPS 新機能 <ul><li>Xoops-JP2.0.10 より追加された Smarty 変数 </li></ul><ul><ul><li><{$xoops_dirname}> </li></ul></ul><ul><ul><ul><ul...
$xoops_dirname $xoops_modulename <ul><li><{$xoops_dirname}> </li></ul><ul><ul><ul><ul><li>表示中のモジュールのディレクトリ名を返す </li></ul><...
旧バージョンとの比較 <ul><li>旧バージョンでは、こんな記述が必要だった </li></ul><ul><li>特別な記述は必要無くなった </li></ul><{php}>   //   -- 記述例 --  ( PHP を記述して、アサ...
例:モジュール毎に画像を変更 <ul><li>モジュール毎にロゴ画像を変更する </li></ul><ul><ul><ul><li>例:桜丘病院 </li></ul></ul></ul><{strip}>  <td id=“headerlogo...
<ul><li>テーマ記述例 (HEAD 内 )  例: XOOPSCubeTOKAI </li></ul><ul><li>CSS 記述例 (news.css) </li></ul>例:モジュール毎にCSSを変更 @import url(sty...
例:メインメニューに画像を使う <ul><li>メインメニューに画像を使う </li></ul><table cellspacing=“0”> <tr><td id=“mainmenu”>     <a class=“menuTop” href...
例:メインメニューに画像を使う2 <ul><li>表示中のモジュールに合わせてメニューをハイライトする </li></ul><!-- start module menu loop -->  <{foreach item=module from=...
例: CSS で応用する場合 <ul><li>画像ではなく CSS の class を変更する 例: XOOPSCubeTOKAI </li></ul><!-- start module menu loop --> <{foreach item...
$block.weight <ul><li><{$block.weight}> </li></ul><ul><ul><ul><ul><li>ブロックの並び順を返す </li></ul></ul></ul></ul>
例:ブロック表示位置を増やす <ul><li>$block.weight  を使って、こんなレイアウトも可能に </li></ul>テーマの作り方次第では、 中央下段にブロックエリアを追加する事も可能になる。 どうやってするのか?? 左 右 中...
例:ブロック表示位置を増やす ( コード ) <ul><li>記述例  ( theme.html ) </li></ul><{foreach item=block from=$xoops_ccblocks}>   <{if $block.wei...
例:ブロック表示位置を増やす ( 表示 ) <ul><li>並び順の 特定の数値 を境に表示位置を変える </li></ul>この $block.weight を 応用すれば、 テーマの作り方次第で、 無数にブロック表示位置を 増やす事が出来る...
お勧めのテンプレートカスタマイズ <ul><li>アカウント情報ページ </li></ul><ul><ul><li>メールアドレスのエンコード( spam メール対策) </li></ul></ul><ul><ul><li>ゲストに必要以上の個...
例:メールアドレスのエンコード <ul><li>メールアドレスのエンコード  system_userinfo.html </li></ul><tr valign=&quot;top&quot;>   <td class=&quot;head&q...
例:ゲストに表示させない <ul><li>ゲストに必要以上表示させない system_userinfo.html </li></ul><{if $xoops_isuser}> <tr valign=&quot;top&quot;>    <td...
例:管理者だけ表示する <ul><li>投稿者のIPを管理者だけ表示  newbb_thread.html </li></ul>  中略 <{if $topic_post.poster_uid != 0}>   <td class=“odd”>...
例:アーカイブページのレイアウト変更 <ul><li>年度毎表示に変更する  news_archive.html </li></ul><ul><ul><ul><li>以下、 青字部分を消して、赤字部分を追加する </li></ul></ul><...
 おしまい ご参考にしていただければ幸いです 御清聴ありがとうございました
Upcoming SlideShare
Loading in...5
×

2005 10 07_kof2005_xoops

290

Published on

2005年10月7日
KOF2005
"大阪産業創造館"
"XOOPS Smartyを活用したカスタマイズ"

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
290
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

2005 10 07_kof2005_xoops

  1. 1. XOOPS Smarty を活用したカスタマイズ Malaika System 早川知道 (Tom_G3X ) 2005.10.29
  2. 2. XOOPS における Smarty について <ul><li>Xoops2 より Smarty を導入 </li></ul><ul><ul><ul><li>テーマ・テンプレートに採用 </li></ul></ul></ul><ul><ul><li>プログラム部分とビュー部分の独立 </li></ul></ul><ul><ul><li>デザインの柔軟性が増す </li></ul></ul><ul><ul><ul><li>PHP コードの変更をしなくても、デザイン変更可能に </li></ul></ul></ul><ul><li>Xoops1 では </li></ul><ul><ul><li>XOOPS コアやモジュールの PHP 言語から直接 HTML を出力 </li></ul></ul><ul><ul><li>デザイン変更は、 PHP コードの変更を伴った </li></ul></ul><ul><li>Xoops2 より </li></ul><ul><ul><li>XOOPS コアやモジュールの PHP 言語より、 </li></ul></ul><ul><ul><li>Smarty というテンプレートエンジンを介して HTML を出力 </li></ul></ul><ul><ul><li>テンプレートの編集で容易にデザイン変更可能に </li></ul></ul>          ↓↓
  3. 3. XOOPS 新機能 <ul><li>Xoops-JP2.0.10 より追加された Smarty 変数 </li></ul><ul><ul><li><{$xoops_dirname}> </li></ul></ul><ul><ul><ul><ul><li>表示中のモジュールのディレクトリ名を返す </li></ul></ul></ul></ul><ul><ul><li><{$xoops_modulename}> </li></ul></ul><ul><ul><ul><ul><li>表示中のモジュール名を返す </li></ul></ul></ul></ul><ul><ul><li><{$block.weight}> </li></ul></ul><ul><ul><ul><ul><li>ブロックの並び順を返す </li></ul></ul></ul></ul><ul><li>これらの追加で、カスタマイズの可能性が拡大 </li></ul>
  4. 4. $xoops_dirname $xoops_modulename <ul><li><{$xoops_dirname}> </li></ul><ul><ul><ul><ul><li>表示中のモジュールのディレクトリ名を返す </li></ul></ul></ul></ul><ul><li><{$xoops_modulename}> </li></ul><ul><ul><ul><ul><li>表示中のモジュール名を返す (モジュール管理画面で指定したモジュール名) </li></ul></ul></ul></ul>
  5. 5. 旧バージョンとの比較 <ul><li>旧バージョンでは、こんな記述が必要だった </li></ul><ul><li>特別な記述は必要無くなった </li></ul><{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 名    ↓↓
  6. 6. 例:モジュール毎に画像を変更 <ul><li>モジュール毎にロゴ画像を変更する </li></ul><ul><ul><ul><li>例:桜丘病院 </li></ul></ul></ul><{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=&quot;<{$xoops_imageurl}>logo.gif&quot; alt=&quot;<{$xoops_slogan}>&quot; /> <{/if}> </a></td> <{/strip}>
  7. 7. <ul><li>テーマ記述例 (HEAD 内 ) 例: XOOPSCubeTOKAI </li></ul><ul><li>CSS 記述例 (news.css) </li></ul>例:モジュール毎にCSSを変更 @import url(style.css); /* style.css を継承する */ /* 以下、相違個所のみ記述 */ td#headerbanner {   background-color:#0e3c23; vertical-align:middle; text-align:center; } <{if $xoops_dirname }>     <{*  モジュール内を表示してる時 *}>    <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;        href=&quot;<{$xoops_imageurl}> <{$xoops_dirname}>.css &quot; /> <{else}>     <{*   index.php 等の xoops ルートファイルを表示してる時 *}>    <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;        href=&quot;<{$xoops_themecss}>&quot; /> <{/if}>
  8. 8. 例:メインメニューに画像を使う <ul><li>メインメニューに画像を使う </li></ul><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>   <!-- start module menu loop -->   <{foreach item=module from=$block.modules}>   <{* メインメニューを表示 *}>    <a class=&quot;menuMain&quot; href=&quot;<{$xoops_url}>/modules/<{$module.directory}>/&quot;>    <img src=&quot;<{$xoops_imageurl}> menu_<{$module.directory}>.gif “             alt=“<{$module.name}>” /></a>     <{foreach item=sublink from=$module.sublinks}>   <{* サブメニューを表示 *}>     <a class=&quot;menuSub&quot; href=&quot;<{$sublink.url}>&quot;><{$sublink.name}></a>     <{/foreach}>   <{/foreach}>   <!-- end module menu loop --> </td></tr> </table>
  9. 9. 例:メインメニューに画像を使う2 <ul><li>表示中のモジュールに合わせてメニューをハイライトする </li></ul><!-- start module menu loop --> <{foreach item=module from=$block.modules}>   <a class=“menuMain” href=“<{$xoops_url}>/modules/<{$module.directory}>/”>   <{if $module.directory == $xoops_dirname }>     <{* 現在表示中のモジュールだけ、画像を変更する *}>     <img src=&quot;<{$xoops_imageurl}> menu_<{$module.directory}> _a ctive .gif “          alt=&quot;<{$module.name}>&quot; /></a>   <{else}>     <img src=&quot;<{$xoops_imageurl}> menu_<{$module.directory}>.gif “          alt=&quot;<{$module.name}>&quot; /></a>   <{/if}>   <{foreach item=sublink from=$module.sublinks}>     <a class=&quot;menuSub&quot; href=&quot;<{$sublink.url}>&quot;><{$sublink.name}></a>   <{/foreach}> <{/foreach}> <!-- end module menu loop -->
  10. 10. 例: CSS で応用する場合 <ul><li>画像ではなく CSS の class を変更する 例: XOOPSCubeTOKAI </li></ul><!-- start module menu loop --> <{foreach item=module from=$block.modules}>   <{if $module.directory == $xoops_dirname }>     <{* 現在表示中のモジュールだけ、 class を変更する *}>     <a class=&quot;menuMainActive&quot;     href=&quot;<{$xoops_url}>/modules/<{$module.directory}>/&quot;><{$module.name}></a>   <{else}>     <a class=&quot;menuMain&quot;     href=&quot;<{$xoops_url}>/modules/<{$module.directory}>/&quot;><{$module.name}></a>   <{/if}>   <{foreach item=sublink from=$module.sublinks}>     <a class=&quot;menuSub&quot; href=&quot;<{$sublink.url}>&quot;><{$sublink.name}></a>   <{/foreach}> <{/foreach}> <!-- end module menu loop -->
  11. 11. $block.weight <ul><li><{$block.weight}> </li></ul><ul><ul><ul><ul><li>ブロックの並び順を返す </li></ul></ul></ul></ul>
  12. 12. 例:ブロック表示位置を増やす <ul><li>$block.weight を使って、こんなレイアウトも可能に </li></ul>テーマの作り方次第では、 中央下段にブロックエリアを追加する事も可能になる。 どうやってするのか?? 左 右 中央 - 中 中央 - 左 中央 - 右 (追加) 中央 - 中 (追加) 中央 - 左 (追加) 中央 - 右 コンテンツ
  13. 13. 例:ブロック表示位置を増やす ( コード ) <ul><li>記述例  ( theme.html ) </li></ul><{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&quot;><{$block.title}></div> <div class=“BlockContent&quot;><{$block.content}></div> <{/if}> <{/foreach}>
  14. 14. 例:ブロック表示位置を増やす ( 表示 ) <ul><li>並び順の 特定の数値 を境に表示位置を変える </li></ul>この $block.weight を 応用すれば、 テーマの作り方次第で、 無数にブロック表示位置を 増やす事が出来る。 左 右 中央 - 中 ( 100 未満) 中央 - 左 ( 100 未満) 中央 - 右 ( 100 未満) (追加) 中央 - 中 ( 100 以上) (追加) 中央 - 左 ( 100 以上) (追加) 中央 - 右 ( 100 以上) コンテンツ
  15. 15. お勧めのテンプレートカスタマイズ <ul><li>アカウント情報ページ </li></ul><ul><ul><li>メールアドレスのエンコード( spam メール対策) </li></ul></ul><ul><ul><li>ゲストに必要以上の個所を表示しない </li></ul></ul><ul><li>フォーラム記事ページ </li></ul><ul><ul><li>投稿者のIPを管理者だけ表示する </li></ul></ul><ul><li>ニュースアーカイブのページ </li></ul><ul><ul><li>レイアウトの変更(年度毎に表示させる) </li></ul></ul>
  16. 16. 例:メールアドレスのエンコード <ul><li>メールアドレスのエンコード  system_userinfo.html </li></ul><tr valign=&quot;top&quot;>   <td class=&quot;head&quot;><{$lang_email}></td>   <td class=&quot;odd&quot;> <{mailto address=&quot;$user_email&quot; encode=&quot;javascript&quot;}> </td> </tr> </tr>   <!– ソースを見るとこんな感じにエンコードされている -->   <tr valign=&quot;top&quot;>    <td class=&quot;head&quot;> メールアドレス </td>    <td class=&quot;odd&quot;> <script type=&quot;text/javascript&quot;>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>
  17. 17. 例:ゲストに表示させない <ul><li>ゲストに必要以上表示させない system_userinfo.html </li></ul><{if $xoops_isuser}> <tr valign=&quot;top&quot;>    <td class=“head”><{$lang_location}></td>   <{* 居住地 *}>    <td class=&quot;odd&quot;><{$user_location}></td> </tr> <tr valign=&quot;top&quot;>    <td class=“head”><{$lang_occupation}></td>   <{* 職業 *}>    <td class=&quot;even&quot;><{$user_occupation}></td> </tr> <tr valign=&quot;top&quot;>    <td class=“head”><{$lang_interest}></td>   <{* 趣味 *}>    <td class=&quot;odd&quot;><{$user_interest}></td> </tr> <{/if}>
  18. 18. 例:管理者だけ表示する <ul><li>投稿者のIPを管理者だけ表示  newbb_thread.html </li></ul>  中略 <{if $topic_post.poster_uid != 0}>   <td class=“odd”><div class=“comUserRank”> ~中略~   <div class=&quot;comUserStatus&quot;><{$topic_post.poster_status}></div>    <{if $xoops_isadmin }>     <div style=&quot;color:#ff0000;&quot; >IP : <{$topic_post.post_poster_ip}></div>    <{/if}>   </td> <{else}>   <td class=&quot;odd&quot;></td> <{/if}>   中略
  19. 19. 例:アーカイブページのレイアウト変更 <ul><li>年度毎表示に変更する  news_archive.html </li></ul><ul><ul><ul><li>以下、 青字部分を消して、赤字部分を追加する </li></ul></ul></ul><ul><ul><li>カスタマイズ使用例 </li></ul></ul><ul><ul><ul><li>使用前 XOOPSCubeJP </li></ul></ul></ul><ul><ul><ul><li>使用後 うえこみ春日井小牧 </li></ul></ul></ul><{foreach item=year from=$years}>   <tr class=&quot;even&quot;><td><b><{$year.number}> 年 </b></td></tr>   <tr class=“odd”><td> <{foreach item=month from=$year.months}>   <tr class=&quot;even&quot;><td>    <a href=&quot;./archive.php?year=<{$year.number}>&amp;month=<{$month.number}>&quot;>    <{$month.string}> <{$year.number}> </a> &nbsp;&nbsp; </td></tr> <{/foreach}> </td></tr> <{/foreach}>
  20. 20.  おしまい ご参考にしていただければ幸いです 御清聴ありがとうございました
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×