XOOPSは、テンプレート化により手軽にリデザインができるようになっています。基本的なことは、HTMLとCSSでほとんどできるようになっていますが、PHPの拡張エンジン、Smartyについての知識があれば、その幅はより広がります。
Smartyについては、こちらで日本語マニュアルを配布していますので、それを参考にして下さい。当サイトでも、Smartyを使用したXOOPSのリデザインテクニックをご紹介します。
XOOPSは、基本的にテーマ(theme)というファイルによってデザインの構成が行われています。このテーマを編集することにより、XOOPSを自分オリジナルのデザインにすることができます。
XOOPSルート/themes/テーマフォルダ名内に、以下のファイルがあります。
| style.css , styleMAC.css , styleNN.css | CSSによるデザインをするファイル |
| 各HTMLファイル | 各ブロックの表示をするHTMLファイル |
各ファイルを編集してリデザインを行います。この段階では、各モジュールの細かいデザインまでは変更できませんが、その方法については別で説明します。
XOOPSの標準テーマ、defaultをいじってみましょう。
XOOPSルート/themes/内にあるdefaultフォルダをコピーし、自分の好きな名前にリネームします。ここではoriginalとリネームしたことにして説明していきます。
originalフォルダ内のtheme.htmlをテキストエディタで開き、置換機能を使って（メモ帳ならCtrl+H)置換する文字をdefault/に、置換後をoriginal/にして、置換処理を実行します。これで、すべてのブロックファイルがoriginalファイル内のブロックHTMLファイルから読み込まれるようになります。
管理者メニューから、SYSTEM ADMIN⇒一般設定⇒一般設定へ
themes/ ディレクトリからの自動アップデートを有効にするをはいに、選択可能なテーマメニューで、originalを選択し、送信ボタンを押します。
とりあえず、現在のTOPが以下のような感じだとします。
では、以下の部分をCSSで変えてみることにします。
originalテーマ内のstyle.cssと、theme_blockleft.htmlを開きます。
theme_blockleft.htm内のソース
<div class="blockTitle"><{$block.title}></div>
<div class= "blockContent"><{$block.content}></div>
タイトルがclass="blockTitle"となってますので、style.css内のblockTitleクラスを探します。
style.css内のソースの一部
td#leftcolumn div.blockTitle {padding: 3px; background-color: #dddddd; color: #639ACE; font-weight: bold;}
これが左のタイトル欄のCSSクラスです。以下のように変えてみます。
td#leftcolumn div.blockTitle {
padding: 3px;
background-color: #dddddd;
color: #000000;
font-weight: bold;
border-top-width: 3px;
border-bottom-width: 3px;
border-top-style: ridge;
border-bottom-style: groove;
border-top-color: #999999;
border-bottom-color: #999999;
}
書き換え後、保存したらTOPにアクセスしてみましょう。
こんな感じになりました。下にCSSを使ったテーマのリデザイン方法をまとめます。
以下のセンターブロックを変えてみます。
originalテーマ内のstyle.cssと、theme_blockcenter_c.htmlを開きます。
theme_blockcenter_c.html内のソース
<div style="padding: 5px;">
<fieldset>
<legend class="blockTitle"><{$block.title}></legend>
<div class="blockContent"><{$block.content}></div>
</fieldset>
</div>
これを以下のように変えてみます。
<div class="block">
<div class="blockTitle"><{$block.title}></div>
<div class="blockContent"><{$block.content}></div>
</div>
style.css内のソース
td#centerCcolumn legend.blockTitle {padding: 3px; color: #639ACE; font-weight: bold; margin-top: 0px; margin-right: 0px; margin-left: 0px;}
これを下のように変えます。
td#centerCcolumn div.blockTitle {
padding: 5px;
color: #FFFFFF;
font-weight: bold;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
border-top-width: 3px;
border-bottom-width: 3px;
border-top-style: ridge;
border-bottom-style: groove;
border-top-color: #CCCCCC;
border-bottom-color: #CCCCCC;
background-color: #333333;
}
さらに、下のクラスを加えます。
td#centerCcolumn div.block{padding: 3px;}
以上が書き換え終わったら、上書き保存してTOPにアクセスしてみます。
こんな感じになりました。下に手順をまとめます。
Smartyの正規表現を使って、タイトルの表示、非表示を選択できるようにします。当サイトのセンターブロックでも使用してるテクニックです。
下のタイトル部分の表示、非表示を選択できるようにします。
if文、正規表現置換を用いて処理します。theme_blockcenter_c.htmlを開きます。
theme_blockcenter_c.html内のソース (HTMLブロックファイルの編集で変更後のもの)
<div class="block">
<div class="blockTitle"><{$block.title}></div>
<div class="blockContent"><{$block.content}></div>
</div>
これを以下のように変えます。
<div class="block">
<
{if $block.title|regex_replace:"/.*none/":"none" ne "none"}>
<div class="blockTitle"><{$block.title}></div>
< {/if}>
<div class="blockContent"><{$block.content}></div>
</div>
これで、タイトルの最後尾にnoneと書けば非表示にすることができます。
管理者メニュー⇒system admin ⇒ ブロック管理から、タイトル部分を非表示にしたいブロックの編集をクリックし、タイトルの入力欄の最後尾にnoneと書きます。
TOPへアクセスし、確認します。
投稿数ランキングのタイトルが消えました。
これもif文と正規表現置換でおこないます。以下の部分に画像を適用できるようにします。
theme_blockleft.htm内のソース
<div class="blockTitle"><{$block.title}></div>
<div class= "blockContent"><{$block.content}></div>
これを下のように変えます。
<{if $block.title|regex_replace:"/.*\[\[.*/":"Picture
True" eq "Picture True"}>
<
div class="blockTitle">
<
img src="<{$block.title|regex_replace:"/.*\[\[/":""}>" alt="<{$block.title|regex_replace:"/\[\[.*/":""}>">
<
/div>
< {else}>
<div class="blockTitle"><{$block.title}></div>
< {/if}>
<div class="blockContent"><{$block.content}></div>
これで、タイトル名[[画像URLを記述することにより、画像が使用できます。タイトル名はALT属性に適用されます。普通にタイトル名だけを入力した場合は、タイトル名がテキストで表示されます。
画像を準備したら、管理者メニュー⇒system admin ⇒ ブロック管理から、タイトル部分を非表示にしたいブロックの編集をクリックし、タイトルの入力欄に、タイトル[[画像の場所を書きます。
TOPにアクセスし、確認します。
ユーザメニュータイトルが画像になりました。
テーマの編集だけでは、どうしてもデザインに限界があります。しかし、テンプレートを編集することで、ほぼ全てのリデザインが可能になります。HTML＋CSS＋Smartyによって、ほぼ完全に自分の理想のデザインを再現できると思います。
具体的にテンプレートを編集する方法を解説します。編集方法には何通りかあります。
管理者メニュー⇒SYSTEM ADMIN ⇒テンプレート⇒defaultテンプレートの複製リンクへ
「テンプレートセットの複製を作成する」ページへ入り新しいテンプレートセット名を入力します。ここではテンプレートセット名を「original」とつけることにします。
すると、以下のように複製されたテンプレート「original」が表示されます。
SYSTEM ADMIN ⇒ 一般設定 ⇒ 一般設定の編集リンクへ行き、デフォルトのテンプレート・セットメニューでoriginalテンプレートを選択します。
テンプレートセット・マネジャーに戻ると、下のようにチェックがoriginalテンプレート方にされています。
編集したいテンプレートの一覧リンクへ飛びます。ここではニュースのテンプレートへ飛んでみます。
各テンプレートの編集方法は、テンプレートファイルの編集ページから直接修正する方法と、テンプレートファイルをダウンロードして、編集後、そのファイルをアップロードする方法とあります。ここではnews_block_top.htmlを編集ページから直接編集することにします。下の画面のマークしてあるところからテンプレートファイルの編集ページに飛びます。
下の画面で編集し、送信すれば、トップニュースブロックのデザインが修正されます。
テンプレートセット・マネージャーから、defaultテンプレートをダウンロードします。
ダウンロードしたtar.gzファイルを解凍すると、下のような構成のファイルが現れます。
解凍してできた各ファイルを編集し、それが終わったらdefaultフォルダが一番上の階層になるようにして圧縮します。(解凍したとき、defaultフォルダが現れるように)
まぁ、Lhacaのデラックス版にdefaultフォルダを突っ込んで拡張子かえるだけなんですが。
テンプレートセットマネージャーの「テンプレートセットをアップロードする」から、圧縮したtar.gzファイルを選択し、新しいテンプレートセット名に好きな名前を入力し、アップロードします。ここではテンプレート名をoriginalとします。
アップロード後、以下のような画面になれば登録成功です。
テンプレートマネージャーに戻ると、originalテンプレートセットが作成されています。
例えば、アップロードして登録したオリジナルのテンプレートセット「original」にダウンロードモジュールのテンプレートが入っていなかったとき、ダウンロードモジュールのテンプレートにだけdefaultテンプレートが適用されます。このとき、作成リンクから、足りないoriginalテンプレートを作成し、編集することができます。
一覧をすると、下のように黄色で未登録テンプレートが表示されます。
タイトルに画像を使用するでも紹介した方法で、画像を表示させてみましょう。
テンプレートセットマネージャー ⇒ originalテンプレートのシステム管理の一覧 ⇒ system_block_mainmenu.htmlの編集へ飛びます。
以下、system_block_mainmenu.htmlのソースです。
<table cellspacing="0">
<tr>
<td id="mainmenu">
<a class="menuTop" href="<{$xoops_url}>/"><{$block.lang_home}></a>
<!-- start module menu loop -->
<{foreach item=module from=$block.modules}>
<a class="menuMain" href="<{$xoops_url}>/modules/<{$module.directory}>/"><{$module.name}></a>
<{foreach item=sublink from=$module.sublinks}>
<a class="menuSub" href="<{$sublink.url}>"><{$sublink.name}></a>
<{/foreach}>
<{/foreach}>
<!-- end module menu loop -->
</td>
</tr>
</table>
これを以下のように変えます。
<table cellspacing="0">
<tr>
<td id="mainmenu">
<a class="menuTop" href="<{$xoops_url}>/"><{$block.lang_home}></a>
<!-- start module menu loop -->
<{foreach item=module from=$block.modules}>
<a class="menuMain" href="<{$xoops_url}>/modules/<{$module.directory}>/">
<{if $module.name|regex_replace:"/.*\[\[.*/":"Picture True" eq "Picture
True"}>
<img src="<{$module.name|regex_replace:"/.*\[\[/":""}>" alt="<{$module.name|regex_replace:"/\[\[.*/":""}>">
<{else}>
<{$module.name}>
<{/if}>
</a>
<{foreach item=sublink from=$module.sublinks}>
<a class="menuSub" href="<{$sublink.url}>"><{$sublink.name}></a>
<{/foreach}>
<{/foreach}>
<!-- end module menu loop -->
</td>
</tr>
</table>
管理者メニューのモジュール管理から、モジュールの名前[[画像URLを入力します。
これで画像が表示されます。
