Your SlideShare is downloading. ×
  • Like
2005 10 07_kof2005_xoops
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

2005 10 07_kof2005_xoops

  • 240 views
Published

2005年10月7日 …

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
240
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
1
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. XOOPS Smarty を活用したカスタマイズ Malaika System 早川知道 (Tom_G3X ) 2005.10.29
  • 2. XOOPS における Smarty について
    • Xoops2 より Smarty を導入
        • テーマ・テンプレートに採用
      • プログラム部分とビュー部分の独立
      • デザインの柔軟性が増す
        • PHP コードの変更をしなくても、デザイン変更可能に
    • Xoops1 では
      • XOOPS コアやモジュールの PHP 言語から直接 HTML を出力
      • デザイン変更は、 PHP コードの変更を伴った
    • Xoops2 より
      • XOOPS コアやモジュールの PHP 言語より、
      • Smarty というテンプレートエンジンを介して HTML を出力
      • テンプレートの編集で容易にデザイン変更可能に
              ↓↓
  • 3. XOOPS 新機能
    • Xoops-JP2.0.10 より追加された Smarty 変数
      • <{$xoops_dirname}>
          • 表示中のモジュールのディレクトリ名を返す
      • <{$xoops_modulename}>
          • 表示中のモジュール名を返す
      • <{$block.weight}>
          • ブロックの並び順を返す
    • これらの追加で、カスタマイズの可能性が拡大
  • 4. $xoops_dirname $xoops_modulename
    • <{$xoops_dirname}>
          • 表示中のモジュールのディレクトリ名を返す
    • <{$xoops_modulename}>
          • 表示中のモジュール名を返す (モジュール管理画面で指定したモジュール名)
  • 5. 旧バージョンとの比較
    • 旧バージョンでは、こんな記述が必要だった
    • 特別な記述は必要無くなった
    <{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. 例:モジュール毎に画像を変更
    • モジュール毎にロゴ画像を変更する
        • 例:桜丘病院
    <{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.
    • テーマ記述例 (HEAD 内 ) 例: XOOPSCubeTOKAI
    • CSS 記述例 (news.css)
    例:モジュール毎に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. 例:メインメニューに画像を使う
    • メインメニューに画像を使う
    <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. 例:メインメニューに画像を使う2
    • 表示中のモジュールに合わせてメニューをハイライトする
    <!-- 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. 例: CSS で応用する場合
    • 画像ではなく CSS の class を変更する 例: XOOPSCubeTOKAI
    <!-- 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. $block.weight
    • <{$block.weight}>
          • ブロックの並び順を返す
  • 12. 例:ブロック表示位置を増やす
    • $block.weight を使って、こんなレイアウトも可能に
    テーマの作り方次第では、 中央下段にブロックエリアを追加する事も可能になる。 どうやってするのか?? 左 右 中央 - 中 中央 - 左 中央 - 右 (追加) 中央 - 中 (追加) 中央 - 左 (追加) 中央 - 右 コンテンツ
  • 13. 例:ブロック表示位置を増やす ( コード )
    • 記述例  ( 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&quot;><{$block.title}></div> <div class=“BlockContent&quot;><{$block.content}></div> <{/if}> <{/foreach}>
  • 14. 例:ブロック表示位置を増やす ( 表示 )
    • 並び順の 特定の数値 を境に表示位置を変える
    この $block.weight を 応用すれば、 テーマの作り方次第で、 無数にブロック表示位置を 増やす事が出来る。 左 右 中央 - 中 ( 100 未満) 中央 - 左 ( 100 未満) 中央 - 右 ( 100 未満) (追加) 中央 - 中 ( 100 以上) (追加) 中央 - 左 ( 100 以上) (追加) 中央 - 右 ( 100 以上) コンテンツ
  • 15. お勧めのテンプレートカスタマイズ
    • アカウント情報ページ
      • メールアドレスのエンコード( spam メール対策)
      • ゲストに必要以上の個所を表示しない
    • フォーラム記事ページ
      • 投稿者のIPを管理者だけ表示する
    • ニュースアーカイブのページ
      • レイアウトの変更(年度毎に表示させる)
  • 16. 例:メールアドレスのエンコード
    • メールアドレスのエンコード  system_userinfo.html
    <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. 例:ゲストに表示させない
    • ゲストに必要以上表示させない system_userinfo.html
    <{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. 例:管理者だけ表示する
    • 投稿者のIPを管理者だけ表示  newbb_thread.html
      中略 <{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. 例:アーカイブページのレイアウト変更
    • 年度毎表示に変更する  news_archive.html
        • 以下、 青字部分を消して、赤字部分を追加する
      • カスタマイズ使用例
        • 使用前 XOOPSCubeJP
        • 使用後 うえこみ春日井小牧
    <{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.  おしまい ご参考にしていただければ幸いです 御清聴ありがとうございました