さて、１２月１日から始まったXOOPSアドベント・カレンダー2012ですが、いよいよ私に順番が回ってきました。
前日の記事はこちら テーマのOGP対応カスタマイズ
お題は「XOOPSのテーマで１～３カラム対応にする方法」です。
XOOPSの魅力 自由なブロック配置
XOOPS の魅力のひとつとして、色々なテーマを簡単に切り替えられる、テーマ内で自由にブロック配置ができるということがあります。
管理画面を見ていただくと判るのですが、基本的にブロックの配置は左・中央・右の３種類に加えて、中央全体・中央左・中央右の選択が可能。さらに、各ブロックについて並び順（weight）設定ができることから、思いどおりの配置を実現することができるんです。そのブロック配置の基本 「左・中央・右」 については、左カラム・中央カラム・右カラムというふうに、大きな配置のくくりで呼ばれたりします。
XOOPSのテーマでは、この 「左・中央・右」カラムを表示する３カラム表示 が基本なのですが、場合によっては 「左・中央」 とか 「中央・右」 のような２カラム表示や 「中央」 だけの１カラム表示としたい場合がありますよね？
ということで、管理画面でのブロック配置で 「左・中央」 だけを選択すれば２カラム表示となり、「中央」 だけを選んだら１カラム表示になる仕組みをテーマに持たせてあげると OK！となります。
３カラム
２カラム
１カラム
テーマが上手く対応出来ていると、上の図のように綺麗に表示してくれます。
では、どうしたらこのような１～３カラム対応できるのでしょうか？
ポイントは、<{$xoops_showlblock}> と <{$xoops_showrblock}> という２つのsmarty変数にあります
。これは「左ブロック表示状態」「右ブロック表示状態」を示してくれるもので、いずれも表示されている場合には１を表示がない場合は０を返してきます。つまり、これを使うと１～３カラムの判定ができるということですね。
現在、私が良く使っている方法は２通りあります。
ひとつが、bodyのclassに判定文を入れて、CSSで１～３カラム対応とする方法。もうひとつが、カラム用のdivに判定文を入れて、１～３カラム対応とする方法です。
前者は、ホダ塾ディストリビューションのデフォルトテーマだった HD_Default で採用されていた方法で、この方法が現在の標準的な方法だと思います。
後者は、Twitter Bootstrap に対応させるため、私が考えた方法です。
ひとつめの方法 「bodyに判定文を追加する」
では、一つ目の方法を説明しましょう。まず、HTMLのbodyに判定文を追加します。
<body class="L<{$xoops_showlblock}>R<{$xoops_showrblock}>>
ここでは、classが L1R1になれば３カラム、L1R0なら左カラムと中央カラムの２カラム、L0R1なら右カラムと中央カラムの２カラム、L0R0なら１カラムということになります。
CSSで次のような設定をします。
body.L1R1 #center-column {
width:73%;
float:right;
}
body.L1R0 #center-column{
width:73%;
float:right;
}
body.L1R1 #left-column , body.L1R0 #left-column {
width:25%;
float:left;
}
body.L0R1 #center-column , body.L0R0 #center-column{
width:100%;
}
body.L0R0 .sidebar , body.L1R0 .sidebar{
display:none;
}
body.L0R0 .left-col , body.L1R0 .left-col{
width:100%;
}
表示しないカラムについては、CSSで display:none; として非表示設定するのも良いのですが、theme.html で smarty変数による分岐処理を併用したりもします。そう、こんな感じです。
<{if $xoops_showlblock == 1}>
<div id="left-column">
<{foreach item=block from=$xoops_lblocks name=lbloop}>
<div>
<{if ! $block.title|strstr:"none"}><h4><{$block.title}></h4><{/if}>
<{$block.content}>
</div>
<{/foreach}>
</div>
<{/if}>
２つ目の方法 「TwitterBootstrap対応」
次は、２つめの方法。最近、私が使い出したもので、独自の方法になります。
<{assign var="layoutL" value=L$xoops_showlblock}>
<{assign var="layoutR" value=R$xoops_showrblock}>
<{assign var="layout" value=$layoutL$layoutR}>
このように、まずsmarty変数をアサインします。つまり、ここではlayoutという変数が１～３カラムによって変化するということになりますね。
もちろん、主要な判定は先に紹介した方法を併用するのですが・・・
<{if $xoops_showlblock == 1}>
<div id="side_bar"><{* side_bar left-column *}>
<{foreach item=block from=$xoops_lblocks name=lbloop}>
<div>
<{if ! $block.title|strstr:"none"}><h3><{$block.title}></h3><{/if}>
<{$block.content}>
</div>
<{/foreach}>
</div><{* /side_bar left-column *}>
<{/if}>
こうやって、ブロック（カラム）の存在確認をしておいて、もし「左ブロックがあれば表示」という感じにしてあげます。
そして、その場合の中央カラムの設定について、先にアサインしておいた layout で変化させてあげるという形にしています。
<{* center contents *}>
<div id="center_contents" class="span<{strip}>
<{if $layout == "L1R1"}>
6
<{elseif $layout == "L1R0"}>
9
<{elseif $layout == "L0R1"}>
9
<{else}>
12
<{/if}>
"><{/strip}>
ここでは、カラムの変化に応じて、３カラムなら span6、２カラムなら span9、１カラムなら span12 となり、これで１～３カラムに対応しているという訳です。
これはどういうことかというと、TwitterBootstrap の場合、１２種類のブロック幅を持っていて、span1 から span12 までのクラスにより横幅を設定しているようですので、TwitterBootstrap を採用するなら、そのお作法に従わなくてはなりません。
ですので、通常の判定とは異なる方法を考案して、採用したということですね。
どうですか？ 判りました？？？
ちょっと端折りすぎて判らないかなぁ・・・？