Edited at

XOOPSはPHPなんか分からなくとも何とかなるさあ(1)

More than 5 years have passed since last update.

⇒ アドベントカレンダーの参加者リスト

⇒ 前日の投稿 XOOPS Cube の管理画面から使うCMS Theme Finderの紹介。 by nouphet

⇒ 翌日の投稿 文字を大きくすることもできる!iphoneテーマの内容と使い方 by mika

 いやまあ何というか今年も師走ですか。歳とともに何だか時間の進むスピードがえらい勢いで加速していきますな。ついこないだおせちを食べたと思ったらもうクリスマス。昨年家族に好評だったローストチキンをまた今年も作らねばいけないらしいのですが、こんなんじゃあっという間に寿命が尽きてしまいそうですが、その前になんか書いとけって事らしいので久しぶりにXOOPS関連の文章を書いてみますか。

 とは言っても私は非プログラマー。しがないデザイン系ウェブ屋(ウェブデザイナーと言うと嫁が嫌な顔をするのねん)の私としてはたいした事を書けるはずもなく、しかも他の執筆者の皆さんがそうそうたる実力派揃いなので、私は暇ネタに徹することにしますねー。

 XOOPSに関わるようになって早8年が過ぎようとしてるわけですが、その間、XOOPSおよびその発展系であるXOOPS Cubeのテーマ・テンプレートの「仕組み」に関してはほぼ何ら変わっていません。つまりは昔のテクニックが今でも有効に利用できるわけで、そういった意味では非常に「枯れた」システムで、多くのノウハウが蓄積しているのにも関わらず、「XOOPSはもう終わった」とか「あれって古くさいじゃないですか〜」とか、多分ろくに使ったこともないだろう連中が訳知り顔で言うのですが、おいらとしては「いやいや、このテクニックの集積を使わない手はないんじゃないの」と思うわけです。

 CMS業界(というものがあるならば)では日夜新しいCMSシステムがリリースされているのですが、いくつか使った経験では、斬新なことが出来る事と引き替えにカスタマイズの自由度が低いシステムが多い気がします。「気がします」と書いたのは本当にそんな気がして実は違うかもしれないって訳じゃなくて、実際にやりたいことが出来なくて「バカヤローコンナシステムツクリヤガッテ!」といった経験に裏付けられている実話ですが、他システムに気を遣って「気がしますね〜」と書いただけなので念のため。

 何が言いたいかというと、「使わないのはもったいないよね、タダで途中まで出来上がってるライセンスフリーな(GPLじゃねーかって突っ込みは無しで)システムが、ノウハウたくさん付いて配られてるのに」な訳です。

 なんか話がとっちらかってきましたが、えーと「テーマとテンプレート」ね、お題は。

 さっきも書いたようにPHPのsmartyエンジンを利用するようになったXOOPS2.0から基本的に仕組みが変わっていません。意外とこの仕組みを理解できてない人も多いので、簡単に書くと「テーマ(theme)」という静的なHTMLによってデザインされたページのあちこちにブロック状の穴が空いていて、そこに各モジュールのテンプレートに従ってPHPから吐き出された「ブロック」または「コンテンツ」がすっぽり入るという説明が分かりやすいと思います。

 その吐き出されたを受け取る物が「smarty変数」と呼ばれる物で、頭に「$」記号が付いています。XOOPSではさらにそれを<{}>という変則二重括弧で囲むというお約束になっているわけですが、この理屈を理解していればテーマやテンプレートのカスタマイズも自由自在になるはず。

例えば:

<html>

<head>
・・・
</head>
<body>
・・・
<div id="sample">
<{$contents}>
</div>
・・・
</body>
</html>

というテーマがあったとして、

$contentsには

<h1 class="pageTitle"><{$title}></h1>

<div class="description"><{$bodytext}></div>

というモジュールテンプレートが入ることになっているとします。

XOOPSの管理画面、または入力画面で、

$titleには「おはよう、みなさん!」

$bodytextには「今日もいい天気ですね。」

と入力した場合、最終的にブラウザに出力されるソースを想像できますか?

<html>

<head>
・・・
</head>
<body>
・・・
<div id="sample">
<!--ここからがシステム吐き出し部分-->
<h1 class="pageTitle">おはよう、みなさん!</h1>
<div class="description">今日もいい天気ですね。</div>
<!--ここでシステム吐き出し終わり-->
</div>
・・・
</body>
</html>

が正解です。(コメントは差っ引いて見てくださいね)

 この理解さえ出来ていれば、XOOPSの自由度はものすご〜く増します。

元が最近のCMSに比べてある意味原始的な仕組みなので、テーマやテンプレートのHTML部分をどんどん書き換えちゃってもシステム自体に影響は与えません。

 全てのモジュールで同じデザインを適用したいなら、#sample(id="sample")に対して何らかのCSSスタイルを適用すればいいですし、もっと複雑なことをしたいのであればさらにその外側や内側に別のdivを挟んでidやclassを適用するとか。

 またモジュール個別に何かのデザインを適用するのであれば、テンプレートにそれを適用する仕組みを入れます。例えば、

<div class="hogehoge">

<h1 class="pageTitle"><{$title}></h1>
<div class="description"><{$bodytext}></div>
<div>

なんてテンプレートに変更し、style.cssに.hogehogeのCSSスタイルを書き込めば、そのテンプレートが適用された時だけに反映されるでしょう。

ただし、システムに影響を与えないと言っても、タグの閉じ忘れや変数名のスペルミスがあったりすると、ページが真っ白になるのでそのつもりで。

てな訳で、今日の私は基礎中の基礎編でおしまい。また来週。ノシ

※この投稿はXOOPS Themes and Templates Advent Calendar 2012 ( http://qiita.com/advent-calendar/2012/xoops-themes-templates ) の12/3分だよ!