トップ  >  趣味の部屋  >  XOOPSサイト構築  >  在来テーマのスタイルを利用したテンプレート
xoops テーマ

(この記事は、XOOPS Themes and Templates Advent Calendar 2012 の12月5日の記事です。)

⇒ アドベントカレンダーの参加者リスト
⇒ 4日目の投稿 文字を大きくすることもできる!iphoneテーマの内容と使い方 mikaさん
⇒ 6日目の投稿 テーマでアバターとログインIDを表示する nouphetさん

在来テーマのスタイルを利用したテンプレート anchor.png

 XOOPSで配布されたテーマの中から自分好みのものを探す時に、使っているモジュールの文字色が固定のためにテーマによって文字が見えづらくなったり、背景色が固定されていてテーマの色調に合わなかったりして選択から外してしまうことは良く経験します。 そんなとき、「モジュールがテーマの色調に合うように作ってくれれば良いのに・・」 と思いますね。

 そこで、テーマに合わせて色調や文字サイズなどを完全にフィットさせる方法がいくつかある中、最新のものとして、

  • Bootstrap対応の最新のテーマ
  • Bootstrap用にカスタマイズしたモジュールテンプレート

 これらを組み合わせて作り上げて行ければベストだと思いますが、 テーマもまだ少ないですし、対応モジュールも現時点ではまだありません。
 でも諦めるのはまだ早い、以前から使われていた簡単な方法でも最低限の合わせ込みが可能なので、あらためてご紹介します。

ニュースモジュールの表示を見てみよう anchor.png

 典型的で分かり易い例として、newsモジュールから派生したbulletinモジュールの表示を見てみましょう。

bulletin_legacy_default.jpg

 ヘッダー、本文、フッター をブロック要素であるdivでくくり、"itemHead" "itemInfo" "itemBody" "itemFoot" というクラス指定しています。
そして、その中でspanやpなどの要素でくくり、"itemTitle" "itemPoster" "itempostDate" "itemText" "itemAdminLink" "itemPermaLink" というクラス名のセレクタ指定です。

 これらスタイル要素は、XOOPS2.0系以前の古いテーマから使われてきており、最新テーマを含めてほぼ全てと言ってよいほど多くのテーマで記載されているレガシーなスタイルで、XOOPS Cube legacy 2.2同梱のlegacy_themeでもしっかりと記述されています。

 他方、HTMLを吐き出すテンプレートのほうは実際のbulletinのテンプレート群で、確認してみてください。 item.htmlの例はこちらで見れます。

色々なテーマで表示すると anchor.png

色々なテーマで表示させて、色合いなどを確認してみましょう。 "_01bsn-04" "colorring_yourself" "trump_color4" "tw940" を選んだ時の表示例です。

bulletin_01bsn-04.jpgbulletin_colorring_yourself.jpgbulletin_trump_color4.jpgbulletin_tw940.jpg

いかがでしょう? テーマの色調にしっかり反映できているので、テーマ選択が楽しくなりますね! :-)

応用例 anchor.png

 上の例のように、"item____"系のクラスやセレクタ要素を指定すれば、カスタムブロックなどでも従来テーマの色調にフィットさせることが可能ですし、他のモジュールでも同様に汎用性を持たせることができます。

カスタムブロック に適用してみる anchor.png

 実践としてまずはカスタムブロックで適応させてみましょう。
 このカスタムブロックの元ネタは、Ryusのmikaさんの記事「クリスマスまであと何日?をブロックに表示する」ですが、少しいじってから、これを上記の "item____"系のクラスやセレクタ要素を指定することで、テーマによって表示が変わることを確認してみます。

 例えば、以下の内容で「php」種別のカスタムブロック「今年もお世話になりました」を作ってみると、下画像のように表示されます。

custom_original.jpg
Everything is expanded.Everything is shortened.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
global  $xoopsUser;
if (is_object($xoopsUser)) {
    $uname =  $xoopsUser->getVar('uname');
}else{
    $uname =  'ゲスト';
}
 
/* ここに指定したい日付を入れる */
$toYear = 2013;
$toMonth = 1;
$toDay = 1;
 
$toTime1=mktime(0,0,0,$toMonth,$toDay,$toYear);
$currentTime=mktime(0,0,0,date("m"),date("d"),date("Y"));
$atoDay=($toTime1-$currentTime)/86400;
?>
 
<div style="background:#ffff99;text-align:center;padding-top:10px;padding-bottom:10px;width:100%;border:dotted 3px #00ff00;">
<div><?php echo $uname;?>さん、こんにちは!</div>
<div>今年も残すところあと <?php echo $atoDay;?> 日ですね。<br />来年もどうぞよろしく。</div>
</div>

 これに、要素をクラス指定することで、以下の画像のように他のブロックと同一デザインになってくれます。 いかがでしょうか? 簡単ですね! 凝ったデザインでなければ、大概はこの方法でテーマのデザインに合うカスタムブロックができちゃいます。

custom_with_class.jpg
Everything is expanded.Everything is shortened.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
global  $xoopsUser;
if (is_object($xoopsUser)) {
    $uname =  $xoopsUser->getVar('uname');
}else{
    $uname =  'ゲスト';
}
 
/* ここに指定したい日付を入れる */
$toYear = 2013;
$toMonth = 1;
$toDay = 1;
 
$toTime1=mktime(0,0,0,$toMonth,$toDay,$toYear);
$currentTime=mktime(0,0,0,date("m"),date("d"),date("Y"));
$atoDay=($toTime1-$currentTime)/86400;
?>
 
<div class="item">
  <div class="itemHead">
    <span class="itemTitle"><?php echo $uname;?>さん、こんにちは!</span>
  </div>
  <div class="itemBody"><p class="itemText">今年も残すところあと <?php echo $atoDay;?> 日ですね。<br />来年もどうぞよろしく。</p></div>
</div>

他のモジュールの例 anchor.png

d3diary anchor.png

 日記・ブログモジュールd3diaryのテンプレートは、こうした考えを踏襲しているので多くのテーマにそのままフィットします。 以下の紹介する例では、テンプレートに一切変更を行うこと無くテーマを差し替えることで表示の変更が可能なことを確認できます。

d3diary_5dark_colors.jpgd3diary_trump_color4.jpgd3diary_ipon2.jpgd3diary_01bsn-04.jpg
d3forum anchor.png

 もうひとつ、d3forumモジュールのオリジナル版はテーマの色調に合わせてCSSテンプレートを編集する必要があったのですが、XoopsX に同梱したd3forum(ver0.86以上)は上記の考えで手を加えていますので、これも多くのテーマでそのままフィットしてくれるはずです。

d3forum_trump_color4.jpg

まとめ anchor.png

 今回、レガシーなテーマのスタイルを利用して、テーマデザインへの適応方法の一例をご紹介しました。 XoopsX ディストリビューションパッケージに同梱されているX-update を使うことで、最新テーマのインストールや Theme Finerを使ったレガシーテーマを簡単に導入できます。様々なテーマの着せかえ表示を簡単にできるCMS、XOOPSって楽しいですね!


実体ページ:inc/templates4_legacy_theme

プリンタ用画面
投票数:22 平均点:10.00
前
XOOPS Cube Legacy でブロックテンプレートで$uidを使う為のプリロード
カテゴリートップ
XOOPSサイト構築
次
xupdateモジュール

コメント一覧

投稿ツリー


marine サイトURL  投稿日時 2012/12/5 8:12

naaoさん、ご苦労様です~m(_ _)m
良い内容のブログですね。流石です。

おっしゃるとおり、モジュール側で汎用のclassを使っていただけると、テーマを作る側としては楽になりますね。
今は、modules.css などのように、モジュールのcssをオーバーライドするようなcssを追加して対応してますから・・・

ところで、d3forumの改修の話(css関係)は知りませんでした。
なるほど、これだとテーマ下テンプレートでclass変更とか追記とかしなくても済みそうですね。ありがとうございます。

なーお  投稿日時 2012/12/5 9:08 | 最終変更

marineさん、こんにちは。

コメントありがとうございます。 :-)

汎用タグで囲ってあれば、もしclass変更してカスタムする時も目星をつけやすいですし、もっと標準的に使われていても良い方法だと思ってます。

bulletinのテンプレートを見ると、以前からこうしたことに注意して作られたモジュールもあったことがわかりますが。。 これはまあ、人によって重視するものが異なる部分なのかもしれません。

d3forumへの適用は、ハック版の頃からそうしてましたので、ver0.86から入っています。



新しくコメントをつける

題名
ゲスト名
投稿本文
より詳細なコメント入力フォームへ